Tabslet – jQuery Tab选项卡插件
简介
Tabslet 是一款 jQuery Tab/选项卡插件，它具有以下功能、特点：
- 支持设置切换事件（click/hover）
- 支持动画效果
- 支持自动切换及设置切换间隔
- 支持设置默认显示序号
- 支持自定义事件（回调事件）
- 支持 HTML data 属性
兼容
浏览器兼容：兼容 IE6、IE7 及以上版本和其他主流浏览器。
jQuery 兼容：兼容 1.7 及以上版本。
使用方法
1、引入文件
<script src="jquery.min.js"></script> <script src="jquery.tabslet.min.js"></script>
2、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">Tab 1</div> <div id="tab-2">Tab 2</div> <div id="tab-3">Tab 3</div> </div>
3、JavaScript
$(function(){
$('.tabs').tabslet();
});
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| mouseevent | 字符串 | click | 触发事件 |
| attribute | 字符串 | href | 关联属性 |
| animation | 布尔值 | false | 动画效果 |
| autorotate | 布尔值 | false | 自动切换 |
| pauseonhover | 布尔值 | true | 鼠标悬停停止自动切换 |
| easing | 字符串 | easeInQuart | 滚动动画方式 |
| delay | 整数 | 2000 | 自动切换时间间隔 |
| active | 整数 | 1 | 默认显示第几个 |
| controls | 对象 | 为上一个/下一个绑定对象 |
