jQuery EasyUI Layout -Crear pestañas (Tabs)

Este tutorial le mostrará cómo usar easyui para crear un componente Tabs. Tabs tiene varios paneles (panel) que se pueden agregar o eliminar dinámicamente. Puede usar Tabs para mostrar diferentes entidades en la misma página.

Tabs muestra solo un panel (panel) a la vez, y cada panel (panel) tiene un título, un icono y un botón de cierre. Cuando una pestaña es seleccionada, se mostrará el contenido del panel (panel) correspondiente.

Cree Tabs a partir de etiquetas HTML, que incluyen un contenedor DIV y varios paneles DIV (panel).

    <div class="easyui-tabs" style="width:400px;height:100px;">
        <div title="First Tab" style="padding:10px;">
            First Tab
        </div>
        <div title="Second Tab" closable="true" style="padding:10px;">
            Second Tab
        </div>
        <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
            Third Tab
        </div>
    </div>

Crearemos un componente Tabs con tres paneles (panel); el segundo y el tercer panel (panel) se pueden cerrar haciendo clic en el botón de cierre.

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-tabs1.zip