如何使用easyUI建立控制面板panel
easyUI是最為常用的前端框架之一，經常用在開發WEB網站的前端。easyUI裡面包含了很多的元件，其中常用的元件有layout佈局、表單form、視窗Window、樹tree等等，還可以跟jQuery結合使用。現在，我們來看看如何使用easyUI建立控制面板panel吧。
操作方法
（01）新建文件雙擊桌面上的Dreamweaver圖示，開啟軟體，也可以開啟其他的軟體，只要能編寫程式碼的IDE都行。我姑且以Dreamweaver軟體為例，然後在介面的選單欄中找到【檔案】--【新建】--【HTML】，建立一張HTML頁面。
（02）儲存快捷鍵【Ctrl+S】，會彈出【儲存位置】，一般是儲存在www裡面或者站點中，檔名輸入panel，儲存型別 All Document型別，然後點選【儲存】按鈕即可。
（03）匯入js檔案將easyUI資料夾匯入站點中，然後在easyUI中拉出4個js檔案到head頭部內，如下檔案：<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）編寫控制面板panel在【panel頁面】的body主體中編寫如下的程式碼：<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div>
（05）啟動wampserver伺服器雙擊wampserver圖示，在桌面的右下角位置會出現個小圖示，圖示由紅色變成橙色，最後變成綠色，即表示wampserver啟動完成。
（06）預覽方法點選Dreamweaver中的【地球圖示】，會彈出下拉選單，選擇【預覽在360se】。在360瀏覽器中預覽。
（07）預覽效果在瀏覽器中的預覽效果如下圖所示。點選圖片的右上角的四個圖示可以關閉、放大、縮小等控制面板panel。
（08）為了便於理解，貼出編輯控制面板的全部程式碼，如下：<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><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/"/></head><body><div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> </body>
特別提示
要記得匯入easyUI資料夾到站點中並引入4個js檔案。
