jQuery Tools tab使用介紹_jquery

先給個官方例子。可以先弄出來看看效果
html

複製代碼代碼如下:

href="./tabs-no-images.css"/>
頭>

• 選項卡1


• 第二個選項卡


• 超長的第三個標籤

;

Lorem ipsum dolor sat amet，consectetur adipiscing elit 。 Duis
viverra，leo 坐 amet auctor發酵，risus lorem posuere
tortor，在accumsan purus magna imperdiet sem。

暫停。 Pellentesque facilisis aliquam enim。 Maecenas
facilisismolestielectus。 Sed ornare ultricies totortor。 Vivamus
nibh metus，faucibus quis，semper ut，dignissim id，diam。

;

Mauris ultricies。 Nam feugiat egestas nulla。 Donec augue dui，
molestie sed，tristique sat amet，blandit eu，turpis。 Mauris
hendrerit、nisi et sodales tempor、orci Tellus laoreet elit、sed
molestie dui quam vitae dui。

Pellentesque nisl。 Ut 脂肪車輛崛起。 Nam eget
tortor。梅塞納斯·id·奧格。 Vivamus interdum nulla ac
多洛爾。富斯梅圖斯。歐盟暫緩執行。 Maecenas quis lacus
eget dui volutpatmolestie。

;

奧迪奧的梅塞納斯。 Nunc laoreet lectus velante。 Nullam
imperdiet。 sed justo dolor、mattis eu、euismod sed、tempus a、
nisl。 Cum sociis natoque penatibus et magnis dis parurient
montes, nascetur rodiculus mus。

陷入悲傷。 Etiam eget quam ac nibh pharetra
adipiscing。 Nullam vitae ligula。 Sed sat amet leo sat amet arcu
mollis ultrices。 Vivamus rhoncus sapien nec lorem。在馬蒂斯
nisi。維瓦姆斯在埃尼姆。整數 semper imperdiet
massa。 Vestibulum nulla Massa、pretium quis、porta id、
vestibum vitae、velit。

$(function() {
// : 如果頁面上只有一個選項卡，第一個選擇器是可選的
$(".cs-tabs:first").tabs(".cs-panes :第一> div");
});
腳本>
身體>

css

複製程式碼程式碼如下：

/* 選項卡的根元素*/
ul.cs-tabs {
margin:0 !important;
填滿：0;
高度：30px；
邊框底部：1px實心#666；
}
/* 單選項卡*/
ul.cs-tabs li {
float:left;
填充：0；
保證金>float:left;
填充：0；
保證金>float:left;
填充：0；
保證金>float:left;
填充：0；
保證金>float:left;
填充：0;
保證金> ：0;
列表樣式類型：無；
}
/* 選項卡內的連結。使用背景圖片*/
ul.cs-tabs a {
float:left;
字體大小：13px;
顯示：塊；
內邊距：5px 30px；
文本裝飾：無；
邊框：1px實心#666；
邊框底部：0px；
高度：18px；
背景顏色：#effefef;
顏色：#777；
右邊距：2px；
位置：親屬；
上方：1px;
大綱：0;
-moz-border-radius:4px 4px 0 0;
}
ul. cs-tabs a:hover {
背景顏色:#F7F7F7;
顏色：#333;
}
/* 選定的選項卡*/
ul.cs-tabs a. on {
background-color:#ddd;
邊框底部：1px實心#ddd;
顏色：#000;
遊標：預設；
}
/* 選項卡窗格*/
.cs-panes div {

display:none; 邊框：1px實心#666; 邊框寬度：0 1px 1px 1px; 最小高度：150px 內邊距：15px 20px； 背景顏色：#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'	效果被用来当点击一个选项卡。 这可以 戏剧性地改变这种行为的选项卡。 这是 可用的内置的效果: 'default' :一个简单的显示/隐藏效果。 这个 标签的默认行为。 'fade' :这个选项卡内容逐渐显示 从零到完全不透明。 'ajax' :从服务器加载选项卡内容 使用AJAX。 视图 示例 。 'slide' :垂直滑动效果,合适的 对于 手风琴导航 。 'horizontal' :水平的幻灯片效果, 合适的 对于 水平 手风琴导航 。 你也可以 让自己的效果 。
event	'click'	指定事件一个选项卡时打开。 默认情况下,这个 发生在当用户单击选项卡。 另一个有效值 是 “mouseover” 和 ‘dblclick' 。
fadeInSpeed	200	自从1.0.1。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开的面板中显示其内容。
fadeOutSpeed	<span id="OUTFOX_JTR_TRANS_NODE-170" class="OUTFOX_JTR_TRANS_NODE">0</span>	自从1.1.0版。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开窗格中隐藏了它的内容。 一个积极的 这里的价值将导致“crossfade”作用 演示了 这里 。
history	false	自从1.2.0 。 浏览器的支持 “后退按钮”,这样当用户点击后退或前进 按钮打开相应的选项卡。 要求 这个 历史工具 是 包括在你的页面。
initialIndex	<span id="OUTFOX_JTR_TRANS_NODE-182" class="OUTFOX_JTR_TRANS_NODE">0</span>	指定选项,最初打开当页面 加载。 这将自动触发一个 点击 事件 为选项卡指定在本 财产。 指定 null 或者一个负数这里 不会触发 点击 事件在页面加载 导致所有选项卡最初将关闭。
rotate	false	自从1.1.0版。 当最后一个选项卡是开放和 这个 next() 调用API调用,然后选项卡将 从头开始,当第一个选项卡是开放和 这个 上一页() 调用调用选项卡将提前 最后一个选项卡。 这是证明 在 这里 。
tabs	'a'	一个选择器进行元素,用作标签在根 元素。 如果没有发现然后的直接子根 元素用于为选项卡。

事件

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

腳本API
下面的範例說明如何存取API:

複製程式碼 程式碼如下:

程式碼如下:

>var api = $("#tabui").data("tabs");
// advance to the next tab
api.next();

方法	返回值	描述/例子
click(index)	<span id="OUTFOX_JTR_TRANS_NODE-236" class="OUTFOX_JTR_TRANS_NODE">API</span>	激活选项卡中指定的参数。 参数可以是 要么是 整数 数字指定标签指数 (从0开始),或者当选项卡 一个 标记,它 可以 href 属性作为 援引 字符串 。
destroy()	<span id="OUTFOX_JTR_TRANS_NODE-247" class="OUTFOX_JTR_TRANS_NODE">API</span>	自从1.2.3 完全删除现有的标签 实例。
getConf()	Object	自从1.0.1。 返回配置对象 标签的实例。 这个对象可以被修改, 变化是动态地反映在行为上的标签。
getCurrentPane()	<span id="OUTFOX_JTR_TRANS_NODE-255" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>	返回当前面板作为jQuery对象。
getCurrentTab()	<span id="OUTFOX_JTR_TRANS_NODE-258" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>	返回当前标签作为一个jQuery对象。
getIndex()	integer	返回当前选项卡指数。
getPanes()	<span id="OUTFOX_JTR_TRANS_NODE-264" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>	返回jQuery对象窗格作为。
getTabs()	<span id="OUTFOX_JTR_TRANS_NODE-267" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>	返回标签作为一个jQuery对象。
next()	<span id="OUTFOX_JTR_TRANS_NODE-270" class="OUTFOX_JTR_TRANS_NODE">API</span>	前进到下一个选项卡。
prev()	<span id="OUTFOX_JTR_TRANS_NODE-273" class="OUTFOX_JTR_TRANS_NODE">API</span>	进步到以前的选项卡。

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