Easy Tutorial
Plugins Window Messager Jeasyui Tree Treegrid2 Jeasyui App Rssreader Plugins Form Combotree Jqueryeasyui Intro Jeasyui Layout Panel Plugins Window Dialog Jeasyui Win Win1 Plugins Form Numberspinner Jeasyui Form Form3 Plugins Base Draggable Jeasyui Datagrid Datagrid12 Jeasyui Win Dlg2 Plugins Base Pagination Plugins Layout Accordion Jeasyui Datagrid Datagrid23 Jeasyui Dd Shopping Plugins Form Numberbox Jeasyui Datagrid Datagrid3 Ext Etree Jeasyui Tree Tree4 Plugins Form Spinner Jeasyui Datagrid Datagrid27 Plugins Base Parser Jeasyui Datagrid Datagrid16 Jeasyui Datagrid Datagrid7 Jeasyui Layout Tabs2 Plugins Layout Layout Jeasyui App Crud3 Jeasyui Layout Layout Jeasyui Mb Splitbutton Plugins Dt Treegrid Jeasyui Datagrid Datagrid13 Plugins Form Timespinner Jeasyui Datagrid Datagrid22 Jeasyui Datagrid Datagrid2 Jeasyui Tree Tree5 Jeasyui Datagrid Datagrid17 Jeasyui Ref Plugins Plugins Form Validatebox Jeasyui App Crud2 Jeasyui Layout Tabs3 Jeasyui Datagrid Datagrid6 Jeasyui Ref Extension Jeasyui Tree Tree1 Ext Rtl Plugins Base Easyloader Jeasyui Tree Treegrid3 Plugins Layout Panel Jeasyui Layout Accordion Plugins Mb Splitbutton Ext Datagridview Ext Treegrid Dnd Jeasyui Form Form2 Plugins Form Calendar Jeasyui Win Dlg1 Jeasyui Datagrid Datagrid11 Plugins Base Tooltip Jeasyui Datagrid Datagrid20 Ext Dwrloader Jeasyui Datagrid Datagrid24 Jeasyui Datagrid Datagrid15 Jeasyui Mb Menu Jeasyui Tree Tree3 Jeasyui Datagrid Datagrid4 Jeasyui Layout Tabs1 Jeasyui Dd Basic Plugins Form Combobox Jeasyui Form Form4 Jeasyui Tree Treegrid1 Jeasyui Datagrid Datagrid8 Jeasyui Datagrid Datagrid19 Plugins Base Droppable Ext Datagrid Filter Jeasyui Win Win2 Jeasyui Tree Treegrid5 Plugins Form Form Plugins Base Resizable Jeasyui Form Form5 Plugins Form Combogrid Jeasyui Datagrid Datagrid9 Plugins Dt Propertygrid Jeasyui Layout Xp Jeasyui Datagrid Datagrid18 Jeasyui Win Win3 Jeasyui Tree Treegrid4 Plugins Mb Linkbutton Plugins Form Datebox Jeasyui Dd Timetable Ext Ribbon Jeasyui Mb Linkbutton Jeasyui Form Form1 Plugins Layout Tabs Plugins Mb Menu Jeasyui Datagrid Datagrid10 Plugins Base Progressbar Plugins Form Datetimebox Jeasyui Datagrid Datagrid21 Ext Edatagrid Plugins Dt Tree Plugins Dt Datagrid Jeasyui Tree Tree6 Jeasyui Datagrid Datagrid1 Jqueryeasyui Tutorial Plugins Base Searchbox Plugins Window Window Plugins Form Slider Plugins Form Combo Jeasyui Datagrid Datagrid14 Jeasyui Tree Tree2 Plugins Mb Menubutton Jeasyui App Crud1 Ext Datagrid Dnd Jeasyui Datagrid Datagrid5 Jeasyui Mb Menubutton Ext Themes Ext Portal
❮ Jeasyui Datagrid Datagrid4 Jeasyui Dd Basic ❯

jQuery EasyUI Layout - Creating Tabs

This tutorial will demonstrate how to create a Tabs component using easyui. Tabs have multiple panels that can be dynamically added or removed. You can use Tabs to display different entities on the same page.

Tabs only display one panel at a time, each with a title, icon, and close button. When a Tab is selected, the content of the corresponding panel is displayed.

Create Tabs from HTML markup, including a DIV container and some DIV panels.

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

We have created a Tabs component with three panels, where the second and third panels can be closed by clicking the close button.

Download jQuery EasyUI Example

jeasyui-layout-tabs1.zip

❮ Jeasyui Datagrid Datagrid4 Jeasyui Dd Basic ❯