jQuery EasyUI layout - Create a border layout for a web page

jQuery EasyUI layout - Create a border layout for a web page

This section describes how to create a border layout for a Web page with jQuery EasyUI.

The border layout contains five areas: east, west, north, south, center. Here are some common uses for these five regions:

• The north area can be used to display the site's slogan.
• The south area can be used to display copyrights as well as some instructions.
• The west area can be used to display navigation menus.
• The east area can be used to display some promoted items.
• The center area can be used to display the main content.

In order to apply layout, you should determine a layout container and then define some areas. The layout must require at least one center area, and here is an example of the layout:

	<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 in a container that cuts the container into two parts, with a navigation menu on the left and a main content on the right.

Finally, we write an onclick event handler to retrieve the data, and the 'showcontent' function is very simple:

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

Download the jQuery EasyUI instance

jeasyui-layout-layout.zip