发布于 2017-02-23 01:38:21 | 308 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要为大家详细介绍了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、代码如下

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

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



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务