jQuery EasyUI Layout - Add Autoplay Tabs

jQuery EasyUI layout - Add autoplay tabs (tabs).

You can use jQuery EasyUI to add autoplay tabs.

An autoplay Tabs displays the first tab panel, and then the second, third... We'll do the automatic switching of the tab panel with some code, and then let it loop.

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 autoplay code

	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' method to get all the tab panels and use the 'setInterval' function to switch them.

Download the jQuery EasyUI instance

jeasyui-layout-tabs3.zip