jEasyUI creates tab page

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

Tabs displays only one panel at a time, and each panel has a title, icon and close button. When Tabs is selected, the contents of the corresponding panel will be 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 panels can be closed by clicking the close button.

Download jQuery EasyUI instance

jeasyui-layout-tabs1.zip