浅谈bootstrap源码分析之tab(选项卡)


Posted in Javascript onJune 06, 2016

实现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属性来实现部分重绘

以上这篇浅谈bootstrap源码分析之tab(选项卡)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 #Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 #Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 #Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 #Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
You might like
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
微信小程序分页加载的实例代码
2017/07/11 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
简单的命令查看安装的python版本号
2020/08/28 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
寒假思想汇报
2014/01/10 职场文书
安全标兵事迹材料
2014/08/17 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
中学生学习保证书
2015/02/26 职场文书
教师自荐信范文
2015/03/06 职场文书
城南旧事观后感
2015/06/11 职场文书
新学期开学寄语2016
2015/12/04 职场文书
话题作文之学会尊重
2019/12/16 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python