jQuery弹出信息插件WebUI Popover使用教程

WebUI Popover是一个轻量级的jQuery弹出信息插件，配合Bootstrap使用，能制作一些很棒的新功能效果，他的使用可以和Bootstrap结合，但是没有Bootstrap也能使用，依赖jQuery插件版本1.7+以上。
WebUI Popover轻量级的jQuery弹出信息插

兼容性

WebUI Popover能完美兼容以下浏览器中的显示效果
ie8+
Chrome
Safari
Firefox
Opera

使用方法

引入插件的文件

css">
...

使用插件

$('a').webuiPopover(options);

一些使用的例

创建简单的Popover

$('a').webuiPopover({title:'Title',content:'Content'});

创建Popover，通过DOM自定义属性设置弹出内容的值

$('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
}