jQuery EasyUI Layout -Ajout d'onglets à lecture automatique

Ce tutoriel vous montrera comment créer des onglets à lecture automatique. Le composant Tabs affiche le premier panneau d'onglet, puis le deuxième, le troisième... Nous allons écrire du code pour basculer automatiquement les panneaux d'onglets et les 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="images/shirt1.gif.html">
        </div>
        <div title="Shirt2" style="padding:20px;">
            <img src="images/shirt2.gif.html">
        </div>
        <div title="Shirt3" style="padding:20px;">
            <img src="images/shirt3.gif.html">
        </div>
        <div title="Shirt4" style="padding:20px;">
            <img src="images/shirt4.gif.html">
        </div>
        <div title="Shirt5" style="padding:20px;">
            <img src="images/shirt5.gif.html">
        </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 tous les panneaux d'onglets, et utilisons la fonction 'setInterval' pour les basculer.

Télécharger les exemples jQuery EasyUI

jeasyui-layout-tabs3.zip