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文件。
