全面解析Bootstrap中nav、collapse的使用方法


Posted in Javascript onMay 22, 2016

一、导航分析(nav)
源码文件:
_navs.scss:导航模块
Mixins/_nav-divider.scss:分隔线
Mixins/_nav-vertical-align.scss:垂直对齐

1、只是用css进行了样式修饰,对Js没有任何依赖
2、导航模块可以包含下拉模块
3、实现了水平、垂直、水平平均分配(table-cell实现,4.0移除)、tabs、胶囊等样式
4、Nav-divider:有一个像素的高度实现分隔线
5、Nav-stacked:垂直对齐实现
6、提供了tab-content类,用于包裹tab,然后tab-pane做为内容区域,用于tab页的扩展
7、Nav-tabs下的dropdown做了位置向上收缩一个像素的处理,因为nav-tabs会一条底线,不向上收缩一个像素,会有空白间隙出现

// Specific dropdowns
.nav-tabs .dropdown-menu {
 // make dropdown border overlap tab border
 margin-top: -1px;
 // Remove the top rounded corners here since there is a hard edge above the menu
 @include border-top-radius(0);
}

二、折叠效果(collapse)
源码文件:
Mixins/_component-animations.scss:collapse实现,实现折叠效果
Javascripts/bootstrap/collapse.js:折叠效果实现

1、$this.data()收集所有data-*数据
2、Parent属性:指定当前这个collapse被那个父级所控制,主要实现一控多的效果,以下是隐藏同一父级下所有子列表代码:

return $(this.options.parent)
   .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
   .each($.proxy(function (i, element) {
    var $element = $(element)
    this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
   }, this))
   .end()

3、Praent的实现,还需要整合.panel类,因为查找时认为所有子列表都是放在.panel类下的
4、Jquery的end()方法:结束当前筛选链,并将匹配元素集还原为之前的状态(链开始的位置)
$(“p”).find(‘.bak').find(‘span').end():还原到$(“p”)
5、scrollHeight:页面的高度(获取为要展开的实际高度/宽度),包含视窗不可见的部分,在collapse中用于识别要展开的最大值,在运动完成后都会对height/widht清空处理

var scrollSize = $.camelCase(['scroll', dimension].join('-'))
  this.$element
   .one('bsTransitionEnd', $.proxy(complete, this))
   .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])

6、对处理元素分为两类,一是要展开或隐藏的元素本身($element),二是触发展开或隐藏元素的按钮($trigger)
7、在hiden方法中,会重绘折叠区域的高度,然后获取实际区域的高度:
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
8、Hiden方法的触发默认情况下都是通过show方法中的判断触发的:

if (actives && actives.length) {
  Plugin.call(actives, 'hide')
   activesData || actives.data('bs.collapse', null)
  }

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

Javascript 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
全面解析bootstrap格子布局
May 22 #Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 #Javascript
基于Bootstrap实现图片轮播效果
May 22 #Javascript
基于Vue.js的表格分页组件
May 22 #Javascript
js正则表达式replace替换变量方法
May 21 #Javascript
深入解析JavaScript中的立即执行函数
May 21 #Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 #Javascript
You might like
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
国贸专业求职信
2014/06/28 职场文书
检讨书格式
2015/01/23 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python