webui-popover 一個輕量級的jquery彈出層插件


該提示框插件可以和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加載內容 }



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM