第二百四十七節，Bootstrap按鈕和折疊插件

Bootstrap按鈕和折疊插件

 

學習要點：

　　1.按鈕

　　2.折疊

 

本節課我們主要學習一下 Bootstrap 中的按鈕和折疊插件。

 

一．按鈕

可以通過按鈕插件創建不同狀態的按鈕，也就是點擊后為選中狀態顏色加深，需要再次點擊后后取消選中狀態，顏色還原

單個切換

 

data-toggle="button"綁定按鈕事件，寫在按鈕button元素里，點擊后選中或取消選中按鈕(Bootstrap)
autocomplete="off"多次頁面加載時按鈕可能保持表單的禁用或選擇狀態。解決方案是：添加 autocomplete="off"。(Bootstrap)

<button class="btn btn-primary" data-toggle="button" autocomplete="off">單個切換</button>

點擊前未選中顏色

 

點擊后選中顏色

 

再次點擊后取消選中顏色

 

 

單選按鈕，也就是按鈕式單選框

btn-group樣式class類，寫在包含多個按鈕<div>里，設置群組多個按鈕為一組(Bootstrap)
data-toggle="buttons"按鈕事件，寫在群組div里，表示群組按鈕事件，點擊后選中當前按鈕(Bootstrap)
label單選框或多選框按鈕標簽，設置群組單選框或多選框時用此標簽代替button標簽，轉換成按鈕(Bootstrap)
active樣式class類，寫在<label>里，設置群組里的當前按鈕為首選(Bootstrap)
for="nan"為當前元素所綁定的元素id(Bootstrap)

<div class="btn-group" data-toggle="buttons">
    <label for="nan" class="btn btn-primary active">
        <input id="nan" type="radio" name="sex" autocomplete="off" checked> 男
    </label>
    <label for="nv" class="btn btn-primary">
        <input id="nv" type="radio" name="sex" autocomplete="off"> 女
    </label>
</div>

 

 

按鈕式復選框

復選框和單選框一樣的只是type屬性值不一樣而已

<div class="btn-group" data-toggle="buttons">
    <label for="yy" class="btn btn-primary active">
        <input id="yy" type="checkbox" name="fa" autocomplete="off" checked>音樂
    </label>
    <label for="ty" class="btn btn-primary">
        <input id="ty" type="checkbox" name="fa" autocomplete="off"> 體育
    </label>
    <label for="msh" class="btn btn-primary">
        <input id="msh" type="checkbox" name="fa" autocomplete="off"> 美術
    </label>
    <label for="dl" class="btn btn-primary">
        <input id="dl" type="checkbox" name="fa" autocomplete="off"> 電腦
    </label>
</div>

 

 

 

加載狀態按鈕

加載狀態按鈕必須結合js

data-loading-text="上傳中請稍后..."設置加載狀態按鈕點擊后提示內容，按鈕元素里，點擊后提示的內容(Bootstrap)

 

<button id="myButton" type="button" data-loading-text="上傳中請稍后..." class="btn btn-primary" autocomplete="off">
    上傳文件
</button>

 

js

$(function () {
    $("a,input,button").focus(function () {         //獲取到所有的a,input,button標簽執行聚集光標事件
        this.blur()                                 //當聚集光標時，去除虛線邊框
    });

    $('#myButton').on('click', function () {        //獲取到加載狀態按鈕，執行點擊事件
        var btn = $(this).button('loading');        //點擊后執行loading方法，即html里的data-loading-text="上傳中請稍后..."
        setTimeout(function () {                    //計時器等待1秒
            btn.button('reset');                    //執行reset方法，還原初始狀態
        }, 1000);
    });
});

 

 

按鈕方法中有三個參數：

button()按鈕方法，將按鈕元素執行按鈕方法

toggle將按鈕元素綁定按鈕事件(Bootstrap)
reset將按鈕元素還原初始狀態(Bootstrap)
string自定義字符串，設置加載狀態按鈕提示內容(Bootstrap)

<button id="myButton" type="button" data-zdyixx-text="上傳中請稍后..." class="btn btn-primary" autocomplete="off">
    上傳文件
</button>

js

 

$(function () {
    $("a,input,button").focus(function () {         //獲取到所有的a,input,button標簽執行聚集光標事件
        this.blur();                                 //當聚集光標時，去除虛線邊框
    });

    $('#myButton').on('click', function () {        //獲取到按鈕指定點擊事件
        //$(this).button('toggle'); //點擊后執行按鈕方法
        $(this).button('zdyixx');                   //執行自定義提示信息，即html里data-zdyixx-text="上傳中請稍后..."
        setTimeout(function () {                    //計時器等待1秒
            $('#myButton').button('reset');         //執行reset方法，還原初始狀態
        }, 1000);
    })

});

 

 

 

 

二．折疊

通過點擊可以折疊內容。

基本實例

data-toggle="collapse"設置按鈕折疊事件，寫在按鈕元素里，點擊后執行折疊事件(Bootstrap)
data-target="#content"指向折疊區塊id，寫在按鈕元素里，將按鈕與折疊內容區塊關聯(Bootstrap)
collapse樣式class類，寫在折疊區塊<div>里，設置折疊區塊樣式(Bootstrap)
well樣式class類，寫在折疊內容區塊<div>里，設置折疊內容區塊嵌入樣式(Bootstrap)

<button class="btn btn-primary" data-toggle="collapse" data-target="#content">
    Bootstrap
</button>
<div class="collapse" id="content">
    <div class="well">
        Bootstrap 是 Twitter 推出的一個用於前端開發的開源工具包。它由
        Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發,是一個 CSS/HTML 框架。目
        前,Bootstrap 最新版本為 3.0 。
    </div>
</div>

 

 

手風琴折疊

 

panel-group樣式class類，面板容器<div>里，設置一個面板容器區塊(Bootstrap)
panel樣式class類，寫在面板組件<div>元素里，聲明面板組件div(Bootstrap)
panel-default樣式class類，寫在面板組件<div>元素里，設置面板組件默認樣式(Bootstrap)
panel-heading樣式class類，寫在面板組件里頭部<div>元素里，設置面板組件頭部樣式(Bootstrap)
panel-title樣式class類，寫在面板組件里頭部<h1-h4>元素里，設置面板組件頭部標題樣式(Bootstrap)
panel-collapse樣式class類，寫在面板組件里的內容區塊<div>元素里，設置折疊內容區域容器(Bootstrap)
collapse樣式class類，寫在面板組件里的內容區塊<div>元素里，設置折疊內容區域樣式(Bootstrap)
in樣式class類，寫在面板組件里的內容區塊<div>元素里，設置當前折疊內容區域為默認展開效果(Bootstrap)
將標題里的a標簽地址等於內容區域的id進行關聯,(Bootstrap)
data-parent="#accordion"寫在標題里的a標簽里，值是折疊面板容器的id，將折疊面板容器與標題a標簽關聯(Bootstrap)
data-toggle="collapse"折疊事件，寫在標題里的a標簽，點擊a標簽后執行折疊事件(Bootstrap)

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">點擊我進行展示，再點擊我進行折疊，第一部分</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                這里是第一部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">點擊我進行展示，再點擊我進行折疊，第二部分</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第二部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">點擊我進行展示，再點擊我進行折疊，第三部分</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第三部分。
            </div>
        </div>
    </div>
</div>

 

 

折疊屬性

data-parent 默認值為 false，設置需指定父元素選擇器。也就是說，選定其中一個折疊區，其他折疊將隱藏，實現手風琴效果。

data-toggle 如果前面加 data-*，設置'collapse'表示實現折疊；如果是 JavaScript 中的屬性，默認為 true，實現反轉

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第一部分</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                這里是第一部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseTwo" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第二部分</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第二部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseThree" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第三部分</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第三部分。
            </div>
        </div>
    </div>
</div>

js

 

$(function () {
    $("a,input,button").focus(function () {         //獲取到所有的a,input,button標簽執行聚集光標事件
        this.blur();                                 //當聚集光標時，去除虛線邊框
    });

    $('#collapseOne,#collapseTwo,#collapseThree').collapse({        //獲取所有標題a標簽id執行折疊方法
        parent: '#accordion',       //將a標簽與折疊容器id關聯
        toggle: false,              //false默認項展開，true默認項折疊
 });
});

 

 

 

 

折疊方法，方法還提供了三個參數：hide、show、toggle。

collapse()折疊方法，將折疊容器里的折疊內容區塊執行折疊方法(Bootstrap)

hide折疊方法參數，將內容折疊(Bootstrap)
show折疊方法參數，將內容展開(Bootstrap)
toggle折疊方法參數，反轉折疊和展開(Bootstrap)

$(function () {
    $("a,input,button").focus(function () {         //獲取到所有的a,input,button標簽執行聚集光標事件
        this.blur();                                 //當聚集光標時，去除虛線邊框
    });

    $('#collapseOne').collapse('hide'); $('#collapseTwo').collapse('show'); $('button').on('click', function () { $('#collapseOne').collapse('toggle'); });
});

 

 

折疊事件，Collapse 插件中事件有四種。

show.bs.collapse 在 show 方法調用時立即觸發(Bootstrap)
shown.bs.collapse 折疊區完全顯示出來是觸發(Bootstrap)
hide.bs.collapse 在 hide 方法調用時觸發(Bootstrap)
hidden.bs.collapse 該事件在折疊區域完全隱藏之后觸發(Bootstrap)

js

$(function () {
    $("a,input,button").focus(function () {         //獲取到所有的a,input,button標簽執行聚集光標事件
        this.blur();                                 //當聚集光標時，去除虛線邊框
    });

    $('#collapseOne').on('show.bs.collapse', function () {      //獲取到折疊內容區塊執行事件
        alert('在 show 方法調用時立即觸發'); }); $('#collapseOne').on('shown.bs.collapse', function () { alert('折疊區完全顯示出來是觸發'); }); $('#collapseOne').on('hide.bs.collapse', function () { alert('在 hide 方法調用時觸發'); }); $('#collapseOne').on('hidden.bs.collapse', function () { alert('該事件在折疊區域完全隱藏之后觸發'); });
});

HTML

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第一部分</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                這里是第一部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseTwo" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第二部分</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第二部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseThree" data-toggle="collapse">點擊我進行展示，再點擊我進行折疊，第三部分</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                這里是第三部分。
            </div>
        </div>
    </div>
</div>