WebUI Popover是一个轻量级的jQuery弹出信息插件,配合Bootstrap使用,能制作一些很棒的新功能效果,他的使用可以和Bootstrap结合,但是没有Bootstrap也能使用,依赖jQuery插件版本1.7+以上。
WebUI Popover轻量级的jQuery弹出信息插
兼容性
WebUI Popover能完美兼容以下浏览器中的显示效果
ie8+
Chrome
Safari
Firefox
Opera
使用方法
引入插件的文件
<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>
使用插件
$('a').webuiPopover(options);
一些使用的例
创建简单的Popover
$('a').webuiPopover({title:'Title',content:'Content'});
创建Popover,通过DOM自定义属性设置弹出内容的值
<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>
$('a').webuiPopover();
在底部弹出窗口
$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});
特征
快速,轻量级
支持更多的位置
自动计算的位置
关闭弹出按钮
在同一页多的弹出
不同的风格
支持URL和iframe
支持异步模式
默认选项
{
placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
width:'auto',//can be set with number
height:'auto',//can be set with number
trigger:'click',//values:click,hover
style:'',//values:'',inverse
constrains:null, // constrains the direction when placement is auto, values: horizontal,vertical
animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)
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: 300
},
async: {
before: function(that, xhr) {},//executed before ajax request
success: function(that, data) {}//executed after successful ajax request
},
cache:true,//if cache is set to false,popover will destroy and recreate
multi:false,//allow other popovers in page at same time
arrow:true,//show arrow or not
title:'',//the popover title ,if title is set to empty string,title bar will auto hide
content:'',//content of the popover,content can be function
closeable:false,//display close button or not
padding:true,//content padding
type:'html',//content type, values:'html','iframe','async'
url:''//if not empty ,plugin will load content by url
}