該提示框插件可以和Bootstrap完美結(jié)合购笆,但是并不一定需要和Bootstrap一起使用。它支持IE7以上的瀏覽器虚循。
- 運(yùn)行速度快同欠,輕量級(jí)。
- 支持多種定位方式横缔。
- 能自動(dòng)計(jì)算提示框位置铺遂。
- 在提示框中提供關(guān)閉按鈕。
- 同一個(gè)頁(yè)面支持多個(gè)提示框?qū)嵗?/li>
- 支持不同的樣式茎刚。
- 支持使用url和iframe襟锐。
- 支持異步加載模式。
引用:
<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>
使用:
$('a').webuiPopover(options);
簡(jiǎn)單的彈出菜單:
$('a').webuiPopover({title:'Title',content:'Content'});
在DOM中使用 data-*
屬性創(chuàng)建彈出層:
<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
$('a').webuiPopover();
或者設(shè)置一個(gè)div層膛锭,添加類(lèi)名 webui-popover-content
<a href="#" >shop pop</a>
<div class="webui-popover-content">
<p>popover content</p>
</div>
$('a').webuiPopover();
參數(shù):
{
placement:'auto',//值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
width:'auto',//可以設(shè)置數(shù)字
height:'auto',//可以設(shè)置數(shù)字
trigger:'click',//值:click,hover
style:'',//值:'',inverse
delay:300,//延遲時(shí)間, 懸浮屬性才執(zhí)行
cache:true,//如果緩存設(shè)置為false,將重建
multi:false,//在頁(yè)面允許其他彈出層
arrow:true,//是否顯示箭頭
title:'',//標(biāo)題,如果標(biāo)題設(shè)置為空字符串時(shí),標(biāo)題欄會(huì)自動(dòng)隱藏
content:'',//內(nèi)容,內(nèi)容可以是函數(shù)
closeable:false,//顯示關(guān)閉按鈕
padding:true,//內(nèi)容填充
type:'html',//內(nèi)容類(lèi)型, 值:'html','iframe','async'
url:''//如果不是空的,插件將通過(guò)url加載內(nèi)容
}
Tips:需要使用jquery1.7+版本
github地址