bootstrap学习笔记之四（javascript插件）

下面展现四个插件的用法，一般插件的功能可以用两种方法实现，一种是引入bootstrap.js后，通过添加data属性实现，另一种则是通过js代码是实现。

第一个插件：下拉菜单的实现

　第一种方法：data属性

　　可以回顾下拉菜单组件的学习，记得当开始学习下拉菜单时就引入了data-toggle="dropdown"属性，如果没有使用这个属性，是无法实现下拉菜单效果的。随便说下，将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素，都是可以的，我们也可以把下拉菜单运用到按钮组，导航组里。所以说父集的类名dropdown是可以改变的，但是下拉菜单的dropdown-menu是不可以改变的。

1 <div class="dropdown">
2   <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3     Dropdown trigger
4     <span class="caret"></span>
5   </button>
6   <ul class="dropdown-menu" aria-labelledby="dLabel">
7     ...
8   </ul>
9 </div>

第二种方法：通过js实现（还是需要data属性）

　　如果没有data-toggle="dropdown"属性，可以在js中加上 $().dropdown('toggle')依然没发是实现效果，所以正如官方文档所说，通过js也是需要有data-toggle="dropdown"属性的。

第二个插件：TAB切换插件

　　这个插件只有通过JS才能实现，所以只有一种方法

　　JS方法：　html结构如下，ul下位tab导航栏，tab-content为要对应的切换的内容。　　　

 1  　　　<!-- Nav tabs -->
 2       <ul class="nav nav-tabs" role="tablist" id="myTabs">
 3         <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab">Home</a></li>
 4         <li role="presentation"><a href="#profile" aria-controls="profile" role="tab">Profile</a></li>
 5         <li role="presentation"><a href="#messages" aria-controls="messages" role="tab">Messages</a></li>
 6         <li role="presentation"><a href="#settings" aria-controls="settings" role="tab">Settings</a></li>
 7       </ul>
 8       <!-- Tab panes -->
 9       <div class="tab-content">
10         <div role="tabpanel" class="tab-pane active" id="home">我是王彪选我是王彪选1</div>
11         <div role="tabpanel" class="tab-pane" id="profile">我是王彪选我是王彪选2</div>
12         <div role="tabpanel" class="tab-pane" id="messages">我是王彪选我是王彪选3</div>
13         <div role="tabpanel" class="tab-pane" id="settings">我是王彪选我是王彪选4</div>
14       </div>
15     </div>

js如下：

1 $('.nav a').click(function (e) {
2       e.preventDefault()//阻止默认事件，去调后会进入#home。
3       $(this).tab('show')
4 })

第三个插件：滚动监听

　　一般监听对象都是body，但不同的需求，可能监听body之外的元素，但是当监听其他对象时必要声明其height以及overflow-y:hidden或scroll。更需注意的是不管监听对象是body或者其他对象，都需要给对象加上position: relative; 即相对定位方式。

　　第一种方法：data属性方法

1 <body data-spy="scroll" data-target="#navbar-example">
2   ...
3   <div id="navbar-example">//舰艇对象
4     <ul class="nav nav-tabs" role="tablist">
5       <a href="#home">home</a>
　　　　　　...
6     </ul>
　　　　<div class="nav-content">
　　　　<div id="home">....//被监听内容　　　

　　　　</div>

...

7  　　 </div>
8   ...
9 </body>

　　第二种方法：js实现　

1 $('body').scrollspy({ target: '#navbar-example' })

第四个插件：大图滚动（carousel）

　　同jquery很多插件类似。