jEasyUI ajoute des onglets à lecture automatique

Ce tutoriel vous montrera comment créer des onglets à lecture automatique. Le composant Onglets affiche le premier panneau d'onglets, puis le deuxième, le troisième... Nous allons écrire du code pour basculer automatiquement entre les onglets, puis le faire boucler.

Étape 1 : Créer des onglets

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

Étape 2 : Écrire le code de lecture automatique

	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);

Comme vous pouvez le voir, nous appelons la méthode 'tabs' pour obtenir tout panneaux d'onglets et utilisez la fonction « setInterval » pour les changer.

Télécharger l'instance jQuery EasyUI

jeasyui-layout-tabs3.zip