全面解析Bootstrap中tab(选项卡)的使用方法
2016-06-06 08:56
806 查看
本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下
源码文件:
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属性来实现部分重绘
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- expand 与 unexpand 命令实例教程
- 鼠标hover时tab自动切换
- angular 指令简述
- 让DOS下输入命令时也可以象Linux一样用Tab键进行命令自动填充
- 原生js和jQuery写的网页选项卡特效对比
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- javascript 定时自动切换的选项卡Tab
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- javascript+css 新闻显示tab 选项卡效果
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
- JavaScript实现简单的tab选项卡切换
- python全栈开发devops运维自动化方向初到高级在线课程分享