Bootstrap源码解读下拉菜单(4)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap下拉菜单

基本用法

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
使用方法如下:
1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素:<div class="dropdown"></div>
2. 使用一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致:data-toggle=”dropdown”
3. 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”:<ul class="dropdown-menu">

完整如下:

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

实现原理

Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为“dropdown-menu”默认样式设置了“display:none”。实现源码如下:

.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 font-size: 14px;
 text-align: left;
 list-style: none;
 background-color: #fff;
 -webkit-background-clip: padding-box;
   background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, .15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

当点击父菜单项时,下拉菜单将会被显示出来,再次点击时,下拉菜单将继续隐藏。实现原理非常简单,通过js,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。实现源码如下:

.open > .dropdown-menu {
 display: block;
}

下拉分隔线

下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
例如: <li role="presentation" class="divider"></li>
实现源码如下:

.dropdown-menu .divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}

菜单标题

组与组之间可以添加一个<li>,并添加类名“dropdown-header”可以给每个组添加一个头部(标题)。
例如:<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
实现源码:

.dropdown-header {
 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #999;
}

对齐方式

下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,
例如:<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
实现源码:

.dropdown-menu.pull-right {
 right: 0;
 left: auto;
}
.dropdown-menu-right {
 right: 0;
 left: auto;
}

不过这样的话,下拉列表会跑到页面的最右边去,我们显然不希望这样,所以一定要为.dropdown添加float:left的css样式:

.dropdown{
 float: left;
}

另外,还有个类名“dropdown-menu-left”,其实就是下拉菜单与父容器左边对齐的默认效果,

实现源码:

.dropdown-menu-left {
 right: auto;
 left: 0;
}

菜单项状态

下拉菜单项的默认的状态有悬浮状态(:hover)和焦点状态(:focus),实现源码如下:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
 color: #262626;
 text-decoration: none;
 background-color: #f5f5f5;
}

另外还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项<li>上添加对应的类名“active”或“disabled”。

实现源码如下:

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
 color: #fff;
 text-decoration: none;
 background-color: #428bca;
 outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue中英文切换实例代码
Jan 21 Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
师范大学应届生求职信
2013/11/21 职场文书
公司出纳岗位职责
2013/12/07 职场文书
村党支部换届选举方案
2014/05/02 职场文书
Java基础——Map集合
2022/04/01 Java/Android