jquery-easyui中创建BorderLayout布局

BorderLayout通常有五个区域：east,west,north,south,center，下面是一般的用法：

• north区域用于显示页面的横幅
• south区域用于显示版权信息或其他说明
• west区域用于显示导航菜单
• east区域用于显示推广信息
• center区域用于显示主页面信息

在easyui中使用布局时首先应该确定在什么容器上应用布局，布局必须至少包含一个center区域，下面是一个例子：

Html代码

1. <div class="layout-container" style="width:400px;height:300px;">  
2.     <div region="west" split="true" title="Navigator" style="width:150px;">  
3.         <p style="padding:5px;margin:0;">Select language:</p>  
4.         <ul>  
5.             <li><a href="javascript:void(0)" onclick="showpage('java.html')">Java</a></li>  
6.             <li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>  
7.             <li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>  
8.             <li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>  
9.         </ul>  
10.     </div>  
11.     <div id="content" region="center" title="Language" href="java.html" style="padding:5px;">  
12.     </div>  
13. </div>  

[html] view plaincopyprint?

1. <div class="layout-container" style="width:400px;height:300px;">  
2.     <div region="west" split="true" title="Navigator" style="width:150px;">  
3.         <p style="padding:5px;margin:0;">Select language:</p>  
4.         <ul>  
5.             <li><a href="javascript:void(0)" onclick="showpage('java.html')">Java</a></li>  
6.             <li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>  
7.             <li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>  
8.             <li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>  
9.         </ul>  
10.     </div>  
11.     <div id="content" region="center" title="Language" href="java.html" style="padding:5px;">  
12.     </div>  
13. </div>  

我们在一个DIV容器上建立了一个左右分栏的布局，左边是导航菜单，右边是主页面内容。在center区域中我们使用href属性指定一个页面让其加载该页面的内容。

运行页面layout.html后可以看到下面的显示：

最后我们为导航菜单编写onclick事件处理函数用于加载指定页面的内容，这个函数很简单：

Js代码

1. function showpage(url){   
2.     $('#content').load(url);   
3. }  

[js] view plaincopyprint?

1. function showpage(url){  
2.     $('#content').load(url);  
3. }  

 

原文及范例的下载地址请见：http://jquery-easyui.wikidot.com/tutorial:layout