全面解析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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
详解React之key的使用和实践
Sep 29 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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代码审核的详细介绍
2013/06/13 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python对url格式解析的方法
2015/05/13 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
详解python logging日志传输
2020/07/01 Python
详解python metaclass(元类)
2020/08/13 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
后备干部培训方案
2014/05/22 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
二手房购房协议书范本
2014/10/05 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
2015年党小组工作总结
2015/05/26 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Python实现简单得递归下降Parser
2022/05/02 Python