jQuery EasyUI 布局 – 為網(wǎng)頁(yè)創(chuàng)建邊框布局

jQuery EasyUI 布局 - 為網(wǎng)頁(yè)創(chuàng)建邊框布局

本節(jié)將描述如何通過(guò)jQuery EasyUI為網(wǎng)頁(yè)創(chuàng)建邊框布局。

邊框布局（border layout）包含了五個(gè)區(qū)域，分別是：east、west、north、south、center。以下是這五個(gè)區(qū)域的一些通常用法：

• north區(qū)域可以用來(lái)顯示網(wǎng)站的標(biāo)語(yǔ)。
• south區(qū)域可以用來(lái)顯示版權(quán)以及一些說(shuō)明。
• west區(qū)域可以用來(lái)顯示導(dǎo)航菜單。
• east區(qū)域可以用來(lái)顯示一些推廣的項(xiàng)目。
• center區(qū)域可以用來(lái)顯示主要的內(nèi)容。

為了應(yīng)用布局（layout），您應(yīng)該確定一個(gè)布局（layout）容器，然后定義一些區(qū)域。布局（layout）必須至少需要一個(gè)center區(qū)域，以下是一個(gè)布局（layout）實(shí)例：

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

我們?cè)谝粋€(gè)<div>容器中創(chuàng)建了一個(gè)邊框布局（border layout），布局（layout）把容器切割為兩個(gè)部分，左邊是導(dǎo)航菜單，右邊是主要內(nèi)容。

最后我們寫一個(gè)onclick事件處理函數(shù)來(lái)檢索數(shù)據(jù)，'showcontent'函數(shù)非常簡(jiǎn)單：

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

下載 jQuery EasyUI 實(shí)例

jeasyui-layout-layout.zip