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

1、通过调用属性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');

2、通过调用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="data: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="data: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="data:images/21.jpg" alt="21"/>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

□ Modal

模态弹出窗口。

1、通过调用属性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>

2、通过调用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="data:images/1.jpg"/></div>

                <div class="item"><img src="data:images/2.jpg"/></div>

                <div class="item"><img src="data: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