当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/08 来源:互联网 浏览: 关键词:jquery 选项卡 tab 
移动友好且兼容IE8的jQuery Tabs选项卡插件 移动友好且兼容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文件。

<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.tabslet.min.js"></script>

HTML结构

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

<divclass='tabs'>
    <ul>
        <li><ahref="#tab-1">Tab 1</a></li>
        <li><ahref="#tab-2">Tab 2</a></li>
        <li><ahref="#tab-3">Tab 3</a></li>
    </ul>
    <divid='tab-1'></div>
    <divid='tab-2'></div>
    <divid='tab-3'></div>
</div>         

初始化插件

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

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

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

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

配置参数

$('.tabs').tabslet({
    mouseevent:  'click',
    attribute:   'href',
    animation:   false,
    autorotate:  false,
    pauseonhover:true,
    delay:        2000,
    active:       1,
    container:   false
    controls:     {
        prev:'.prev',
        next:'.next'
    }
});   

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

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top