Bootstrap模块dropdown实现下拉框响应


Posted in Javascript onMay 22, 2016

本文介绍了Bootstrap下拉框模块dropdown的使用方法,供大家参考,具体内容如下

一、源码分析:
Dropdowns.scss:
下拉框模块
Javascripts/bootstrap/dropdown.js:实现下拉框响应

二、功能及原理:
下拉选项卡,默认不能实现显示选中项的功能

原理:

1、利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。
2、 需要js插件的支持

三、源码分析:
1、caret:实现向下的三角形,利用边框实现的
    1.1、边框颜色默认是字体颜色
    1.2、三角形的实现:边框要有宽度,然后相邻两边需有宽度,但颜色透明;最后还需要元素为行内块元素,才能使其高、宽为0。
    1.3、代码如下

<span style="border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; height: 0px; width: 0px; line-height: normal; display: inline-block; "></span>

2、在document上绑定了click事件的监听,监听类型为data-toggle=”dropdown”。
3、Js插件写的Plugin函数,和类的构造函数是用于js方式调用插件;
4、而data-*模式调用插件,用到是向document注入事件实现的,代码如下:

$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown)

代码直接调用了Dropdown定义的方法,这里经妙的设计在于插件的框架,data-*模式的调用与Js插件模式的调用,而这两种调用模式却利用了同一份代码。
5、如果用Js插件调用,基础方法都要自己调用才行,在创建实例时只会绑定toggle事件。

var Dropdown = function (element) {
 $(element).on('click.bs.dropdown', this.toggle)
}

6、clearMenu:只会清除data-toggle=”dropdown”的元素
7、dropdown-backdrop:用于移动没有单击事件的处理
8、keydown:当dropdown按钮获取焦点的时候,按下键可以展开,按上键收缩的功能
9、data-target和herf=”#id”:是为了实现单击,展开指定的下拉列表,默认是展开与按钮后面兄弟节点:

<ul class="nav nav-pills navbar-nav">
 <li><a>Index</a></li>
 <li><a>产吕</a></li>
 <li > <a data-toggle="dropdown" href="#name" >实用工具</a></li>
</ul>
<div id="name" >
 <ul class="dropdown-menu" >
 <li><a>关于我们</a></li>
 </ul>
</div>

10、实现向上弹出子菜单,用bottom:100%(弹出子菜单bottom的定位)实现
11、应用示例

<div id="dropdown" class="dropdown">
<a id="dropdown-btn" data-target="#dropdown" >number</a>
<ul class="dropdown-menu" >
 <li><a>3343</a></li>
<li><a>555</a></li>
</ul>
</div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
js实现简单选项卡制作
Aug 05 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
Javascript实现单选框效果
Dec 09 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
基于Bootstrap实现图片轮播效果
May 22 #Javascript
基于Vue.js的表格分页组件
May 22 #Javascript
js正则表达式replace替换变量方法
May 21 #Javascript
深入解析JavaScript中的立即执行函数
May 21 #Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 #Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 #Javascript
基于javascript实现表格的简单操作
May 21 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php你的验证码安全码?
2007/01/02 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
php rsa加密解密使用详解
2015/01/14 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python ellipsis 的用法详解
2020/11/20 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
班组长岗位职责
2014/03/03 职场文书
校长寄语大全
2014/04/09 职场文书
国庆宣传标语
2014/06/30 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
同学聚会通知书
2015/04/20 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android