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

data-toggle是Bootstrap的专用属性，它的值对应插件的名称。

另外，data-toggle属性需要搭配data-target一起使用。data-target也是Bootstrap的专用属性，用来指定控制对象，它的属性值是一个jQuery选择符。比如：

如果想禁用属性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。

<li><a href="#attri" data-toggle="collapse">Attributions</a></li>

</ul>

attri

</div>

pics

</div>

□ Accordion

每次只能显示一块区域，区域的区域隐藏。

<a href="#first" data-toggle="collapse" data-parent="#accordion">First</a>

</div>

</div>

<a href="#second" data-toggle="collapse" data-parent="#accordion">Second</a>

</div>

</div>

<a href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>

</div>

</div>

□ Modal

模态弹出窗口。

1、通过调用属性API

<div class="modal-header"><h4>Thanks for coming</h4></div>

<div class="modal-body"><p>This is all i can provide</p></div>

</div>

2、通过调用Javascript的API

使用Javascript的API方式调用Modal。modal部分不变，按钮部分改成：

再为id为open的按钮添加jQuery事件：

$(function() {

//模态窗口

var $setDialog = $('#setDialog');

$('#open').on("click", function () {

$setDialog.modal('show');

return false;

});

</script>

还可以为模态窗口添加事件。

$(function() {

//模态窗口

var $setDialog = $('#setDialog');

$('#open').on("click", function () {

$setDialog.modal('show');

return false;

});

//在模态窗口隐藏的时候发生

$setDialog.on("hidden.bs.modal", function() {

alert('我要被关闭了~~');

});

</script>

□ Tab

选项卡切换内容。

<li><a href="#contactTab" data-toggle="tab">Contact</a></li>

<li><a href="#addressTab" data-toggle="tab">Address</a></li>

</ul>

</div>

</div>

□ Tooltip

当把鼠标移动到某个元素上面，出现提示。

Html部分为：

</div>

Javascript部分为：

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

可以在input上添加更多的属性API。

</div>

也可以通过Javascript的API。

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

delay:{

show: 500,

hide: 0

}

});

Tooltip也可以显示为html。

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

Javascript部分。

//提示框

var $sendAlert = $('#sendAlert');

$('#btn').on('click', function() {

$sendAlert.show();

});

$sendAlert.on('close.bs.alert', function () {

//放置Alert部分从DOM中删除

$sendAlert.hide();

return false;

});

□ Carousel

Html部分。

</ol>

</div>

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

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