【连载】研究EasyUI系统—Panel组件（属性）

    panel属性比较多，根据常用的程度有选择性地介绍一些。。

属性名称	属性值类型	属性默认值	描述
id	字符串	null	控件id
title	字符串	null	控件header标题
iconCls	字符串	null	控件header中图标样式
width	数值	auto	控件宽度
height	数值	auto	控件高度
left	数值	null	控件左上角在屏幕上的x坐标
top	数值	null	控件左上角在屏幕上的y坐标
cls	字符串	null	控件的css样式类
headerCls	字符串	null	控件header的css样式类
bodyCls	字符串	null	控件body的css样式类
style	json	{}	控件自定义样式
fit	布尔值	false	true时panel控件填充父容器
border	布尔值	true	是否显示边框
doSize	布尔值	true	true时panel控件可拉伸，同时layout会被重新创建
noheader	布尔值	false	是否显示header
content	字符串	null	控件body的内容
collapsible	布尔值	false	是否显示可折叠按钮
minimizable	布尔值	false	是否显示最小化按钮
maximizable	布尔值	false	是否显示最大化按钮
closable	布尔值	false	是否显示关闭按钮
tools	json或选择器	[]	控件header上的工具栏
footer	选择器	null	控件footer。1.4.1及以后版本支持
openAnimation	字符串		打开时的动画效果。1.4.1及以后版本支持
openDuration	数值	400	从“打开”事件发生到控件显示之间的时间间隔。1.4.1及以后版本支持
closeAnimation	字符串		关闭时的动画效果
closeDuration	数值	400	从“关闭”事件发生到控件消失之间的时间间隔。1.4.1及以后版本支持
collapsed	布尔值	false	控件初始状态是否为折叠的
minimized	布尔值	false	控件初始状态是否为最小化的
maximized	布尔值	false	控件初始状态是否为最大化的
closed	布尔值	false	控件初始状态是否为关闭的
href	字符串	null	远程url地址，该地址的内容将显示在控件的body处
cache	布尔值	true	是否缓存远程加载的内容
loadingMessage	字符串	“Loading…”	远程加载数据时显示的等待信息
extractor	方法		解析由ajax请求返回的数据
method	字符串	get	http的请求方法。1.3.6及以后版本支持
queryParams	json	{}	加载内容时额外携带的请求参数
loader	方法		远程加载数据的方法。1.3.6及以后版本支持。

    我们选择一些常用的属性来说明。
    cls、headerCls、bodyCls在上一篇例子中已经通过代码做了介绍，是panel控件各部分的css样式。
    style属性用于添加自定义样式，如果你想给panel设置一个转角为5像素的圆角矩形边框，可以写上<div class="easyui-panel" data-options="style:{ borderRadius:5}"></div>
    content属性作为内容将显示到panel控件的body部分，不过一般会使用href属性所链接的页面来作为内容，这样更灵活。
    tools属性决定控件是否在header部分显示工具栏，下例中，我们定义了一个工具栏，显示“+”和“-”按钮。

<div id="divTools">
    <a href="#" class="icon-add" 
        onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-remove"
        onclick="javascript:alert('del')"></a>
</div>
<div class="easyui-panel" 
    data-options="tools:'#divTools'"></div>

    footer属性指定控件footer部分（有些也叫页脚），在上一篇代码中也可以看到。
    openAnimation和closeAnimation指定了打开和关闭panel控件时显示的动画效果，值是字符串的形式，有“slide”,“fade”,“show”三种。
    openDuration和closeDuration指定从“打开（关闭）”这一动作触发到动作完成所持续的时间。
    href属性的值是一个URL链接地址，这个地址所指向页面的内容，将作为panel控件body部分显示的内容。这是一个很常用的属性。
    method属性和html中form元素中的method方法作用一样，指明http的请求方式。当使用href属性请求页面时，我们可以设定method为“post”或者“get”，默认为“get”。
    用户可以在使用href属性请求页面的同时，通过queryParams属性携带一些必要参数。

<script>
    $("myPanel").panel({
        url:'news.php',
        queryParams:{date:'2016-10-05',type:1}
    });
</script>

    上例中的queryParams提交了date和type两个参数给news.php。他们提交的方式和通过表单form的提交方式是一样的。究竟是是以查询字符串形式提交，还是以form内容主体方式提交，取决于属性method是POST还是GET。