jEasyUI menambah tab automain

Tutorial ini akan menunjukkan kepada anda cara membuat Tab automain. Komponen Tab memaparkan panel tab pertama, kemudian yang kedua, ketiga... Kami akan menulis beberapa kod untuk bertukar secara automatik antara tab, dan kemudian menjadikannya gelung.

Langkah 1: Buat Tab

	<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
		<div title="Shirt1" style="padding:20px;">
			<img src="../style/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>

Langkah 2: Tulis kod 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);

Seperti yang anda lihat, kami memanggil kaedah 'tab' untuk mendapatkan Semua panel tab dan gunakan fungsi 'setInterval' untuk menukarnya.

Muat turun contoh jQuery EasyUI

jeasyui-layout-tabs3.zip