Bootstrap模块dropdown实现下拉框响应

网友投稿 305 2023-07-16


Bootstrap模块dropdown实现下拉框响应

本文介绍了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、代码如下

复制代码 代码如下:

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”:是为了实现单击,展开指定的下拉列表,默认是展开与按钮后面兄弟节点:

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

11、应用示例

number

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

Bootstrap实战教程

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java实现文件上传的方法
下一篇:Eclipse创建java程序可执行jar包教程
相关文章

 发表评论

暂时没有评论,来抢沙发吧~