下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现。
第一个插件:下拉菜单的实现
第一种方法:data属性
可以回顾下拉菜单组件的学习,记得当开始学习下拉菜单时就引入了data-toggle="dropdown"属性,如果没有使用这个属性,是无法实现下拉菜单效果的。随便说下,将下拉菜单触发器和下拉菜单都包裹在 .dropdown
里,或者另一个声明了 position: relative;
的元素,都是可以的,我们也可以把下拉菜单运用到按钮组,导航组里。所以说父集的类名dropdown是可以改变的,但是下拉菜单的dropdown-menu是不可以改变的。
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
第二种方法:通过js实现(还是需要data属性)
如果没有data-toggle="dropdown"属性,可以在js中加上 $().dropdown('toggle')依然没发是实现效果,所以正如官方文档所说,通过js也是需要有data-toggle="dropdown"属性的。
第二个插件:TAB切换插件
这个插件只有通过JS才能实现,所以只有一种方法
JS方法: html结构如下,ul下位tab导航栏,tab-content为要对应的切换的内容。
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">我是王彪选我是王彪选1</div>
<div role="tabpanel" class="tab-pane" id="profile">我是王彪选我是王彪选2</div>
<div role="tabpanel" class="tab-pane" id="messages">我是王彪选我是王彪选3</div>
<div role="tabpanel" class="tab-pane" id="settings">我是王彪选我是王彪选4</div>
</div>
</div>
js如下:
$('.nav a').click(function (e) {
e.preventDefault()//阻止默认事件,去调后会进入#home。
$(this).tab('show')
})
第三个插件:滚动监听
一般监听对象都是body,但不同的需求,可能监听body之外的元素,但是当监听其他对象时必要声明其height以及overflow-y:hidden或scroll。更需注意的是不管监听对象是body或者其他对象,都需要给对象加上position: relative;
即相对定位方式。
第一种方法:data属性方法
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">//舰艇对象
<ul class="nav nav-tabs" role="tablist">
<a href="#home">home</a>
...
</ul>
<div class="nav-content">
<div id="home">....//被监听内容 </div>
...
</div>
...
</body>
第二种方法:js实现
$('body').scrollspy({ target: '#navbar-example' })
第四个插件:大图滚动(carousel)
同jquery很多插件类似。