jQuery EasyUI Layout - Creating a Border Layout for Web Pages
The border layout provides five regions: east, west, north, south, and center. Here are some common uses:
The north region can be used to display the website's slogan.
The south region can be used to display copyright information and some explanations.
The west region can be used to display navigation menus.
The east region can be used to display some promotional items.
The center region can be used to display the main content.
To apply the layout, you should define a layout container and then specify some regions. The layout must include at least one center region. Below is an example of a 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 within a <div> container, which divides the container into two parts: the left side for the navigation menu and the right side for the main content.
Finally, we write an onclick event handler to retrieve data. The 'showcontent' function is very simple:
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}