jEasyUI建立邊框佈局


邊框佈局(border layout)提供五個區域:east、west、north、south、center。以下是一些通常用法:

  • north 區域可以用來顯示網站的標語。

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

  • west 區域可以用來顯示導覽選單。

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

  • center 區域可以用來顯示主要的內容。

27.png

為了套用佈局(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');
	}

下載jQuery EasyUI 實例

##jeasyui-layout-layout.zip