浅谈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 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
JavaScript实现星级评分
Jan 12 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
PHP array 的加法操作代码
2010/07/24 PHP
解析PHP提交后跳转
2013/06/23 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python实现微信防撤回神器
2019/04/29 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django框架视图函数设计示例
2019/07/29 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python gevent协程切换实现详解
2020/09/14 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
效能监察建议书
2014/05/19 职场文书
投标承诺书怎么写
2014/05/24 职场文书
导游词开场白
2015/01/31 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python