全面解析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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
关于js类的定义
Jun 28 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
详解Vue slot插槽
Nov 20 Vue.js
全面解析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设计模式 Adapter(适配器模式)
2011/06/26 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python中return如何写
2020/06/18 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
我心目中的好老师活动方案
2014/08/19 职场文书
情人节活动总结范文
2015/02/05 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
python如何进行基准测试
2021/04/26 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL