《Bootstrap模块dropdown实现下拉框响应_.docx》由会员分享，可在线阅读，更多相关《Bootstrap模块dropdown实现下拉框响应_.docx（4页珍藏版）》请在三一文库上搜索。
1、Bootstrap模块dropdown实现下拉框响应_ 这篇文章主要为大家具体介绍了Bootstrap下拉框模块dropdown实现下拉框响应，感爱好的伴侣可以参考一下 本文介绍了Bootstrap下拉框模块dropdown的用法方法，供大家参考，具体内容如下 一、源码分析： Dropdowns.scss：下拉框模块 Javascripts/bootstrap/dropdown.js：实现下拉框响应 二、功能及原理： 下拉选项卡，默认不能实现显示选中项的功能 原理： 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu肯定定位实现，还需要加一个单击点作为设置data
2、-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-
3、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.st
4、opPropagation() ) .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、了同一份代码。 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”：是为了实现单击，绽开指定的下拉列表，默认
6、是绽开与按钮后面兄弟节点： ul class=nav nav-pills navbar-nav liaIndex/a/li lia产吕/a/li li a data-toggle=dropdown href=#name 有用工具/a/li /ul div id=name ul class=dropdown-menu lia关于我们/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 lia3343/a/li lia555/a/li /ul /div 以上就是本文的全部内容，盼望对大家学习javascript程序设计有所关心。 .