jQuery EasyUI layout - Create complex layouts in panels

jQuery EasyUI layout - Create complex layouts in the panel

Use panels in the jQuery EasyUI layout to create complex, versatile custom layouts.

In the example in this section, we use the panel and layout plug-ins to create an MSN message box.

We use multiple layouts in the area panel. A t the top of the message box we place a query input box and a picture of the person on the right. I n the middle area we cut this part into two parts by setting the split property to true, allowing the user to change the size of the area panel.

Here's all the code:

	<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
		<div class="easyui-layout" fit="true">
			<div region="north" border="false" class="p-search">
				<label>Search:</label><input></input>
			</div>
			<div region="center" border="false">
				<div class="easyui-layout" fit="true">
					<div region="east" border="false" class="p-right">
						<img src="images/msn.gif"/>
					</div>
					<div region="center" border="false" style="border:1px solid #ccc;">
						<div class="easyui-layout" fit="true">
							<div region="south" split="true" border="false" style="height:60px;">
								<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
							</div>
							<div region="center" border="false">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	

We don't need to write any javascript code, it has its own very powerful design user interface features.

Download the jQuery EasyUI instance

jeasyui-layout-panel.zip