下面展现四个插件的用法，一般插件的功能可以用两种方法实现，一种是引入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. tnsnames.ora 监听配置文件详解

    今天是重要的一天.将XML数据导入ORACLE遇到很多问题,学了好多,其中很长时间花在网络配置上,刚开始学,具体原因不知道,先把搜集到的好文章存下来,以后慢慢研究. 监听配置文件            ...

  2. Java学习笔记（八）——封装

    一.封装 1.定义 将类的信息隐藏在类的内部,不允许外部程序直接进行访问,而是通过该类提供的方法来实现对隐藏信息的操作和方法. 2.优点 (1)只能通过规定的方法访问数据 (2)隐藏类的细节,方便修改 ...

  3. 【微信Java开发 --1---番外1】在windows下，使用JAVA执行多条DOS命令+文件夹/路径中有空格怎么解决【目的是实现内容穿透外网】

    内网穿透外网的那一篇,参正集1 但是每次都要Ctrl+R 启动DOS窗口,也就是CMD,一句一句的去粘,略显繁琐. 所以将这些任务写在JAVA程序中,启动一次程序就可以实现[内网穿透]的功能,多好啊! ...

  4. poj1061 Exgcd

    #include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...

  5. linux系统下本地搭建git服务器

    linux系统下如何搭建本地git服务器,用于存放团队的开发代码,如下步骤: 1.先用一台服务器来安装git,安装好linux以后,在这里选用的是Ubuntu 14.04.然后配置静态IP:172.1 ...

  6. BestCoder Round #74 (div.2)

    组合 1001 LCP Array 第一题就小难,出题的好像是浙大的大牛? 找到一个规律:a[i] = x, s[i..i+x]都想同.a[i] = a[i+1] + 1 (a[i] > 0), ...

  7. 【Oralce】时间操作

    加法 select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1 ...

  8. 连连看[HDU1175]

    连连看 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  9. Mariadb 数据库写入中文乱码问题

    从其他表里面导入数据,出现中文乱码错误.之前操作时并没有碰到类似问题,有些不得其解. 在网上搜了下,最后参考这篇文章,在执行insert前,先执行 set names gbk; 然后成功插入. 链接: ...

  10. 建立php开发环境(XAMPP + Xdebug+Zend Studio)

    1. 安装XAMPP和Zend Studio Zend Studio下载地址: http://pan.baidu.com/s/1o6BjvAE XAMPP 下载地址: http://pan.baidu ...