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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!