bootstrap学习笔记之四(javascript插件)
下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入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插件)的更多相关文章
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- RX学习笔记:JavaScript数组操作
RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- 学习笔记:Javascript 变量 包装对象
学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...
- Oracle学习笔记之四sp1,Oracle 11g的常用函数
从Oracle学习笔记之四,SQL语言入门中摘出来的,独立成一章节 3.1 字符类函数 ASCII(c)和CHR(i) 分别用于返回一个字符的ASCII码和返回给定ASCII值所对应的字符. C ...
随机推荐
- document.body.scrollTop
标准浏览器:document.documentElement.scrollTop; 谷歌浏览器:document.body.scrollTop; var scrollTop = document.do ...
- css与js后边有?v=20160101
原文地址http://blog.csdn.net/zanychou/article/details/8813076 <span style="font-size:14px;" ...
- 人机接口设备攻击(HID Attack)
人机接口设备攻击(HID Attack) HID Attack是最近几年流行的一类攻击方式.HID是Human Interface Device的缩写,意思是人机接口设备.它是对鼠标.键盘.游戏手 ...
- js不间断平滑地自动向上滚动
<html> <head> <title>scroll up auto smooth</title> <style> *{ margin: ...
- VS链接过程中与MSVCRT.lib冲突
vs代码生成有/MT,/MTd,/Md,/MDd四个编译选项,分别代表多线程.多线程调试.多线程DLL.多线程调试DLL. 编译时引用的lib分别为libcmt.li.libcmtd.lib.msvc ...
- kafka 集群安装与安装测试
一.集群安装 1. Kafka下载:wget https://archive.apache.org/dist/kafka/0.8.1/kafka_2.9.2-0.8.1.tgz 解压 tar zxvf ...
- BZOJ2597 [Wc2007]剪刀石头布(最小费用最大流)
题目大概是说n个人两两进行比赛,问如何安排几场比赛的输赢使得A胜B,B胜C,C胜A这种剪刀石头布的三元组最多. 这题好神. 首先,三元组总共有$C_n^3$个 然后考虑最小化不满足剪刀石头布条件的三元 ...
- fill_parent 和 match_parent区别
之前一直没有区别好 fill_parent 和 match_parent, 其实,在 api 8 以后,两者的作用几乎一样,都是填充控件 在这里延伸到android 的版本变化导致方法的变化问题 我对 ...
- SQL SERVER获取数据库中所有表名 XTYPE类型
SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, (case whe ...
- JS验证金额
<script type="text/javascript"> function ismoney(obj) { check(obj) ...