jQuery EasyUI使用教程之添加自动播放标签

<jQuery EasyUI最新版下载>

本教程将为你展示如何创建一个自动播放标签。该标签组件显示第一个面板，然后显示第二个、第三个......我们将编写一些代码来自定切换标签面板并使其循环。

查看演示

Step 1：创建标签

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< div id = "tt" class = "easyui-tabs" style = "width:330px;height:270px;" > < div title = "Shirt1" style = "padding:20px;" > < img src = "images/shirt1.gif" data-bd-imgshare-binded = "1" > </ div > < div title = "Shirt2" style = "padding:20px;" > < img src = "images/shirt2.gif" data-bd-imgshare-binded = "1" > </ div > < div title = "Shirt3" style = "padding:20px;" > < img src = "images/shirt3.gif" data-bd-imgshare-binded = "1" > </ div > < div title = "Shirt4" style = "padding:20px;" > < img src = "images/shirt4.gif" data-bd-imgshare-binded = "1" > </ div > < div title = "Shirt5" style = "padding:20px;" > < img src = "images/shirt5.gif" data-bd-imgshare-binded = "1" > </ div > </ div >

Step 2：编写自动播放代码

1 2 3 4 5 6 7 8 9 10

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' 方法还获得所有的标签面板，并使用'setInterval' 函数来切换它们。

下载该EasyUI示例：easyui-tabs-demo.zip