bootstrap源码分析之tab(选项卡)
2016-06-05 21:04
627 查看
实现tab选项卡的应用,此插件相对比较简单
2、然后给被单击元素进行高亮
3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框
5、如果定义了动画,先执行动画,然后回调
1.1、Hiden.bs.tab:隐藏上一个元素
1.2、Show.bs.tab:显示当前元素
1.3、Hideen.bs.tab:隐藏上一个元素完成
1.4、Shown.bs.tab:显示当前元素完成
1.5、Hiden/show事件源码:
2.1、对导航元素增加aria-expanded属性,标记此元素是否处于展开状态
2.2、利用reflow机制,用获取offsetWidth属性来实现部分重绘
源码文件:
tab.js实现原理
1、单击一个元素时,首先将原来高亮的元素取消2、然后给被单击元素进行高亮
3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框
5、如果定义了动画,先执行动画,然后回调
源码分析:
1、Show方法,是在单击一个元素的时候触发,会触发如下四个事件1.1、Hiden.bs.tab:隐藏上一个元素
1.2、Show.bs.tab:显示当前元素
1.3、Hideen.bs.tab:隐藏上一个元素完成
1.4、Shown.bs.tab:显示当前元素完成
1.5、Hiden/show事件源码:
var $previous = $ul.find('.active:last a') var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $this[0] }) var showEvent = $.Event('show.bs.tab', { relatedTarget: $previous[0] })2、Active:激活当前对象
2.1、对导航元素增加aria-expanded属性,标记此元素是否处于展开状态
2.2、利用reflow机制,用获取offsetWidth属性来实现部分重绘
相关文章推荐
- bootstrap源码分析之scrollspy(滚动侦听)
- 使用MiniProfiler跟踪MVC + EF + Bootstrap 2 权限管理系统的性能消耗
- hangfire+bootstrap ace 模板实现后台任务管理平台
- Bootstrap的配置
- bootstrap 模态框生成标签页
- JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- java框架整合Springmvc+mybatis+shiro+bootstrap
- bootstrap结合easyui-datagrid列宽不自动适应问题
- jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】
- bootstrap源码里的function加上了+号
- java框架整合Springmvc+mybatis+shiro+bootstrap
- JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Bootstrap框架基础
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
- 2016 系统设计第一期 (档案一)MVC bootstrap model弹出子页面
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- springmvc+bootstrap风格的树形地区
- bootstrap modal 弹出效果
- html-demo: JQuery&Bootstrap
- Bootstrap按钮样式、状态