专栏首页cnblogsBootstrap源码分析之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、代码如下

 <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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 对vue源码的初步认识和理解

          根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下...

    sam dragon
  • Css3新特性应用之形状

    一、自适应椭圆 * border-radius特性:     * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽...

    sam dragon
  • C#之委托如此简单

    近期和几位做嵌入式开发的朋友闲聊过程中,一位朋友抱怨到:这C#太难用了,我想在N个窗体(或者是N个用户组件之间)传递值都搞不定,非得要定义一个全局变量...

    sam dragon
  • 【Python可视化5】Seaborn之线性回归

    Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matplotlib的基础上...

    1480
  • data()方法使用

    data方法也是模型类的连贯操作方法之一,用于设置当前要操作的数据对象的值,可能大家不太习惯用这个方法,今天来讲解下如何用好data方法。

    公众号php_pachong
  • 为什么使用dojo?dojo与jquery有什么不同?dojo适合什么开发场景?

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    eguid
  • 使用 Cesium 动态加载 GeoJSON 数据

    前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加...

    魏守峰
  • awk-grep-sed简单使用总结(正则表达式的应用)

    正则表达式: 匹配一组字符: #[ns]a.\.xls  //[]用于限定字符;“.”用于匹配任意字符; \.用于转义"." 匹配到s/na*.xls  [n...

    BG彪
  • 使用jMeter对基于SAP ID service进行Authentication的Restful API进行并发测试

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 如何免费试用SAP的Fiori应用

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券