全面解析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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 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/06/15 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php数组使用规则分析
2015/02/27 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python post请求实现代码实例
2020/02/28 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
static关键字的用法
2013/10/07 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
会计核算科岗位职责
2014/03/19 职场文书
调解协议书
2014/04/16 职场文书
党性观念心得体会
2014/09/03 职场文书
元旦晚会开场白
2015/05/29 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书