Tabslet是一款轻量级,使用简单,移动友好且兼容IE8的jQuery Tabs选项卡插件。它的特点有:

  • 灵活的HTML结构。
  • 可以自定义事件。
  • 可以通过data属性来配置参数。
  • 可以设置前后控制按钮。
  • 可以自动进行无限轮播。
  • 支持深链接。
  • 支持鼠标滑过时切换Tab。
  • 支持Tab切换时的动画特效。
  • 支持href或alt属性链接Tab。
  • 提供各种控制方法。
  • 兼容IE7+的IE浏览器,以及Chrome,Firefox和Safari。

使用方法

使用该Tabs选项卡插件需要在页面中引入jquery文件和jquery.tabslet.min.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabslet.min.js"></script>
                
HTML结构

该选项卡的基本HTML结构如下:

<div class='tabs'>
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id='tab-1'></div>
    <div id='tab-2'></div>
    <div id='tab-3'></div>
</div>               
                
初始化插件

在页面DOM元素加载完毕之后,可以通过tabslet()方法来初始化该Tabs选项卡插件。

$(document).ready(function() {
    $('.tabs').tabslet();
});                 
                

也可以使用data属性来进行初始化。

<div class='tabs' data-toggle="tabslet">
    ...
</div>                  
                

配置参数

该Tabs选项卡默认的配置参数如下:

$('.tabs').tabslet({
    mouseevent:   'click',
    attribute:    'href',
    animation:    false,
    autorotate:   false,
    pauseonhover: true,
    delay:        2000,
    active:       1,
    container:    false
    controls:     {
        prev: '.prev',
        next: '.next'
    }
});                  
                
  • mouseevent:选择在鼠标点击或鼠标滑过时切换选项卡。可用值: click, hover。
  • attribute:使用hrefalt属性来选择tabs。可用值:href, alt。
  • animation:是否在选项卡切换时带动画效果。
  • autorotate:选项卡是否自动切换。
  • deeplinking:是否允许深链接。
  • pauseonhover:是否在鼠标滑过时暂停选项卡的自动切换。
  • delay:设置自动切换的延迟时间。单位毫秒。
  • active:设置初始化时激活的Tab。
  • container:覆盖默认的HTML结构并设置Tabs的父容器。
  • controls:设置前后导航按钮元素。

上面的配置参数,处理controls之外,其它的都可以通过data属性来进行设置。

方法

Tabslet选项卡可用的方法有:

  • destroy:销毁Tabslet对象实例。
    $('.tabs').trigger('destroy');
    
  • next:切换到下一个选项卡。
    $('.tabs').trigger('next');
    
  • prev:切换到前一个选项卡。
    $('.tabs').trigger('prev');
    
  • show:激活指定的选项卡。
    $('.tabs').trigger('show', '#tab-1');
    

Tabslet选项卡插件的github主页地址为:https://github.com/vdw/Tabslet