JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示。Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的。
Tab可以在相同的空间里展示更多的信息,它把相似的主题分为一类,用户更好理解。Tab的应用可以缩短页面屏长,降低信息的显示密度,同时又不牺牲信息量。在这种趋势下,Tab这种交互元素成为了一个越来越普遍的应用。
Web里Tab可能最早2005年是amazon.com的首页引入的,如今各大门户,电商及各色网站的首页都采用了Tab表现形式。当前Sina和网易首页使用的Tab不下10处,在门户主要靠广告收入的情景下,首页的位置尺寸是寸土寸金啊。
Sina首页 2014.11.13
Sohu首页 2014.11.13
Tab特点
- 每个页签由标题区和内容区组成
- 内容区和标题一一对应
- 至少有两组页签以便可以切换
- 所有页签只有两种状态:选中和未选中,页面载入后默认显示第一个
- 选中页签(当前页签)只有一个并突出高亮显示
- 鼠标点击或移上时切换
标准的Tab标题设计时放在顶部,也有很多放在左侧的
放在底部和右侧的标题较为少见,这不符合人的阅读习惯。
Tab的内容载入方式
通常有三种方式
- html片段: 这种方式最常见,tab内容在页面打开后就载入了,缺点是页面内容较多非第一帧内容也加载了导致页面打开较慢
- iframe请求: 很多广告采用这种方式,可以加快页面载入,缺点是切换后不能立即展示
- Ajax请求: 通过异步请求拼接tab内容,优缺点同iframe
Tab实现
Tab的实现简单,只要HTML结构合理,JS给标题添加click或mouseover事件然后切换显示。这里采用HTML属性配置的方式,主要通过3-5个属性实现。
- data-ui="u-tab" :Tab的外层包裹元素
- data-ui="tab-nav":Tab的所有标题元素
- data-ui="tab-content":Tab的所有内容元素
- data-ui="tab-arror":Tab切换时的动画元素
- data-iframe="http://xxx.jd.com/a.htm":内容为iframe的Tab元素
示例1:最简单的Tab只要添加前三个属性
HTML结构如下
示例2:切换时当标题横线带有动画效果
类似设计在京东首页楼层Tab也有应用。和示例一对比只多了一个data-ui="tab-arror"。如下
示例3:iframe tab
这是京东首页右侧的“各类充值”,在标题元素上添加一个data-iframe属性
Tab API
使用jQuery插件方式实现,配置参数如下
/*** 页签组件 * $(x).tab({* auto: // @boolean 是否自动切换,默认false* evtType: // @string 默认mouseover,鼠标移动到上面时切换,可选click* currCls: // @string 默认curr* nav: // @string tab的css属性选择器的key,默认为 tab-nav* content: // @string tab content的css属性选择器的key,默认为 tab-content* arrow: // @string tab-arrow 切换时动态移动效果* stay: // @number 自动切换的时间间隔* defIndex: // @number 默认显示的tab,* isFade: // @boolean 默认false* })*/
当通过HTML属性方式配置不能满足需求时,可直接调用。此外添加了“change”事件,每当tab切换时会触发。
$elem.tab({evtType: evtType,currCls: currCls,auto: auto,stay: stay,nav: nav,content: con,defIndex: cur
})// Tab change event
$elem.bind('change', function(ev, idx, $nav, $content) {// todo
})
有了事件机制,可以轻松实现Ajax Tab,当切换时添加change事件,事件handler内部去执行Ajax请求,更新tab content。
相关:
http://blog.xiqiao.info/2009/07/03/409
http://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/
JavaScript选项卡/页签/Tab的实现相关推荐
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- Vue-element tab选项卡二级页面返回缓存选中页签
需求 我的项目里,有个页面是两个选项卡,两个页签里稍有不同,用的组件,然后各个选项卡都有二级详情页,需求就是从二级详情页返回的时候,要返回上次选中的选项卡页签. 思路 在elementUI中,有一个默 ...
- axure没有团队页签_Axure教程:多页签可滚动的选项卡制作
这就是我下面要分享给大家的内容啦: 首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程. 一.最常见的传统选项卡 最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签 ...
- axure没有团队页签_Axure教程:多页签可滚动的选项卡制作(附源文件下载)
选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生.但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系 ...
- Ext.tab.Panel页签
Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel,一般情况会有多个tab同时存在,但是同一时刻只有一个处于激活状态. Ext.tab.Panel主要配置项目表: 配 ...
- AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏)
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
- 浏览器tab页签上的title图标favicon.icon
文章目录 浏览器tab页签上的title图标favicon.icon 什么是favicon? 如何查看favicon 在线生成favicon 浏览器tab页签上的title图标如何设置 浏览器tab页 ...
- 淘宝网宝贝描述页面的TAB选项卡
代码简介:一个淘宝网的TAB选项卡,很圆滑,经典之作 代码内容: <html> <head> <title>淘宝网宝贝描述页面的TAB选项卡_网页代码站(www.w ...
- 如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
最新文章
- JavaScript的语言标准
- Windows Vista即将发布SP1
- java round指令_Java PApplet.round方法代码示例
- 检测session用户信息跳转首页界面
- 控制 Redis stream 的消息数量
- redis持久化到mysql的方案_redis进阶: 数据持久化
- (BFS)Meteor Shower (poj3669)
- 树莓派64位系统_玩转树莓派之安装系统
- 漂亮的不像实力派--锤子新品“坚果手机”发布会
- PID调控公式和相关方法
- 18种证明公安部门不再开具应该找谁开
- 文件夹或文件的隐藏和加密20201024
- win10+ubuntu双系统下,完美卸载ubuntu
- mac开发者身份_如何以开发者的身份环游世界
- PLC_SCL数据查找算法
- 事务的4个特性——ACID(原子性、一致性、隔离性和持久性)、更新丢失问题...
- 基于Xilinx LUT6设计高效紧凑的2:1 Bus Mux
- mysql修改工资字段_基于Linux的MySQL操作实例(修改表结构,MySQL索引,MySQL数据引擎)...
- 根据先序遍历和中序遍历生成后序遍历
- 信号处理相关EI 会议期刊