A-A+

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

2016年01月09日 web前端设计 暂无评论 阅读 7 views 次

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

使用方法

引入插件的文件

  1. <link rel="stylesheet" href="jquery.webui-popover.css">  
  2. ...  
  3. <script src="jquery.js"></script>  
  4. <script src="jquery.webui-popover.js"></script>  

使用插件

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

一些使用的例

创建简单的Popover

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

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

  1. <a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>  

$('a').webuiPopover();

在底部弹出窗口

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

特征

快速,轻量级

支持更多的位置

自动计算的位置

关闭弹出按钮

在同一页多的弹出

不同的风格

支持URL和iframe

支持异步模式

默认选项

  1. {  
  2.     placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left  
  3.     width:'auto',//can be set with  number  
  4.     height:'auto',//can be set with  number  
  5.     trigger:'click',//values:click,hover  
  6.     style:'',//values:'',inverse  
  7.     constrains:null, // constrains the direction when placement is  auto,  values: horizontal,vertical  
  8.     animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)  
  9.     delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object  
  10.         show: null,  
  11.         hide: 300  
  12.     },  
  13.     async: {  
  14.         before: function(that, xhr) {},//executed before ajax request  
  15.         success: function(that, data) {}//executed after successful ajax request  
  16.     },  
  17.     cache:true,//if cache is set to false,popover will destroy and recreate  
  18.     multi:false,//allow other popovers in page at same time  
  19.     arrow:true,//show arrow or not  
  20.     title:'',//the popover title ,if title is set to empty string,title bar will auto hide  
  21.     content:'',//content of the popover,content can be function  
  22.     closeable:false,//display close button or not  
  23.     padding:true,//content padding  
  24.     type:'html',//content type, values:'html','iframe','async'  
  25.     url:''//if not empty ,plugin will load content by url  
  26. }  
标签:

给我留言