一、导航分析(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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。