Tabslet – jQuery Tab选项卡插件

分类:代码 日期:

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 对象 为上一个/下一个绑定对象
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈