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

模态弹出窗口。

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