浅谈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工具库代码
Mar 29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
webpack HappyPack实战详解
Oct 08 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 DataGrid 实现代码
2009/08/12 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
初识PHP中的Swoole
2016/04/05 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
js实现简易ATM功能
2020/10/27 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python实现员工管理系统
2018/01/11 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python实现TCP文件传输
2020/03/20 Python
Python PIL库图片灰化处理
2020/04/07 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
公司行政专员岗位职责
2014/08/24 职场文书
个人事迹材料范文
2014/12/29 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python