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：使用href或alt属性来选择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