現如今已步入了網際網路時代，資訊技術成已經為了我們生活中不可分割的一部分。網站是我們生活中接觸的比較多的一項技術了，想要建好一個網站，其UI設計是不可少的（估計沒有人願意去看那些單調的文字或圖檔網站吧）。
網站UI有很多種，例如Layui，Easyui等基于jQuery以及HTML的UI等，其中jQuery easyuUI比Layui更加的穩定，适合初學者使用，它既可以通過HTML編寫元件：
<div class="easyui-dialog" style="width:400px;height:200px"
data-options="
title:'My Dialog',
iconCls:'icon-ok',
onOpen:function(){}">
dialog content.
</div>
也可以直接通過JS進行編寫：
<input id="cc" style="width:200px" />
$('#cc').combobox({
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});
這期我們說一下面闆及其操作。（下期講講其它）
jQuery easyUI有兩個網址：
中文網址：JQuery EasyUI中文網
英文網址：JQuery EasyUI英文網
（名字看起來洋裡洋氣的，其實中國開發的，多多支援吧，雖然有點落後了。）
開始（以後不再有啦）
jQuery easyUI是沒有網頁語言限制的，它的功能十分強大，想要使用easyUI，不用說，第一件事肯定是下載下傳，連結在最上面，放到網站根目錄（建議）
easyUI所需要的腳本檔案：
（放到head标簽裡面）
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="easyui/jquery-1.7.X.min.js">
</script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js">
</script>
目錄可以根據easyUI位置進行修改。
引用完以上檔案後，你就可以使用easyUI美化網站了，當然，用它搭建網站架構也是一個不錯的選擇。
我們可以利用class進行編寫網站中的easyUI元素（一定要保證前面引用檔案的目錄是對的）
面闆(Panel)
話不多說，上圖：
上代碼！
<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>
解釋以上代碼：
title指的是面闆的标題
id不用說，像身份證号一樣辨別了這個div的“身份”，後面調用JS的時候就是憑這個“身份證”調用的。
style裡:"width","height"分别表示面闆的寬度，高度，像全屏的話兩個直接100%；"background"指的是面闆裡的背景顔色，資料格式為16進制.
其中“data-options=()”才是最值得說的一個。這裡面包括了easyUI裡的常用屬性，是可以直接改變元素的一些特征。
其中：iconCls是引用的
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
後期直接教學改它！！！
這是圖示的意思，在上圖中面闆左上角的圖示就是用
data-options="iconCls:'icon-save'
設定的（那個類似于儲存的圖示）
closable指的是關閉按鈕
collapsible指的是折疊按鈕
maximizable指的是最大化按鈕，不需要的話直接删掉即可。
<p>就不多說，面闆内容，隻要是這個div包覆的地方全是面闆内容
當然面闆還是可以移動的，上代碼：
$('#p').panel('move',{ //調用面闆，“身份證”作用出來了
left:100, //新位置距離左邊距離（像素）
top:100 //新位置距離頂邊距離（像素）
});
也可以指定檔案加載面闆内容：
$('#p').panel({
href:'content_url.php', //指定面闆内容，可以是一個文本文檔，也可以是網頁等等
onLoad:function(){
alert('loaded successfully');
}
});
屬性
| 名稱 | 類型 | 描述 | 預設值 |
|---|---|---|---|
| id | string | 面闆（panel）的 id 屬性。 | null |
| title | string | 顯示在面闆（panel）頭部的标題文字。 | null |
| iconCls | string | 在面闆（panel）裡顯示一個 16x16 圖示的 CSS class。 | null |
| width | number | 設定面闆（panel）的寬度。 | auto |
| height | number | 設定面闆（panel）的高度。 | auto |
| left | number | 設定面闆（panel）的左邊位置。 | null |
| top | number | 設定面闆（panel）的頂部位置。 | null |
| cls | string | 給面闆（panel）添加一個 CSS class。 | null |
| headerCls | string | 給面闆（panel）頭部添加一個 CSS class。 | null |
| bodyCls | string | 給面闆（panel）主體添加一個 CSS class。 | null |
| style | object | 給面闆（panel）添加自定義格式的樣式。 改變面闆（panel）邊框寬度的代碼執行個體：
| {} |
| fit | boolean | 當設定為 true 時，面闆（panel）的尺寸就适應它的父容器。下面的執行個體示範了自動調整尺寸到它的父容器的最大内部尺寸的面闆（panel）。
| false |
| border | boolean | 定義了是否顯示面闆（panel）的邊框。 | true |
| doSize | boolean | 如果設定為 true，建立時面闆（panel）就調整尺寸并做成布局。 | true |
| noheader | boolean | 如果設定為 true，面闆（panel）的頭部将不會被建立。 | false |
| content | string | 面闆（panel）主體内容。 | null |
| collapsible | boolean | 定義是否顯示折疊按鈕。 | false |
| minimizable | boolean | 定義是否顯示最小化按鈕。 | false |
| maximizable | boolean | 定義是否顯示最大化按鈕。 | false |
| closable | boolean | 定義是否顯示關閉按鈕。 | false |
| tools | array,selector | 自定義工具組，可能的值： 1、數組，每個元素包含 iconCls 和 handler 兩個屬性。 2、選擇器，訓示工具組。 面闆（panel）工具組可通過已存在 <div> 标簽聲明：
| [] |
| collapsed | boolean | 定義初始化面闆（panel）是不是折疊的。 | false |
| minimized | boolean | 定義初始化面闆（panel）是不是最小化的。 | false |
| maximized | boolean | 定義初始化面闆（panel）是不是最大化的。 | false |
| closed | boolean | 定義初始化面闆（panel）是不是關閉的。 | false |
| href | string | 一個 URL，用它加載遠端資料并且顯示在面闆（panel）裡。請注意，除非面闆（panel）打開，否則内容不會被加載。這對建立一個惰性加載的面闆（panel）很有用：
| null |
| cache | boolean | 設定為 true 就緩存從 href 加載的面闆（panel）内容。 | true |
| loadingMessage | string | 當加載遠端資料時在面闆（panel）裡顯示一條資訊。 | Loading… |
| extractor | function | 定義如何從 ajax 響應中提取内容，傳回提取的資料。
|
事件
| 名稱 | 參數 | 描述 |
|---|---|---|
| onLoad | none | 當遠端資料被加載時觸發。 |
| onBeforeOpen | none | 面闆（panel）打開前觸發，傳回 false 就停止打開。 |
| onOpen | none | 面闆（panel）打開後觸發。 |
| onBeforeClose | none | 面闆（panel）關閉前觸發，傳回 false 就取消關閉。下面聲明的面闆（panel）不會關閉。
|
| onClose | none | 面闆（panel）關閉後觸發。 |
| onBeforeDestroy | none | 面闆（panel）銷毀前觸發，傳回false就取消銷毀。 |
| onDestroy | none | 面闆（panel）銷毀後觸發。 |
| onBeforeCollapse | none | 面闆（panel）折疊前觸發，傳回false就停止折疊。 |
| onCollapse | none | 面闆（panel）折疊後觸發。 |
| onBeforeExpand | none | 面闆（panel）展開前觸發，傳回false就停止展開。 |
| onExpand | none | 面闆（panel）展開後觸發。 |
| onResize | width, height | 面闆（panel）調整尺寸後觸發。 width：新的外部寬度 height：新的外部高度 |
| onMove | left,top | 面闆（panel）移動後觸發。 left：新的左邊位置 top：新的頂部位置 |
| onMaximize | none | 視窗最大化後觸發。 |
| onRestore | none | 視窗還原為它的原始尺寸後觸發。 |
| onMinimize | none | 視窗最小化後觸發。 |
方法
| 名稱 | 參數 | 描述 |
|---|---|---|
| options | none | 傳回選項（options）屬性（property）。 |
| panel | none | 傳回外部面闆（panel）對象。 |
| header | none | 傳回面闆（panel）頭部對象。 |
| body | none | 傳回面闆（panel）主體對象。 |
| setTitle | title | 設定頭部的标題文本。 |
| open | forceOpen | 當 forceOpen 參數設定為 true 時，就繞過 onBeforeOpen 回調函數打開面闆（panel）。 |
| close | forceClose | 當 forceClose 參數設定為 true 時，就繞過 onBeforeClose 回調函數關閉面闆（panel）。 |
| destroy | forceDestroy | 當 forceDestroy 參數設定為 true 時，就繞過 onBeforeDestroy 回調函數銷毀面闆（panel）。 |
| refresh | href | 重新整理面闆（panel）加載遠端資料。如果配置設定了 'href' 參數，将重寫舊的 'href' 屬性。 代碼執行個體：
|
| resize | options | 設定面闆（panel）尺寸并做布局。Options 對象包含下列屬性： width：新的面闆（panel）寬度 height：新的面闆（panel）寬度 left：新的面闆（panel）左邊位置 top：新的面闆（panel）頂部位置 代碼執行個體：
|
| move | options | 移動面闆（panel）到新位置。Options 對象包含下列屬性： left：新的面闆（panel）左邊位置 top：新的面闆（panel）頂部位置 |
| maximize | none | 面闆（panel）适應它的容器的尺寸。 |
| minimize | none | 最小化面闆（panel）。 |
| restore | none | 把最大化的面闆（panel）還原為它原來的尺寸和位置。 |
| collapse | animate | 折疊面闆（panel）主體。 |
| expand | animate | 展開面闆（panel）主體。 |
*以上表格内容均轉載自官網連結，放在此處僅為了友善閱讀
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)