jQuery EasyUI Layout -Création de Tabs

Ce tutoriel vous montrera comment utiliser easyui pour créer un composant Tabs. Tabs possède plusieurs panneaux qui peuvent être ajoutés ou supprimés dynamiquement. Vous pouvez utiliser Tabs pour afficher différentes entités sur la même page.

Tabs n'affiche qu'un seul panneau à la fois, et chaque panneau possède un titre, une icône et un bouton de fermeture. Lorsqu'un Tabs est sélectionné, le contenu du panneau correspondant sera affiché.

Créez des Tabs à partir du balisage HTML, y compris un conteneur DIV et plusieurs panneaux DIV.

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

Nous créons un composant Tabs avec trois panneaux ; les deuxième et troisième panneaux peuvent être fermés en cliquant sur le bouton de fermeture.

Télécharger les exemples jQuery EasyUI

jeasyui-layout-tabs1.zip