最近项目有点多,日记没多少时间写。哈哈。
今天介绍一款好用的提示控件 webui-popover
像popover(弹出框)这样的插件用处很广,基本所有的社交网站都有。Bootstrap自带的popover.js就实现了这个功能。但是在使用了几天之后就发现Bootstrap的popover做的不够好,使用效果跟当前的主流网站还有点差距。
于是今天就介绍一个更优秀的popover:webui-popover,它兼容bootstrap但并不依赖于bootstrap。
1.文档官网:
gitthub地址:https://github.com/sandywalker/webui-popover 更多方法可以前往查看挖掘
demo示例:http://sandywalker.github.io/webui-popover/demo/#
和Bootstrap的popover相比,它有一个显著的优点:支持异步加载。
2.特点
-
快,轻量
-
支持更多的位置
-
自适应位置
-
弹出框可以带关闭按钮
-
同一个页面可以有多个弹出框
-
不同风格
-
支持URL和iframe
-
支持异步模式
-
多个动画
-
支持背景高亮
3.使用:
伸手链接(需要修改文档可以复制链接下载本地使用修改):
Cdn 云样式
css:
<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.css" rel="stylesheet">
js:
/*前提使用*/
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.js"></script>
如下使用此插件
$('#id').webuiPopover(options);
3.1、文档给出的一些例子
最简单的Popover。
$('#id').webuiPopover({title:'Title',content:'Content'});
通过dom元素的data-* 属性创建Popover。
html:
<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
jq:
$('a').webuiPopover();
Popover的内容可以通过为它的下一个元素设置 'webui-popover-content' class来指定。
html:
<a href="#" >shop pop</a>
<div class="webui-popover-content">
<p>popover content</p>
</div>
jq:
$('a').webuiPopover();
或者使用jQuery选择器(推荐id选择器)来设置Popover的内容。
html:
<a href="#" >shop pop</a>
<div id="myContent">
<p>popover content</p>
</div>
jq:
$('a').webuiPopover({url:'#myContent'});
指定Popover弹出的位置。
由mouse hover触发的Popover。
$('#id').webuiPopover({content:'Content',trigger:'hover'});
/*这个是比较常用的*/
/*鼠标经过 显示 提示*/
/*content : 可以是文字,也可以是html代码。例如<img src="xxx.jpg" style="width:200;height:400;">*/
/*则会显示一张图片*/
创建一个Sticky Popover(Popover创建之后总是显示)
$('#id').webuiPopover({content:'Content',trigger:'sticky'});
动态的创建Popover (by new option:'selector').
<a href="#" id="addPop" class="btn btn-default"> add Pop </a>
<div class="pops">
</div>
JQ:
$('#id').on('click',function(e){
$('<a href="#" class="show-pop data-placement="auto-bottom" data-title="Dynamic Title" data-content="Dynamic content"> Dynamic created Pop </a>').appendTo('#id');
});
宽高固定的Popover
$('#id').webuiPopover({content:'Content',width:300,height:200});
带关闭按钮的Popover
$('#id').webuiPopover({title:'Title',content:'Content',closeable:true});
Popover动画
$('#id').webuiPopover({title:'Title',content:'Content',animation:'pop'});
iframe类型的Popover
$('#id').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});
手动触发Popover
//Initailize
$('#id').webuiPopover({trigger:'manual'});
...
//Show it
$('#id').webuiPopover('show');
//Hide it
$('#id').webuiPopover('hide');
销毁Popover
$('#id').webuiPopover('destroy');
默认选项
{
placement:'auto',//位置: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical
container: document.body,// 将在其中添加Popover的容器。 (i.e. 父滚动区域). 可能是jQuery对象、选择器字符串或HTML元素. 参考:https://jsfiddle.net/1x21rj9e/1/
width:'auto',//数值则固定宽度
height:'auto',//数值固定高度
trigger:'click',//触发方式: click,hover,sticky(始终在创建popover之后显示);
selector:false,// jQuery selector, 如果提供了选择器,则popover对象将委托给指定的选择器
style:'',
animation:null, //动画values: pop,fade (只在支持CSS 3转换的浏览器中生效)
delay: {//显示和隐藏弹出器的延迟时间,只有在触发器“悬停”时才能工作,该值可以是数字或对象。
show: null,
hide: 300
},
async: {
type:'GET', //AJAX请求方法类型,默认值为GET
before: function(that, xhr) {},//在Ajax请求之前执行
success: function(that, data) {}//在Ajax请求成功后执行
error: function(that, xhr, data) {} //在错误的ajax请求后执行
},
cache:true,//如果缓存设置为false,则popover将销毁并重新创建
multi:false,//是否允许页面中的其他弹出框同时出现
arrow:true,//显示箭头或不显示箭头
title:'',//如果标题设置为空字符串,则标题栏将自动隐藏。
content:'',//内容的弹出,内容可以是文字,或者html代码。
closeable:false,//关闭按钮
direction:'', // 内容方向,默认ltr ,也可以是:'rtl';
padding:true,//内间距填充
type:'html',//值有:'html','iframe','async'
url:'',//如果类型等于‘html’,则值应该是jQueryselecor。如果类型等于“异步”,则插件将通过url加载内容。
backdrop:false,//如果背景设置为true,则popover将在打开时使用背景。
dismissible:true, //如果可以通过外部单击或转义键解除弹出
autoHide:false, //用指定的超时自动隐藏弹出,该值必须为false,或数字(1000=1s)
offsetTop:0, //
offsetLeft:0, //
onShow: function($element) {}, // 弹出后调用
onHide: function($element) {}, // 隐藏是调用
}