Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

相似Page Header, Breadcrumbs, Dropdowns等，都是Bootstrap的組件，是靜態的。若是涉及到交互，Bootstrap提供了插件。這些插件包括：

○ 過渡效果： bootstrap-transition.js
○ 模態對話框：bootstrap-modal.js
○ 下拉項：bootstrap-dropdown.js
......

 

這些插件能夠單獨引入到頁面。而在bootstrap.js或bootstrap.min.js文件中已經包含了全部的插件。

 

本篇主要包括：

■ 如何使用Bootstrap插件
■ Collapse
■ Accordion
■ Modal
■ Tab
■ Tooltip
■ Alert
■ Carousel

□ 如何使用Bootstrap插件

一、經過調用屬性API

<a href="#" class="btn" data-toggle="dropdown"></a>

data-toggle是Bootstrap的專用屬性，它的值對應插件的名稱。

 

另外，data-toggle屬性須要搭配data-target一塊兒使用。data-target也是Bootstrap的專用屬性，用來指定控制對象，它的屬性值是一個jQuery選擇符。好比：

<button data-toggle="modal" data-target="#id" class="btn"></button>
<div id="id" class="modal hide fade"></div>

 

若是想禁用屬性API

$('body').off('.data-api');

 

若是想禁用某個屬性API，好比禁用alert的屬性API

$('body').off('.alert.data-api');

 

二、經過調用Javascript的API

顯示下拉菜單

$('.btn').dropdown();

 

顯示模態對話框

$('.btn').click(function(){
    $('#id').modal({
        backdrop: false,
        keyboard: false
    });
})

 

Bootstrap的插件方法參數也能夠是特定意義的字符串。好比：

$('#id').modal('hide');

 

使用Constructor屬性來訪問插件

var temp = $.fn.modal.Constructor

 

使用data方法訪問插件

$('[rel = modal]').data('modal')

 

若是Boostrap與其它UI框架發生命名衝突，能夠調用noConflict方法來獲取插件

var bootstrapmodal = $.fn.modal.noConflict();

 

□ Collapse

點擊按鈕或連接等，顯示或隱藏某個區域，好比div。

            <div class="row">
                <ul class="nav nav-pills navbar-default">
                    <li><a href="#attri" data-toggle="collapse">Attributions</a></li>
                    <li><a href="#pics" data-toggle="collapse">Pics</a></li>
                </ul>
                
                <div id="attri" class="collapse">
                    attri
                </div>
                <div id="pics" class="collapse">
                    pics
                </div>
            </div>

 

□ Accordion

每次只能顯示一塊區域，區域的區域隱藏。

            <div class="row">
                <div id="accordion" class="panel-group">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
                            </div>
                        </div>
                        <div class="panel-collapse collapse in" id="first">
                            <div class="panel-body">
                                <img src="images/19.jpg" alt="19"/>
                            </div>
                        </div>
                    </div>
                    
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a href="#second" data-toggle="collapse" data-parent="#accordion">Second</a>
                            </div>
                        </div>
                        <div class="panel-collapse collapse" id="second">
                            <div class="panel-body">
                                <img src="images/20.jpg" alt="20"/>
                            </div>
                        </div>
                    </div>
                    
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
                            </div>
                        </div>
                        <div class="panel-collapse collapse" id="third">
                            <div class="panel-body">
                                <img src="images/21.jpg" alt="21"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

 

□ Modal

模態彈出窗口。

一、經過調用屬性API

            <div class="row">
                <a href="#setDialog" class="btn btn-info" data-toggle="modal">點我</a>
                <div class="modal fade" id="setDialog" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header"><h4>Thanks for coming</h4></div>
                            <div class="modal-body"><p>This is all i can provide</p></div>
                            <div class="modal-footer"><button class="btn btn-success" data-dismiss="modal">關閉</button></div>
                        </div>
                    </div>
                </div>
            </div>

 

二、經過調用Javascript的API

使用Javascript的API方式調用Modal。modal部分不變，按鈕部分改爲：

<button class="btn btn-info" id="open">點我</button> 

 

再爲id爲open的按鈕添加jQuery事件：

    <script type="text/javascript">
        $(function() {
            //模態窗口
            var $setDialog = $('#setDialog');
            $('#open').on("click", function () {
                $setDialog.modal('show');
                return false;
            });
        });
    </script>

 

還能夠爲模態窗口添加事件。

    <script type="text/javascript">
        $(function() {
            //模態窗口
            var $setDialog = $('#setDialog');
            $('#open').on("click", function () {
                $setDialog.modal('show');
                return false;
            });
            //在模態窗口隱藏的時候發生
            $setDialog.on("hidden.bs.modal", function() {
                alert('我要被關閉了~~');
            });
        });
    </script>

 

□ Tab

選項卡切換內容。

            <div class="row">
                <ul class="nav nav-tabs">
                    <li><a href="#contactTab" data-toggle="tab">Contact</a></li>
                    <li><a href="#addressTab" data-toggle="tab">Address</a></li>
                </ul>
                <div class="tab-content">
                    <div class="well tab-pane active" id="contactTab">
                        <p>11111111</p>
                    </div>
                    <div class="well tab-pane" id="addressTab">
                        <p>22222222</p>
                    </div>
                </div>
                
            </div>

 

□ Tooltip

當把鼠標移動到某個元素上面，出現提示。

Html部分爲：

            <div class="row">
                <input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="Press here"/>
            </div>

 

Javascript部分爲：

$('input[type=submit]').tooltip();

 

能夠在input上添加更多的屬性API。

            <div class="row">
                <input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="Press here" data-placement="right" data-delay="500"/>
            </div>

 

也能夠經過Javascript的API。

$('input[type=submit]').tooltip({
    delay:{
        show: 500,
        hide: 0
    }
});

 

Tooltip也能夠顯示爲html。

            <div class="row">
                <input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="<img src='images/20.jpg' />" data-placement="right" data-delay="500" data-html="true"/>
            </div>

□ Alert

點擊某個元素，彈出提示框。

Html部分。

            <div class="row">
                <button id="btn" class="btn btn-success">顯示</button>
                <div class="alert alert-warning collapse" id="sendAlert">
                    <a href="#" data-dismiss="alert" class="close">&times;</a>
                    <p>ok, i am here</p>
                </div>
            </div>

Javascript部分。

            //提示框
            var $sendAlert = $('#sendAlert');
            $('#btn').on('click', function() {
                $sendAlert.show();
            });
            $sendAlert.on('close.bs.alert', function () {
                //放置Alert部分從DOM中刪除
                $sendAlert.hide();
                return false;
            });

□ Carousel

Html部分。

    <div class="container">
        <div id="myCarousel" class="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item"><img src="images/1.jpg"/></div>
                <div class="item"><img src="images/2.jpg"/></div>
                <div class="item"><img src="images/3.jpg"/></div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

Javascript部分。

    <script type="text/javascript">
        $(function() {
            $('.carousel').carousel();
        });
    </script>

參考資料：WilderMinds  

 

「Bootstrap 3之美」系列類包括:

Bootstrap 3之美01-下載並引入頁面

Bootstrap 3之美02-Grid簡介和應用

Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素

Bootstrap 3之美04-自定義CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模擬Select、Input Groups、Thumbnails、Panels、Wells

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel