jQuery-Tools--tab - 爱码网

先给个官方例子。可以先弄出来看看效果

html

View Code

<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/

-->
<head>
<title>jQuery Tools standalone demo</title>

<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">

<link rel="stylesheet" type="text/css"
href="./tabs-no-images.css"/>
</head>
<body><!-- tabs -->
<ul >
<li><a >Tab 1</a></li>
<li><a >Second tab</a></li>
<li><a >A ultra long third tab</a></li>
</ul>
<!-- panes -->
<div >

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
viverra, leo sit amet auctor fermentum, risus lorem posuere
tortor, in accumsan purus magna imperdiet sem.
</p>

<p>
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
nibh metus, faucibus quis, semper ut, dignissim id, diam.
</p>
</div>

<div>
<p>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
molestie sed, tristique sit amet, blandit eu, turpis. Mauris
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
molestie dui quam vitae dui.
</p>
<p>
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
tortor. Maecenas id augue. Vivamus interdum nulla ac
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
eget dui volutpat molestie.
</p>
</div>

<div>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
nisl. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>

<p>
In sed dolor. Etiam eget quam ac nibh pharetra
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
nisi. Vivamus at enim. Integer semper imperdiet
massa. Vestibulum nulla massa, pretium quis, porta id,
vestibulum vitae, velit.
</p>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
　　$(".cs-tabs:first").tabs(".cs-panes:first > div");
 });
</script>
</body>
</html>

css

View Code

/* root element for tabs */
ul.cs-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}

/* single tab */
ul.cs-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}

/* link inside the tab. uses a background image */
ul.cs-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}

ul.cs-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}

/* selected tab */
ul.cs-tabs a.on {
background-color:#ddd;
border-bottom:1px solid #ddd;
color:#000;
cursor:default;
}


/* tab pane */
.cs-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
background-color:#ddd;
}

-----------------------------------------------------------------

该功能是通过jqueryObject.tabs()方法来实现的

$(".cs-tabs:first").tabs(".cs-panes:first > div");

官方是用的class，我对div都加了id。

$("#tabui").tabs("#tabpans >div");

$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});

这两个同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果

　　是不是很强大呢。

　　下面就以上配置参数说明描述如下：

属性名称	默认值	描述
current	'current'	CSS类名当前活跃的选项卡。
effect	'default'	效果被用来当点击一个选项卡。这可以戏剧性地改变这种行为的选项卡。这是可用的内置的效果: `:一个简单的显示/隐藏效果。这个标签的默认行为。` `:这个选项卡内容逐渐显示从零到完全不透明。` `。` `。` `。` 。
event	'click'	。
fadeInSpeed	200	唯一可用一起使用时与“fade”效应。该属性定义了加快( 毫秒)打开的面板中显示其内容。
fadeOutSpeed	`0`	。
history	false	是包括在你的页面。
initialIndex	`0`	事件在页面加载导致所有选项卡最初将关闭。
rotate	false	。
tabs	'a'	一个选择器进行元素,用作标签在根元素。如果没有发现然后的直接子根元素用于为选项卡。

事件

事件	触发时间
onBeforeClick	点击一个标签之前。第二个参数是指数被单击的选项卡。
onClick	点击后一个选项卡。第二个参数是指数点击的选项。

API

下面的示例说明如何访问API:

var api = $("#tabui").data("tabs");

// advance to the next tab
api.next();

以下列出的是所有API方法:

方法	返回值	描述/例子
click(index)	`API`	。
destroy()	`API`	完全删除现有的标签实例。
getConf()	Object	返回配置对象标签的实例。这个对象可以被修改, 变化是动态地反映在行为上的标签。
getCurrentPane()	`jQuery`	返回当前面板作为jQuery对象。
getCurrentTab()	`jQuery`	返回当前标签作为一个jQuery对象。
getIndex()	integer	返回当前选项卡指数。
getPanes()	`jQuery`	返回jQuery对象窗格作为。
getTabs()	`jQuery`	返回标签作为一个jQuery对象。
next()	`API`	前进到下一个选项卡。
prev()	`API`	进步到以前的选项卡。

　　tab：传送门

　　tab(幻灯片)：传送门

　　tooltip：传送门

　　overlay：传送门

　　dateinput：传送门