# jQuery EasyUI 布局 - 為網頁創建邊框布局 邊框布局（border layout）提供五個區域：east、west、north、south、center。以下是一些通常用法： * north 區域可以用來顯示網站的標語。 * south 區域可以用來顯示版權以及一些說明。 * west 區域可以用來顯示導航菜單。 * east 區域可以用來顯示一些推廣的項目。 * center 區域可以用來顯示主要的內容。  為了應用布局（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> ``` 我們在一個 &lt;div&gt; 容器中創建了一個邊框布局（border layout），布局（layout）把容器切割為兩個部分，左邊是導航菜單，右邊是主要內容。 最后我們寫一個 onclick 事件處理函數來檢索數據，'showcontent' 函數非常簡單： ``` function showcontent(language){ $('#content').html('Introduction to ' + language + ' language'); } ``` ## 下載 jQuery EasyUI 實例 [jeasyui-layout-layout.zip](/try/jeasyui/download/jeasyui-layout-layout.zip)