第 17 章 按鈕和摺疊外掛

水之原發表於2016-04-24

學習要點：

1.按鈕
2.摺疊

主講教師：李炎恢

本節課我們主要學習一下 Bootstrap 中的按鈕和摺疊外掛。

一．按鈕
可以通過按鈕外掛建立不同狀態的按鈕。
//單個切換。

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

注：在 Firefox 多次頁面載入時，按鈕可能保持表單的禁用或選擇狀態。解決方案是：新增 autocomplete="off"。

//單選按鈕

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

//核取按鈕

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

//載入狀態

<button id="myButton" type="button" data-loading-text="Loading..."class="btn btn-primary" autocomplete="off">
    載入狀態
</button>
$('#myButton').on('click', function() {
    var btn = $(this).button('loading');
    setTimeout(function() {
        btn.button('reset');
    }, 1000);
});

Button 外掛中的 button 方法中有三個引數： toggle、 reset、 string(比如 loading、complete)。
//可代替 data-toggle="button"

$('button').on('click', function() {
    $(this).button('toggle');
})

 

二．摺疊
通過點選可以摺疊內容。
//基本例項

<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>

//手風琴摺疊

<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>

//手風琴效果

$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({
    parent : '#accordion',
    toggle : false,
});

//手動呼叫

$('button').on('click', function() {
    $('#collapseOne').collapse({
        toggle : true,
    });
});

//collapse 方法還提供了三個引數：hide、show、toggle。

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

Collapse 外掛中事件有四種。

//事件，其他雷同

$('#collapseOne').on('show.bs.collapse', function() {
    alert('當 show 方法呼叫時觸發');
});

相關文章