Bootstrap彈出框和警告框插件

學習要點：

　　1.彈出框

　　2.警告框

本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。

一．彈出框

彈出框即點擊一個元素彈出一個包含標題和內容的容器。

基本用法

註意：必須在js結合popover()方法使用

data-toggle="popover"彈出框事件綁定，寫在觸發彈出框的元素裏，執行彈出框事件點擊彈出或隱藏(Bootstrap)
title=""設置彈出框標題，寫在彈出框元素裏，(Bootstrap)
data-content=""設置彈出框內容，寫在彈出框元素裏，(Bootstrap)

popover()彈出框方法，將觸發彈出框元素執行彈出框方法，一般在button元素上使用(Bootstrap)

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">
    點擊彈出/隱藏彈出框
</button>

js

$(function () {
    $(‘button‘).popover();
});

彈出框插件有很多屬性來配置提示的顯示，具體如下：

data-animation 默認 true，在 popover 上應用一個 CSS fade 動畫。如果設置 false，則不應用。設置是否淡入淡出動畫

data-html 默認 false，不允許提示內容格式為 html。如果設置為 true，則可以設置 html 格式的提示內容。設置內容或標題是否支持html標簽

data-placement 默認值 top，還有 bottom、left、right 和 auto。如果 auto 會自行調整合適的位置，如果是 auto left則會盡量在左邊顯示，但左邊不行就靠右邊。設置彈出框位置

data-selector 默認 false，可以選擇綁定指定的選擇器。可以在一個按鈕綁定一個指定的彈出框

data-original-title 默認空字符串，彈出框的標題。優先級比 title 低，設置標題

title 默認字空符串，彈出框的標題。設置標題

data-trigger 默認值 click，表示怎麽觸發 popover，其他值為：hover、focus、manual。多個值用空格隔開，manual手動不能和其他同時設置。設置觸發彈出框的事件

data-delay 默認值 0，延遲觸發 popover(毫秒)，如果傳數字則，表示 show/hide 的毫秒數，如果傳對象，結構為：{show:500,hide:100}，設置顯示和隱藏的延遲時間

data-container 默認值 false，將 popover 附加到特定的元素上。比如組合按鈕組提示，容器不夠，可以附加 body 上。container : ‘body‘，也就是如果提示信息被容器遮擋，可以設置一個外層div，將提示信息的容器重新指定到設置的div上

data-template 更改提示框的 HTML 提示語的模版，默認值為：設置提示框模板
　　<div class="popover">
　　　　<div class="arrow"></div>
　　　　　　<h3 class="popover-title"></h3>
　　　　<div class="popover-content"></div>
　　</div>

data-content 默認值為空，彈出框的內容。設置彈出框內容

data-viewport 設置外圍容器的邊際，具體代碼看示例。

<div id="view">
    <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">
        點擊彈出/隱藏彈出框
    </button>
</div>

js

$(function () {
    $(‘button‘).popover({
        container:‘#view‘,
        viewport: {
            selector: ‘#view‘,
            padding: 5,
        }
    });
});

重點，以上屬性有兩種使用方式，1是在html標簽裏用屬性的方式，2是在js裏用對象屬性的方式

html標簽裏用屬性的方式

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">
    點擊彈出/隱藏彈出框
</button>

2是在js裏用對象屬性的方式，將上面的屬性去掉data就是js對象屬性

$(function () {
    $(‘button‘).popover({
        animation:true,     //設置彈出框支持淡入淡出
        placement:‘top‘     //設置彈出框頭部顯示
    });
});

彈出框方法

show彈出框方法參數，顯示彈出框，(Bootstrap)
hide彈出框方法參數，隱藏彈出框，(Bootstrap)
toggle彈出框方法參數，反轉顯示和隱藏彈出框，(Bootstrap)
destroy彈出框方法參數，隱藏並銷毀彈出框，(Bootstrap)

$(function () {
    $(‘button‘).popover({
        animation: true,     //設置彈出框支持淡入淡出
        placement: ‘top‘     //設置彈出框頭部顯示
    });
    //顯示
    $(‘button‘).popover(‘show‘);
    //隱藏
    $(‘button‘).popover(‘hide‘);
    //反轉顯示和隱藏
    $(‘button‘).popover(‘toggle‘);
    //隱藏並銷毀
    // $(‘button‘).popover(‘destroy‘);
});

彈出框事件

show.bs.popover 在調用 show 方法時觸發(Bootstrap)
shown.bs.popover 在顯示整個彈窗時時觸發(Bootstrap)
hide.bs.popover 在調用 hide 方法時觸發(Bootstrap)
hidden.bs.popover 在完全關閉整個彈出時觸發(Bootstrap)

$(function () {
    $(‘button‘).popover({
        animation: true,     //設置彈出框支持淡入淡出
        placement: ‘top‘     //設置彈出框頭部顯示
    });
    $(‘button‘).on(‘show.bs.popover‘, function () {
        alert(‘在調用 show 方法時觸發！‘);
    });
    $(‘button‘).on(‘shown.bs.popover‘, function () {
        alert(‘在顯示整個彈窗時時觸發！‘);
    });
    $(‘button‘).on(‘hide.bs.popover‘, function () {
        alert(‘在調用 hide 方法時觸發！‘);
    });
    $(‘button‘).on(‘hidden.bs.popover‘, function () {
        alert(‘在完全關閉整個彈出時觸發！‘);
    });
});

第二百四十六節，Bootstrap彈出框和警告框插件