JQTools Tabs 选项卡/页签

jquerytools 的一款 JQ工具插件 个人认为是简易之极。
下面是JQTools的Tabs的使用方法

jQTools库下载

1.加载jquerytools库

<script type="text/javascript" src="js/jquery.tools.min.js"></script>

2.HTML格式如下

<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
</div>

3.js调用配置如下

<!-- lang: js -->
$(document).ready(function(e) {
    $(function() {
        $("ul.tabs").tabs("div.panes > div",{config object});
    });
});

4.相关的configAPI的参数

<!-- lang: js -->
current:'current',
//为当前tab的增加的class名称，默认为current;

effect:"fade",
//每个tab的panel内容显示方式为从整体逐渐显示

effect:"slide",
//点击tab的panel出现在当前tab的panel下面，并覆盖掉当前panel

effect:"horizontal",
//当前tab的panel逐渐从右向左收缩并最终消失，比较适合水平导航

fadeInSpeed:1000,
//设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒

event:"mouseover",
//指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有“mouseover”,"dbclick"

history:true,
//当用户点击浏览器的前进后后退按钮后，如果此处设置为true,那么就会回退到上次点击的tab

initialIndex:1,
//设置默认显示的tab

tabs:"a",
//设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器