【EasyUi】頁面設計必學之Layout
接觸EasyUi也快一年了，很多時候都把重心放在實現功能方面，要顯示大量資料了就用DataGrid，要實現分頁效果了就想著Tabs，如此等等，再接下來就是考慮CSS、js如何讓這個功能實現的更好。我很少去看其它“無關”功能的東西，每次總以沒時間為由推遲對這些知識的瞭解、或者覺得這些東西太簡單遇到了看幫助文件就成。然而一年了，我只用過貼上過來的Layout，在自己設計頁面的時候都是用margin代替，這麼簡單又實用的東西，你是否也忽略了？
一、簡介Layout
Layout俗稱佈局面版，它最多可把頁面分成五個部分：east、west、south、north、center（東西南北中），每個部分均可放入任意的頁面控制元件，我們可以直接拖動它的邊框進行伸縮調整，也可以摺疊某些區域。最主要的是還可以在這些區域中再巢狀Layout，即整個頁面都是被Layout承包的！
二、使用<html> <head> <title>test</title> <link href="jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" /> <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /> <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /> <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script> </head> <body class="easyui-layout" style="font-size:46px;"> <div data-options="region:'north',border:false" style="height:60px;background:#778899;padding:10px;font-size:26px;text-align:center">北部區域:可載入標題、logo等等</div> <div data-options="region:'west',split:true,title:'西部'" style="width:150px;padding:10px;">導航欄類的東西放在這裡，如：tree、Accordion</div> <div data-options="region:'east',split:true,collapsed:true,title:'東部'" style="width:100px;padding:10px;"></div> <div data-options="region:'south',border:false" style="height:50px;background:#778899;padding:10px;text-align:center">南部區域:可顯示作者、聯絡方式等等資訊</div> <div data-options="region:'center',title:'中間'">這裡放顯示大量資料的控制元件、如DataGrid、Tabs等</div> </body> </html>
1.建立Layout
首先需要建立佈局面版（Layout Options），即在<div>標籤中引入easyui-layout類，這個就相當於告訴Web頁面我要使用Layout了；接下來建立整個頁面的區域面版（Region Panel Options），即把頁面劃分成哪些部分；如果有巢狀的佈局，則可重新從引入easyui-layout開始；最後把控制元件加入到各區域即可，這樣頁面的整體設計就完成了
2.屬性
1）面版的樣式
fit：它是在建立面版（Layout Options）的標籤中，可定義的屬性，值為boolean型，預設是false。例如：
fit為true時
<body>
<div id="mainBody" class="easyui-layout" data-options="fit:true" style="width: 1154px; height: 553px;margin-top:40px; margin-left: 90px;">
@*zTree樹形結構*@
<div data-options="region:'west',split:true,title:'導航欄'" style="width: 250px; height:auto">
</div>
@* 右側載入部分頁面資料區域 *@
<div id="Content" data-options="region:'center',title:'使用者資訊'" style="background: white; width: 800px">
</div>
</div>
</body>
把fit設為false或者不設定時，如下（這樣看起來才有頭有尾）
2）區域面版
區域的控制面版選項data-options中定義的面版元件，它的屬性一般也包括title、border等，特殊一點的有下邊三個
region：定義面版的位置，即取值為east、west、south、north、center中的一個，表示東西南北中任意一部分
split：設定為true將顯示一個分隔條，使用者可拖動分隔條來改變區域的大小，預設值為false
iconCls：用來小時佈局面版頭部圖示的css類
3.事件
一般的事件，如resize、add、remove等，它都擁有，此外還有三個我們需要知道的
1）panel：引數為region的屬性值，返回特定的佈局面板
2）collapse：引數為region的屬性值，摺疊特定的佈局面板。設為true，則在載入後成摺疊狀態，預設為false（開啟狀態）
3）expand：引數為region的屬性值，延伸特定的佈局面板
小結：
Layout很簡單實用，這次是因為頁面顯示出現了問題才來瞭解它，期間調了很多次才知道原因在這兒，如果提前瞭解過Layout想必可以很快就知道毛病在哪兒，也不用走那麼多彎路了。 在咱們平常學習中，很多東西不怕不知道，就怕不知道。沒有提前瞭解過的東西，在實際應用中很少會想到它。