> 布局組件依賴于 Panel（面板）組件和 resizable(調整大小)組件。 # 加載方式 ## Class加載 ``` <div id="box" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'北部 Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'南部 Title',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'西部',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'東部',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'中間 title'" style="padding:5px;background:#eee;"></div> </div> ```  ## JS調用加載 ``` $('#box').layout({ fit : true, }); ``` # 布局屬性 | 屬性名 | 值 | 說明 | | --- | --- | | fit| boolean| 如果設置為 true，布局組件將自適應父容易。當使用 body 標簽創建布局的時候，整個頁面會自動最大。默認為 false。| # 區域面板屬性 > 區域面板屬性定義與 panel 組件類型，下面是公共和新增的屬性： | 屬性名 | 值 | 說明 | | --- | --- | | title | string | 布局面板標題文本。默認值 null。| | region | string| 定義布局面板位置，可用的值有：north,south, east, west, center。默認值空。| | border | boolean | 為 true 時顯示布局面板邊框。默認值 true。| | split | boolean | 為 true 時用戶可以通過分割欄改變面板大小。默認值 false。| | iconCls | string | 一個包含圖標的 CSS 類 ID，該圖標將會顯示到面板標題上。默認值 null。| | href | string | 用于讀取遠程站點數據的 URL 鏈接。默認值null。| | collapsible | boolean | 定義是否顯示折疊按鈕。默認值 true。| | minWidth | number | 最小面板寬度。默認值10。| | minHeight| number | 最小面板高度。默認值10。| | maxWidth | number | 最大面板寬度。默認值10000。| | maxHeight | number | 最大面板高度。默認值10000。| *** ``` <div data-options=" region:'north', title:'北部', split:true, border:true, iconCls:'icon-save', href:'content.html', collapsible:false, maxHeight:200" style="height:100px;"> </div> ``` # 方法列表 | 方法名 | 參數 | 說明 | | --- | --- | | resize| none | 設置布局大小。| | panel | region | 返 回 指 定 面 板 ， 'region' 參 數 可 用 值 有 ：'north','south','east','west','center'。| | collapse | region | 折 疊 指 定 面 板 。 'region' 參 數 可 用 值 有 ：'north','south','east','west'。| | expand| region | 展 開 指 定 面 板 。 'region' 參 數 可 用 值 有 ：'north','south','east','west'。| | add | options | 添加指定面板。屬性參數是一個配置對象，更多細節請查看選項卡面板屬性。| | remove | region | 移 除 指 定 面 板 。 'region' 參 數 可 用 值 有 ：'north','south','east','west'。| *** ``` //返回指定面板 console.log($('#box').layout('panel', 'north')); //設置指定面板折疊 $('#box').layout('collapse', 'north'); //設置指定面板展開 $('#box').layout('expand', 'north'); //重新調整布局和大小 $(document).click(function () { $('#box').layout().css('display', 'block'); $('#box').layout('resize'); }); //新增一個面板 $('#box').layout('add', { title : 'center title', region : 'center', }); //刪除指定面板 $('#box').layout('remove', 'north'); //使用$.fn.layout.defaults 重寫默認值對象。 ```