全面解析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 获取表单file全路径
Dec 31 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Jquery获取radio选中的值
May 05 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
js实现随机抽奖
Mar 19 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python发送邮件实现基础解析
2020/08/14 Python
女娲补天教学反思
2014/02/05 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
小学生学习感言
2014/03/10 职场文书
大学新闻系求职信
2014/06/03 职场文书
军训拉歌口号
2014/06/13 职场文书
欢迎横幅标语
2014/06/17 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
暑期工社会实践报告
2015/07/13 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server