<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>汽泡组件</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
popover 用于 汽泡显示 场景
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">汽泡控制</div>
<div class="layui-card-body">
<button class="popover-show pear-btn pear-btn-primary">显示</button>
<button class="popover-hide pear-btn pear-btn-success">隐藏</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.show('#el1');
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
不同方式
</div>
<div class="layui-card-body">
<button class="toast-top-left-btn pear-btn" id="el1">手动</button>
<button class="toast-top-center-btn pear-btn" id="el2">回调</button>
<button class="toast-top-center-btn pear-btn" id="el3">iframe</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',placement:'auto',
animation:'pop',
closeable:true,
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'html',//content type, values:'html','iframe','async'
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
隐藏
</div>
<div class="layui-card-body">
<button class="pear-btn" id="closeAll">隐藏全部</button>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
var popover = layui.popover;
popover.hideAll();
})
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['popover', 'jquery', 'layer', 'code', 'element'], function() {
var layer = layui.layer;
var $ = layui.jquery;
var popover = layui.popover;
var element = layui.element;
layui.code();
$(".popover-show").click(function(e) {
popover.show('#el1');
})
$("#el1").click(function(e) {
popover.show('#el1');
})
$(".popover-hide").click(function(e){
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
})
$("#closeAll").click(function(e){
popover.hideAll();
});
//html 事件 手动
//用法参照 https://github.com/sandywalker/webui-popover
//增加功能 opacity [0,1] 可指定 popover 透明度
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',
animation:'pop',
closeable:true,
placement:'auto',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'html',//content type, values:'html','iframe','async'
})
//html 事件 hover
popover.create('#el2',{title:' hello popover-hover',content:'<div class="layui-tab layui-tab-brief" lay-filter="test">\n' +
' <ul class="layui-tab-title">\n' +
' <li class="layui-this" lay-id="11">网站设置</li>\n' +
' <li lay-id="22">用户管理</li>\n' +
' <li lay-id="33">权限分配</li>\n' +
' <li lay-id="44">商品管理</li>\n' +
' <li lay-id="55">订单管理</li>\n' +
' </ul>\n' +
' <div class="layui-tab-content" style="height: 100px;">\n' +
' <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以获得 tab 事件</div>\n' +
' <div class="layui-tab-item">内容2</div>\n' +
' <div class="layui-tab-item">内容3</div>\n' +
' <div class="layui-tab-item">内容4</div>\n' +
' <div class="layui-tab-item">内容5</div>\n' +
' </div>\n' +
'</div> ',trigger:'hover',
animation:'pop',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
placement:'top-right',
opacity:0.98,
onShow: function($element) {
//console.log("onShow",$element);
element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
console.log(location.hash);
})
},
});
popover.create('#el3',{title:' hello popover-iframe',trigger:'hover',
animation:'pop',
closeable:true,
placement:'auto',
delay: {
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 100
},
opacity:0.98,
type:'iframe',//content type, values:'html','iframe','async'
url:'http://cn.bing.com/',
width:500,
height:400
})
});
</script>
</html>