浅谈bootstrap源码分析之tab(选项卡)
实现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(选项卡)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
使用Bootstrap Tabs选项卡Ajax加载数据实现
本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &
-
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g
-
Bootstrap选项卡与Masonry插件的完美结合
Bootstrap 是最流行的前端框架之一.在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页. 如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的 选项卡组件 一起使用,你将会发现许多讨厌的行为. 我遇到过,而本文主要关注这个问题是什么和你要如何来解决这个问题. Bootstrap的Tabs Bootstrap的选项卡组件包括两个关键点:选项卡导航元素和一些内容面板.在页面加载时,第一个面板应用了 .active 类.使这个面板默认是可见的.
-
bootstrap选项卡使用方法解析
选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示. <!-- 选项卡组件(菜单项nav-tabs)--> <ul id="myTab" class="nav nav-tabs" role=
-
bootstrap选项卡扩展功能详解
用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写. 花了几个小时把tabs控件扩展了下.下面是代码 页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &l
-
BootStrap tab选项卡使用小结
选项卡 选项卡的基本使用方式为: <ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target=&q
-
bootstrap导航、选项卡实现代码
本文实例为大家分享了bootstrap导航和选项卡的具体代码,供大家参考,具体内容如下 导航: <!-- nav 导航的基础样式 --> <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#">雪碧图</a></li> &
-
很棒的Bootstrap选项卡切换效果
今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了. 先看一下效果图吧,显目一些! 实现代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scal
-
全面解析Bootstrap中tab(选项卡)的使用方法
本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hidee
-
Bootstrap选项卡动态切换效果
最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给
随机推荐
- Vue 2.0学习笔记之Vue中的computed属性
- 合并百度影音的离线数据( with python 2.3)
- vbs 获取当前目录的实现代码
- Ruby中的gem包管理的使用及gem源搭建教程
- 如何利用JQuery实现从底部回到顶部的功能
- Windows 系统组策略应用全攻略(上)第1/2页
- ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
- 由Python运算π的值深入Python中科学计算的实现
- jsp登录会话的简单实现
- MySQL优化之使用连接(join)代替子查询
- Bootstrap 填充Json数据的实例代码
- 用js+xml自动生成表格的东西
- SQLServer批量更新两个关联表数据的方法
- JS小游戏之象棋暗棋源码详解
- 128进制加密数据示例分享
- PHP5对象体系
- 浅析char 指针变量char *=p 这个语句的输出问题
- python 单线程和异步协程工作方式解析
- 详解Mybatis(五)Mapper接口
- django实现类似触发器的功能