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。