妙知谷如何使用easyUI創建控制面板panel
- 學習交流
- 關注：1.77W次
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文件。
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/jy/jiaoliu/re8g6.html
