如何使用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>