該提示框插件可以和Bootstrap完美結合,但是並不一定需要和Bootstrap一起使用。它支持IE7以上的瀏覽器。
首先要引入需要的css js 文件
<link rel="stylesheet" href="jquery.webui-popover.css">
<script src="jquery.js">
</script> <script src="jquery.webui-popover.js"></script>
使用 :
$('a').webuiPopover(options);
簡單的彈出菜單:
$('a').webuiPopover({title:'Title',content:'Content'});
在DOM中使用 data-*
屬性創建彈出層:
<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
$('a').webuiPopover();
或者設置一個div層,添加類名 webui-popover-content
<a href="#" >shop pop</a> <div class="webui-popover-content"> <p>popover content</p> </div>
$('a').webuiPopover();
參數:
{
placement:'auto',//值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left 要顯示的位置 width:'auto',//可以設置數字 height:'auto',//可以設置數字 trigger:'click',//值:click,hover 觸發方式 style:'',//值:'',inverse delay:300,//延遲時間, 懸浮屬性才執行 cache:true,//如果緩存設置為false,將重建 multi:false,//在頁面允許其他彈出層 arrow:true,//是否顯示箭頭 title:'',//標題,如果標題設置為空字符串時,標題欄會自動隱藏 content:'',//內容,內容可以是函數 closeable:false,//顯示關閉按鈕 padding:true,//內容填充 type:'html',//內容類型, 值:'html','iframe','async' url:''//如果不是空的,插件將通過url加載內容 }