A-A+
jQuery弹出信息插件WebUI Popover使用教程
WebUI Popover是一个轻量级的jQuery弹出插件,提高引导弹出和一些很棒的新功能了,下面我们来看一个关于jQuery弹出信息插件WebUI Popover使用教程.
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
- }