Easy Responsive Tab是一款基于jQuery的Tab脚本,支持水平和垂直选项卡,在屏幕较小的设备上会用Accordion方式呈现内容,什么时候切换显示方式,通过css的media query控制。它还有一个比较有用的特点——支持选项卡的嵌套。

选项卡的自适应

直接查看Demo

默认情况下,Easy Responsive Tab如下图所示

responsive-tab-1

当屏幕小于某个尺寸,如ipad竖屏的宽度768px,会变成Accordion方式,如下图所示

responsive-tab-2

想改变切换的breakpoint值,可以打开它的样式表,找到这一段

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
...
}

把768改成需要的宽度。什么时候切换是根据选项卡所占宽度决定的,用css来控制很合理。

如果想在选项卡切换时执行某些操作,可以在初始化时利用activate参数实现。

$("#demoTab").easyResponsiveTabs({
    activate: function() {},  // Callback function, gets called if tab is switched
    tabidentify: 'tab_identifier_child', // The tab groups identifier *This should be a unique 
});

注意一下tabidentify参数,它不是必须的,但你不写它可能会出js错误,这是该插件目前的bug。

通过链接打开选项卡,例如直接访问http://yoursite.com/tabs.html#demoTab2,就会打开ID为#demoTab2的选项卡。

一个用户体验的问题

Accordion有个小问题,在小屏幕上先打开一个内容很长的卡片并滑动到内容结尾,再打开下一个卡片的话,下一个卡片的开头就会跑到很靠上的位置,超出屏幕,需要再滑动一下才能看到,用户体验不佳。

对于Easy Responsive Tab,你可以利用上面提到的activate参数,在切换选项卡后执行一个平滑跳转功能,用js帮助用户自动转到开头。

或者可以看一看另一款脚本。

PETELOVE Responsive-Tabs

查看Demo

试着打开选项卡,会发现该插件加入了平滑跳转功能,即使先打开的选项卡内容很长,也能在打开其它选项卡时直接到开头。

这款脚本也具备Easy Responsive Tab的css控制断点、嵌套选项卡等特性,但不能通过链接打开。

不用Accordion也能自适应的方法

若想维持选项卡的表现形式,可以参考Responsive Tabbed Navigation,小屏幕下让选项卡变成滑动菜单就好了,也是个值得借鉴的好方法。

responsive-tab-3

3条留言

  1. 我靠!!!楼主威武!!今天出现bug,我花了一天时间找,终于在这里找到原因了,就是因为未设置tabidentify,莫名其妙的一直报错,楼主怎么发现的,这么屌!!!!!!!

  2. 博主你好,刚才搜索WORDPRESS的相关的知识的时候搜索到了你的网站,看到你的网站有不少我需要的知识,真的非常感谢,也有点小后悔,之前为啥没早点找你的网站。以后希望博主能多分享一些WP知识和方法,也希望能与博主进行交流!

发表评论

电子邮件地址不会被公开。 必填项已用*标注