jQuery EasyUI layout - add AutoPlay tab (Tabs)
This tutorial will show you how to create an autoplay Tabs. Tabs component displays the first tab panel, then display the second, third ... we will write some code to automatically switch tab panels, then let it cycle.
Step 1: Create 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>
Step 2: Write Code Autoplay
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);
As you can see, we call the 'tabs' approach to get all the tab panels, and use the 'setInterval' function to switch them.