邊框布局(border layout)提供五個區域:east、west、north、south、center。以下是一些通常用法:
- north 區域可以用來顯示網站的智語。
- south 區域可以用來顯示版權以及一些說明。
- west 區域可以用來顯示導航菜單。
- east 區域可以用來顯示一些推廣的項目。
- 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)" "showcontent('java')">Java</a></li>
<li><a href="javascript:void(0)" "showcontent('cshape')">C#</a></li>
<li><a href="javascript:void(0)" "showcontent('vb')">VB</a></li>
<li><a href="javascript:void(0)" "showcontent('erlang')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" style="padding:5px;">
</div>
</div>
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}