使用 jq easy ui 首先需要在文件頭目引入相應的css ,jq檔案`
引入順序按照如下程式碼：

  <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <script src="jq/jquery.min.js" type="text/javascript"></script>
    <script src="jq/jquery.easyui.min.js" type="text/javascript"></script> 
 

lay out 佈局就是在一個div中新增一個class屬性為 easyui-layout 在div的內部有可分為 west :左 ,north:上 ,east:右,south:上 center:中區域
其中:center中心區域 必須有

例如：`

<div data-options="region:'north'" style="height:50px">上端內容</div>
		<div data-options="region:'south',title:'south',collapsible:false,split:true" style="height:50px;"> 下端內容</div>
        <div data-options="region:'west',title:'選單導航欄',collapsible:false,split:true" style="height:50px; width:200px;"> 
        
        </div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="padding:10px">中間內容</div>
 

以下屬性用法如下：
佈局選項（Layout Options）
名稱 型別 描述 預設值
fit boolean 當設定為 true 時，就設定佈局（layout）的尺寸適應它的父容器。當在 ‘body’ 標籤上建立佈局（layout）時，它將自動最大化到整個頁面的全部尺寸。 false

區域面板選項（Region Panel Options）
區域面板選項（Region Panel Options）是定義在面板（panel）元件中，下面是一些共同的和新增的屬性：
名稱 型別 描述 預設值
title string 佈局面板（layout panel）的標題文字。 null
region string 定義佈局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border boolean 當設定為 true 時，就顯示佈局面板（layout panel）的邊框。 true
split boolean 當設定為 true 時，就顯示拆分欄，使用者可以用它改變面板（panel）的尺寸。 false
iconCls string 在面板（panel）頭部顯示一個圖示的 CSS class。 null
href string 從遠端站點載入資料的 URL 。 null
collapsible boolean 定義是否顯示可摺疊按鈕。 true
minWidth number 面板（panel）最小寬度。 10
minHeight number 面板（panel）最小高度。 10
maxWidth number 面板（panel）最大寬度。 10000
maxHeight number 面板（panel）最大高度。 10000
方法
名稱 引數 描述
resize none 設定佈局（layout）的尺寸。
panel region 返回指定的面板（panel），‘region’ 引數可能的值是：‘north’、‘south’、‘east’、‘west’、‘center’。
collapse region 摺疊指定的面板（panel），‘region’ 引數可能的值是：‘north’、‘south’、‘east’、‘west’。
expand region 展開指定的面板（panel），‘region’ 引數可能的值是：‘north’、‘south’、‘east’、‘west’。
add options 新增一個指定的面板（panel），options 引數一個配置物件，更多細節請參閱標籤頁面板（tab panel）屬性。
remove region 移除指定的面板（panel），‘region’ 引數可能的值：‘north’、‘south’、‘east’、‘west’。
各方法例子如下：
1、新增刪除區域

	function addPanel(){
			var region = $('#region').val();
			var options = {
				region: region
			};
			if (region=='north' || region=='south'){
				options.height = 50;
			} else {
				options.width = 100;
				options.split = true;
				options.title = $('#region option:selected').text();
			}
			$('#cc').layout('add', options);
		}
		function removePanel(){
			$('#cc').layout('remove', $('#region').val());
		}

2、自適應高度

<h2>Auto Height for Layout</h2>
	<p>This example shows how to auto adjust layout height after dynamically adding items.</p>
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>
	</div>
	<div id="cc" style="width:700px;height:350px;">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south'" style="height:50px;"></div>
		<div data-options="region:'west'" style="width:150px;"></div>
		<div data-options="region:'center'" style="padding:20px">
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$('#cc').layout();
			setHeight();
		});
		
		function addItem(){
			$('#cc').layout('panel','center').append('<p>More Panel Content.</p>');
			setHeight();
		}
		
		function removeItem(){
			$('#cc').layout('panel','center').find('p:last').remove();
			setHeight();
		}
		
		function setHeight(){
			var c = $('#cc');
			var p = c.layout('panel','center');	// get the center panel
			var oldHeight = p.panel('panel').outerHeight();
			p.panel('resize', {height:'auto'});
			var newHeight = p.panel('panel').outerHeight();
			c.layout('resize',{
				height: (c.height() + newHeight - oldHeight)
			});
		}
	</script>