jQuery EasyUI 佈局 - 爲網頁建立邊框佈局

邊框佈局（border layout）提供五個區域：east、west、north、south、center。如下是一些一般用法：

• north 區域能夠用來顯示網站的標語。

• south 區域能夠用來顯示版權以及一些說明。

• west 區域能夠用來顯示導航菜單。

• east 區域能夠用來顯示一些推廣的項目。

• center 區域能夠用來顯示主要的內容。

爲了應用佈局（layout），您應該肯定一個佈局（layout）容器，而後定義一些區域。佈局（layout）必須至少須要一個 center 區域，如下是一個佈局（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>

咱們在一個 <div> 容器中建立了一個邊框佈局（border layout），佈局（layout）把容器切割爲兩個部分，左邊是導航菜單，右邊是主要內容。

最後咱們寫一個 onclick 事件處理函數來檢索數據，'showcontent' 函數很是簡單：

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