easyUI中如何佈局頁面

來源：酷知科普網 2.95W

easyUI是非常常用的的WEB前端開發框架，在easyUI裡面提供了很多的版本，有離線版也有線上版。由於用它來開發網站前端非常簡單方便，因此受到廣泛的歡迎。現在我們來看看如何使用easyUI佈局頁面。

操作方法

（01）建立HTML文件雙擊桌面上的Dreamweaver圖示，開啟Dreamweaver軟體，點選軟體中選單欄的【檔案】-->【新建】-->【HTML】建立一張HTML型別的頁面。

（02）儲存頁面快捷鍵【ctrl+s】儲存頁面，會彈出【儲存位置】，一般是儲存在站點中或者www資料夾裡面。輸入檔名並選擇儲存檔案的型別，然後點選確定按鈕即可。

（03）引入js檔案easyUI裡面有很多的元件，要想利用這些元件直接開發前端頁面的話，就需要引入相關的js檔案。我們要佈局頁面，用到的元件是【layout】，那麼要引入4個js檔案，如下圖所示：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

（04）開啟EasyUI+1.3+中文幫助手冊【EasyUI+1.3+中文幫助手冊】網上有很多的版本，內容都大同小異，隨意下載一份即可，下載這個的目的是裡面有很多的解析和例子可以參考。

（05）頁面佈局我們建立【整個頁面的佈局】，那麼找到手冊中的【佈局面板】裡面就有一些簡單的例子和程式碼，複製貼上到Dreamweaver檔案的body裡面。如果還未下載手冊的人可以參考如下程式碼：<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>