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复选框CHECKBOX全选、反选
Aug 30 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JS的get和set使用示例
Feb 20 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
node.js express框架简介与实现
Jul 23 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
js实现全选和全不选
2020/07/28 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python的socket编程入门
2018/01/29 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
浅析python实现动态规划背包问题
2020/12/31 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
上课看小说检讨书
2014/02/22 职场文书
党风廉政承诺书
2014/03/27 职场文书
网络编辑求职信
2014/04/30 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
教师自查自纠材料
2014/10/14 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
新学期开学标语2015
2015/07/16 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS