下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入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很多插件类似。

  

  

  
  

  

bootstrap学习笔记之四(javascript插件)的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  3. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  6. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. 学习笔记:Javascript 变量 包装对象

    学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...

  9. Oracle学习笔记之四sp1,Oracle 11g的常用函数

    从Oracle学习笔记之四,SQL语言入门中摘出来的,独立成一章节 3.1 字符类函数 ASCII(c)和CHR(i)    分别用于返回一个字符的ASCII码和返回给定ASCII值所对应的字符. C ...

随机推荐

  1. document.body.scrollTop

    标准浏览器:document.documentElement.scrollTop; 谷歌浏览器:document.body.scrollTop; var scrollTop = document.do ...

  2. css与js后边有?v=20160101

    原文地址http://blog.csdn.net/zanychou/article/details/8813076 <span style="font-size:14px;" ...

  3. 人机接口设备攻击(HID Attack)

    人机接口设备攻击(HID Attack)   HID Attack是最近几年流行的一类攻击方式.HID是Human Interface Device的缩写,意思是人机接口设备.它是对鼠标.键盘.游戏手 ...

  4. js不间断平滑地自动向上滚动

    <html> <head> <title>scroll up auto smooth</title> <style> *{ margin: ...

  5. VS链接过程中与MSVCRT.lib冲突

    vs代码生成有/MT,/MTd,/Md,/MDd四个编译选项,分别代表多线程.多线程调试.多线程DLL.多线程调试DLL. 编译时引用的lib分别为libcmt.li.libcmtd.lib.msvc ...

  6. kafka 集群安装与安装测试

    一.集群安装 1. Kafka下载:wget https://archive.apache.org/dist/kafka/0.8.1/kafka_2.9.2-0.8.1.tgz 解压 tar zxvf ...

  7. BZOJ2597 [Wc2007]剪刀石头布(最小费用最大流)

    题目大概是说n个人两两进行比赛,问如何安排几场比赛的输赢使得A胜B,B胜C,C胜A这种剪刀石头布的三元组最多. 这题好神. 首先,三元组总共有$C_n^3$个 然后考虑最小化不满足剪刀石头布条件的三元 ...

  8. fill_parent 和 match_parent区别

    之前一直没有区别好 fill_parent 和 match_parent, 其实,在 api 8 以后,两者的作用几乎一样,都是填充控件 在这里延伸到android 的版本变化导致方法的变化问题 我对 ...

  9. SQL SERVER获取数据库中所有表名 XTYPE类型

    SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名,  (case whe ...

  10. JS验证金额

    <script type="text/javascript">        function ismoney(obj) {            check(obj) ...