AjaxJavaScript选项卡/页签/Tab的实现

选项卡,也称页签,英文用Tab(Module-Tabs)表示。Tab将不一致的始末重叠放在贰个布局块内,重叠的内容区里老是唯有中间叁个是可知的。

Tab可以在同样的上空里显示更加多的音信,它把一般的主旨分为一类,用户更加好理解。Tab的采取能够减少页面屏长,下跌消息的彰显密度,同时又不捐躯信息量。在那种倾向下,Tab这种相互成分变为了1个更为宽广的采用。

Web里Tab或然最早200五年是amazon.com的首页引进的,最近各大门户,电商及各色网址的首页都利用了Tab表现格局。当前Sina和新浪首页动用的Tab不下10处,在山头首要靠广告收益的场地下,首页的职位尺寸是寸土寸金啊。

 

Sina首页 2014.11.13

Ajax 1

 

Sohu首页 2014.11.13

Ajax 2

 

Tab特点

  1. 各类页签由标题区和内容区组成
  2. 内容区和标题1一对应
  3. 至少有两组页签以便能够切换
  4. 拥有页签唯有二种情景:选中和未选中,页面载入后暗许凸显第壹个
  5. 当选页签(当前页签)唯有3个并鼓起高亮呈现
  6. 鼠标点击或移上时切换

正式的Tab题目设计时放在顶部,也有成都百货上千身处左侧的

Ajax 3

坐落尾巴部分和右边的标题较为少见,那不符合人的开卷习惯。

 

Tab的内容载入方式

平常有两种情势

  1. html片段:
    那种办法最常见,tab内容在页面打开后就载入了,缺点是页面内容较多非第3帧内容也加载了造成页面打开较慢
  2. iframe请求:
    很多广告利用那种艺术,能够加速页面载入,缺点是切换后不可能及时展示
  3. Ajax请求: 通过异步请求拼接tab内容,优缺点同iframe

 

Tab实现

Tab的贯彻不难,只要HTML结构合理,JS给标题添加click或mouseover事件然后切换展现。那里运用HTML属性配置的措施,首要通过三-四个属性完毕。

  1. data-ui=”u-tab” :Tab的外围包裹成分
  2. data-ui=”tab-nav”:Tab的持有标题成分
  3. data-ui=”tab-content”:Tab的有着剧情元素
  4. data-ui=”tab-arror”:Tab切换时的动画片成分
  5. data-iframe=”http://xxx.jd.com/a.htm":内容为iframe的Tab元素

 

示例1:最简便易行的Tab只要添加前七个属性

Ajax 4

HTML结构如下

Ajax 5

 

示例2:切换时当题目横线带有动画效果 

Ajax 6

好像设计在京东首页楼层Tab也有应用。和示范一相比较只多了多少个data-ui=”tab-arror”。如下

Ajax 7

 

示例3:iframe tab

Ajax 8

那是京东首页左边的“各样充值”,在标题成分上添加一个data-iframe属性

Ajax 9

 

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/

 

相关文章