jQuery EasyUI Layout - Create Tabs

jQuery EasyUI layout - Create tabs (tabs).

This section describes how to create tabs in the jQuery EasyUI layout.

Tabs contain multiple panels that can be added or removed dynamically.

Tabs can display different entities on the same page.

Tabs display only one panel at a time, each with a title, icon, and close button. W hen Tabs is selected, the contents of the corresponding panel are displayed.

Create Tabs from HTML tags, 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 create a Tabs component with three panels, the second and third of which can be closed by clicking the close button.

Download the jQuery EasyUI instance

jeasyui-layout-tabs1.zip