基于Bootstrap的轻量级弹出提示框插件

当前位置:主页 > jQuery库 > 工具提示 > 基于Bootstrap的轻量级弹出提示框插件
基于Bootstrap的轻量级弹出提示框插件
分享:

    插件介绍

    webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-16
    阅读:
简要教程

webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。它的特点有:

  • 运行速度快,轻量级。
  • 支持多种定位方式。
  • 能自动计算提示框位置。
  • 在提示框中提供关闭按钮。
  • 同一个页面支持多个提示框实例。
  • 支持不同的样式。
  • 支持使用url和iframe。
  • 支持异步加载模式。

使用方法

使用这个提示框插件首先需要引入jQuery和jquery.webui-popover.js,jquery.webui-popover.css文件。

<link rel="stylesheet" href="jquery.webui-popover.css">
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>                
              
调用插件

可以使用下面的方法来调用一个提示框。

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

配置参数

下面是该提示框插件的默认配置参数:

{
    placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left
    width:'auto',//can be set with  number
    height:'auto',//can be set with  number
    trigger:'click',//values:  click,hover,manual
    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
    backdrop:false,//if backdrop is set to true, popover will use backdrop on open
    dismissible:true // if popover can be dismissed by  outside click or escape key
}                
              

应用举例

创建一个简单提示框:

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

通过DOM元素的data-*首先来创建提示框:

<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>                
              
$('a').webuiPopover();                
              

在元素的下方插件一个提示框:

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

在鼠标滑过元素时弹出一个提示框:

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

创建一个inverse样式的提示框:

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

创建一个固定宽度和高度的提示框:

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

创建一个带关闭按钮的提示框:

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

创建一个带动画效果的提示框:

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

创建一个内容使用iframe的提示框:

$('a').webuiPopover({type:'iframe',url:'https://www.baidu.com'});                
              

通过异步模式插件一个提示框:

$('a').webuiPopover({   
    type:'async',
    url:'https://api.github.com/',
    content:function(data){
        var html = '<ul>';
        for(var key in data){html+='<li>'+data[key]+'</li>';}
        html+='</ul>';
        return html;
    }   
});                
              

创建一个提示框,并通过手动方式来触发它:

//Initailize 
 $('a').webuiPopover({trigger:'manual'});

...

 //Show it
 $('a').webuiPopover('show');