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

<jQuery EasyUI最新版下载>

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

查看演示

Step 1：创建标签

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<divid="tt"class="easyui-tabs"style="width:330px;height:270px;">

<divtitle="Shirt1"style="padding:20px;">

<imgsrc="images/shirt1.gif"data-bd-imgshare-binded="1">

</div>

<divtitle="Shirt2"style="padding:20px;">

<imgsrc="images/shirt2.gif"data-bd-imgshare-binded="1">

</div>

<divtitle="Shirt3"style="padding:20px;">

<imgsrc="images/shirt3.gif"data-bd-imgshare-binded="1">

</div>

<divtitle="Shirt4"style="padding:20px;">

<imgsrc="images/shirt4.gif"data-bd-imgshare-binded="1">

</div>

<divtitle="Shirt5"style="padding:20px;">

<imgsrc="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