最近專案有點多，日記沒多少時間寫。哈哈。

今天介紹一款好用的提示控制元件  webui-popover

像popover（彈出框）這樣的外掛用處很廣，基本所有的社交網站都有。Bootstrap自帶的popover.js就實現了這個功能。但是在使用了幾天之後就發現Bootstrap的popover做的不夠好，使用效果跟當前的主流網站還有點差距。

於是今天就介紹一個更優秀的popover：webui-popover，它相容bootstrap但並不依賴於bootstrap。

1.文件官網：

gitthub地址：https://github.com/sandywalker/webui-popover

demo示例：http://sandywalker.github.io/webui-popover/demo/# 

和Bootstrap的popover相比，它有一個顯著的優點：支援非同步載入。

2.特點

• 快，輕量

• 支援更多的位置

• 自適應位置

• 彈出框可以帶關閉按鈕

• 同一個頁面可以有多個彈出框

• 不同風格

• 支援URL和iframe

• 支援非同步模式

• 多個動畫

• 支援背景高亮

3.使用：

伸手鍊接（需要修改文件可以複製連結下載本地使用修改）：

Cdn 雲樣式

css:

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.css" rel="stylesheet">



js:

/*前提使用*/

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.js"></script>
 

如下使用此外掛

$('#id').webuiPopover(options);

3.1、文件給出的一些例子

最簡單的Popover。

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

通過dom元素的data-* 屬性建立Popover。

html:

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

jq:

$('a').webuiPopover();

Popover的內容可以通過為它的下一個元素設定 'webui-popover-content' class來指定。

html:

<a href="#" >shop pop</a>
<div class="webui-popover-content">
    <p>popover content</p>
</div>

jq:

$('a').webuiPopover();

或者使用jQuery選擇器（推薦id選擇器）來設定Popover的內容。

html:

<a href="#" >shop pop</a>
<div id="myContent">
    <p>popover content</p>
</div>

jq:

$('a').webuiPopover({url:'#myContent'});
指定Popover彈出的位置。

由mouse hover觸發的Popover。

$('#id').webuiPopover({content:'Content',trigger:'hover'});



/*這個是比較常用的*/
/*滑鼠經過 顯示  提示*/

/*content ： 可以是文字，也可以是html程式碼。例如<img src="xxx.jpg" style="width:200;height:400;">*/

/*則會顯示一張圖片*/

建立一個Sticky Popover（Popover建立之後總是顯示）

$('#id').webuiPopover({content:'Content',trigger:'sticky'});

動態的建立Popover (by new option:'selector').

<a href="#" id="addPop" class="btn btn-default"> add Pop </a>
<div class="pops">

</div>

JQ:

 $('#id').on('click',function(e){
            $('<a href="#" class="show-pop data-placement="auto-bottom"  data-title="Dynamic Title" data-content="Dynamic content"> Dynamic created Pop </a>').appendTo('#id');
        });

寬高固定的Popover

$('#id').webuiPopover({content:'Content',width:300,height:200});

帶關閉按鈕的Popover

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

Popover動畫

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

iframe型別的Popover

$('#id').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});

手動觸發Popover

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

 //Show it
 $('#id').webuiPopover('show');

 //Hide it
 $('#id').webuiPopover('hide');

銷燬Popover

$('#id').webuiPopover('destroy');

預設選項

{
    placement:'auto',//位置: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical
    container: document.body,// 將在其中新增Popover的容器。 (i.e. 父滾動區域). 可能是jQuery物件、選擇器字串或HTML元素. 參考：https://jsfiddle.net/1x21rj9e/1/
    width:'auto',//數值則固定寬度
    height:'auto',//數值固定高度
    trigger:'click',//觸發方式:  click,hover,sticky(始終在建立popover之後顯示);
    selector:false,// jQuery selector, 如果提供了選擇器，則popover物件將委託給指定的選擇器 
    style:'',
    animation:null, //動畫values: pop,fade (只在支援CSS 3轉換的瀏覽器中生效)
    delay: {//顯示和隱藏彈出器的延遲時間，只有在觸發器“懸停”時才能工作，該值可以是數字或物件。
        show: null,
        hide: 300
    },
    async: {
        type:'GET', //AJAX請求方法型別，預設值為GET
        before: function(that, xhr) {},//在Ajax請求之前執行
        success: function(that, data) {}//在Ajax請求成功後執行
        error: function(that, xhr, data) {} //在錯誤的ajax請求後執行
    },
    cache:true,//如果快取設定為false，則popover將銷燬並重新建立
    multi:false,//是否允許頁面中的其他彈出框同時出現
    arrow:true,//顯示箭頭或不顯示箭頭
    title:'',//如果標題設定為空字串，則標題欄將自動隱藏。
    content:'',//內容的彈出，內容可以是文字，或者html程式碼。
    closeable:false,//關閉按鈕
  direction:'', // 內容方向，預設ltr ,也可以是:'rtl';
    padding:true,//內間距填充
    type:'html',//值有:'html','iframe','async'
    url:'',//如果型別等於‘html’，則值應該是jQueryselecor。如果型別等於“非同步”，則外掛將通過url載入內容。
    backdrop:false,//如果背景設定為true，則popover將在開啟時使用背景。
    dismissible:true, //如果可以通過外部單擊或轉義鍵解除彈出
    autoHide:false, //用指定的超時自動隱藏彈出，該值必須為false，或數字(1000=1s)
    offsetTop:0,  // 
    offsetLeft:0,  // 
    onShow: function($element) {}, // 彈出後呼叫
    onHide: function($element) {}, // 隱藏是呼叫
}