jQuery EasyUI Layout -Создание вкладок

В этом руководстве показано, как использовать easyui для создания компонента Tabs. Tabs имеет несколько панелей, которые можно динамически добавлять или удалять. Вы можете использовать Tabs для отображения различных сущностей на одной странице.

Tabs отображает только одну панель за раз, и каждая панель имеет заголовок, значок и кнопку закрытия. Когда выбирается Tabs, отображается содержимое соответствующей панели.

Создайте Tabs из HTML-разметки, включая контейнер DIV и несколько панелей 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>

Мы создаём компонент Tabs с тремя панелями; вторую и третью панели можно закрыть, нажав на кнопку закрытия.

Скачать примеры jQuery EasyUI

jeasyui-layout-tabs1.zip