移动友好且兼容IE8的jQuery Tabs选项卡插件

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