jQuery EasyUI 佈局 - 添加自動播放標籤頁（Tabs）
本教程將向您展示如何創建一個自動播放的 Tabs。 Tabs 組件顯示第一個 tab 面板，然後顯示第二個、第三個... 我們將寫一些代碼來自動地切換 tab 面板，然後讓它迴圈。
步驟 1：創建 Tabs
<div id="tt" class="easyui-tabs" style="width:330px;height:270px;"> <div title="Shirt1" style="padding:20px;"> <img src="images/shirt1.gif"> </div> <div title="Shirt2" style="padding:20px;"> <img src="images/shirt2.gif"> </div> <div title="Shirt3" style="padding:20px;"> <img src="images/shirt3.gif"> </div> <div title="Shirt4" style="padding:20px;"> <img src="images/shirt4.gif"> </div> <div title="Shirt5" style="padding:20px;"> <img src="images/shirt5.gif"> </div> </div>
步驟 2：寫自動播放代碼
var index = 0;
var t = $('#tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select', tabs[index].panel('options').title);
index++;
if (index >= tabs.length){
index = 0;
}
}, 3000);
正如您所看到的，我們調用 'tabs' 方法來得到所有 tab 面板，並使用 'setInterval' 函數來切換他們。