EasyUI为网页创建边框布局

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

• north区域可以用来显示网站的标语。
• south 区域可以用来显示版权以及一些说明。
• west区域可以用来显示导航菜单。
• east区域可以用来显示一些推广的项目。
• center 区域可以用来显示主要的内容。

为了应用布局，首先应该确定一个布局容器，然后定义一些区域。布局必须至少需要一个 center 区域，以下是一个布局实例：

<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>

我们在一个<div> 容器中创建了一个边框布局（border layout），布局（layout）把容器切割为两个部分，左边是导航菜单，右边是主要内容。

最后我们写一个 onclick 事件处理函数来检索数据，'showcontent' 函数非常简单：

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

EasyUI 在面板中创建复杂布局

通常情况下，在 Windows XP 的资源管理器文件夹中，左侧的面板包含一些常见任务。

我们定义一些面板，这些面板用来显示一些任务。每个面板应该至少有折叠/展开工具按钮。代码如下：

<div style="width:200px;height:auto;background:#7190E0;padding:5px;">   
<div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">  	
View as a slide show<br/> 	
Order prints online<br/>  
Print pictures   
</div>   
<br/>  
<div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">  	
Make a new folder<br/> 	
Publish this folder to the Web<br/>  	
Share this folder  
</div>  
<br/>  
<div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">   
New York<br/> 	
My Pictures<br/> 	
My Computer<br/>  	
My Network Places   
</div>  
<br/>  
<div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;"> 	
My documents<br/>	
File folder<br/><br/>	
Date modified: Oct.3rd 2010
</div>
</div>

自定义面板（panel）的外观效果

请注意，这个视图外观效果不是我们想要的，我们必须改变面板（panel）的头部背景图片和折叠/展开按钮的图标。

做到这一点并不难，我们需要做的只是重新定义一些 CSS。

.panel-body{      
background:#f0f0f0;   
}   
.panel-header{   
background:#fff url('images/panel_header_bg.gif') no-repeat top right;    
}    
.panel-tool-collapse{    
background:url('images/arrow_up.gif') no-repeat 0px -3px;  }    
.panel-tool-expand{    
background:url('images/arrow_down.gif') no-repeat 0px -3px;}

由此可见，使用 easyui 定义用户界面非常简单。