现如今已步入了互联网时代，信息技术成已经为了我们生活中不可分割的一部分。网站是我们生活中接触的比较多的一项技术了，想要建好一个网站，其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=)