jQuery EasyUI Diseño -Agregar pestañas de reproducción automática (Tabs)

Este tutorial le mostrará cómo crear pestañas de reproducción automática. El componente Tabs muestra el primer panel de pestaña, luego muestra el segundo, el tercero... Escribiremos algo de código para cambiar automáticamente los paneles de pestaña y luego hacer que se repita.

Paso 1: Crear Tabs

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

Paso 2: Escribir el código de reproducción automática

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

Como puede ver, llamamos al método 'tabs' para obtener todos los paneles de pestaña y usamos la función 'setInterval' para alternar entre ellos.

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-tabs3.zip