JQTools Tabs 选项卡/页签

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_34198797

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/dodoro/blog/153151

版权

为什么80%的码农都做不了架构师？>>>

JQTools Tabs 选项卡/页签

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

jQTools库下载

#####1.加载jquerytools库#####

<!-- lang: html -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

#####2.HTML格式如下#####

<!-- lang: 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的选择器

转载于:https://my.oschina.net/dodoro/blog/153151