jEasyUI creates border layout

Border layout provides five areas: east, west, north, south, and center. Here are some common uses:

• The north area can be used to display the website’s slogan.

• The south area can be used to display copyright and some instructions.

• The west area can be used to display the navigation menu.

• The east area can be used to display some promotional items.

• The center area can be used to display the main content.

In order to apply a layout, you should identify a layout container and then define some areas. The layout (layout) must require at least one center area. The following is a layout (layout) example:

	<div class="easyui-layout" style="width:400px;height:200px;">
		<div region="west" split="true" title="Navigator" style="width:150px;">
			<p style="padding:5px;margin:0;">Select language:</p>
			<ul>
				<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
			</ul>
		</div>
		<div id="content" region="center" title="Language" style="padding:5px;">
		</div>
	</div>

We created a border layout (border layout) in a <div> container, layout (layout) Cut the container into two parts, with the navigation menu on the left and the main content on the right.

Finally we write an onclick event handling function to retrieve data. The 'showcontent' function is very simple:

	function showcontent(language){
		$('#content').html('Introduction to ' + language + ' language');
	}

Download jQuery EasyUI instance

jeasyui-layout-layout.zip