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>

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

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

(0)

相关推荐

  • 基于Bootstrap里面的Button dropdown打造自定义select

    最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstrap工具包,有很多把它定义为Web前端CSS框架.说实话,之前只知道它是Twitter公司出品,界面做的比较好看.但是没有在实际项目中使用,之前公司新来的同事会这个,准备在公司官网项目中使用,因为我不会,而已Leader对这个也不感冒,所以就没有用.而已她说配合Less一起做项目,可以提高开发效率,而

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

  • Bootstrap CSS组件之下拉菜单(dropdown)

    Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:

  • JQuery组件基于Bootstrap的DropDownList(完整版)

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角.使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美.如下图所示: 本文的内容就是如何恢复右侧的圆角 先看看原本的下拉菜单的HTML结构: <ul class="dropdown-menu dropdown-menu-right" role="me

  • 详解bootstrap用dropdown-menu实现上下文菜单

    详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&

  • bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来. 1.基本代码和页面展示 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效.对于菜单部分,设置 class="dropdown-menu"才能 自动隐藏并添加固定样式.设置 class="caret"表示箭头,可上可下. <div class=&qu

  • Bootstrap下拉菜单Dropdowns的实现代码

    本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap-下拉菜单标题</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel=&qu

  • Bootstrap 下拉菜单.dropdown的具体使用方法

    本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown <下拉菜单触发器button+下拉菜单ul> .dropdown 包裹层 .dropdown-toggle 下拉菜单触发器 data-toggle="dropdown  自定义属性 可以与js关联起来 .dropdown-menu  下拉菜单 具体实例: <div class=&

  • 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单

  • JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

随机推荐