jQuery EasyUI 中文API―Layout(Panel)
Panel 【面板】
面板特性可以在div标签内被定义
使用说明
HTML代码
-
<div?id="p"?class="easyui-panel"?title="标题"?icon="icon-save"?collapsible="true"?minimizable="true"?maximizable=true?closable="true"?style="width:500px;height:150px;padding:10px;background:#fafafa;">??
-
??内容 ??
-
</div>??
?
?
JavaScript代码
-
??
-
$('#p').panel(options); ??
-
??
-
??
-
$('#p').panel({ ??
-
??title:?'My?Panel', ??
-
??tools:?[{ ??
-
????iconCls:'icon-new', ??
-
????handler:function(){alert('new')} ??
-
??},{ ??
-
????iconCls:'icon-save'??
-
????handler:function(){alert('save')} ??
-
??}] ??
-
}); ??
-
??
-
??
-
$('#p').panel('move',{ ??
-
??left:100, ??
-
??top:100 ??
-
}); ??
-
??
?
特性说明
Properties
名称
类型
描述
默认值
| title |
string |
面板标题 |
null |
| iconCls |
string |
?icon图标样式 |
null |
| width |
number |
设置宽度 |
auto |
| height |
number |
设置高度 |
auto |
| left |
number |
设置相对浏览器左边位置 |
null |
| top |
number |
设置相对浏览器上边位置 |
null |
| cls |
string |
添加一个面板的样式 |
null |
| headerCls |
string |
添加一个面板head样式 |
null |
| bodyCls |
string |
添加一个面板body样式 |
null |
| style |
object |
添加一个自定义样式 |
{} |
| fit |
boolean |
面板自适应父容器大小 |
false |
| border |
boolean |
面板边框 |
true |
| doSize |
boolean |
如果设置为真,容器被创建的时候会重新被定义大小和位置 |
true |
| collapsible |
boolean |
定义显示可折叠按钮 |
false |
| minimizable |
boolean |
定义显示最小化按钮 |
false |
| maximizable |
boolean |
定义显示最大化按钮 |
false |
| closable |
boolean |
定义显示关闭按钮 |
false |
| tools |
array |
定制工具,每个工具可以包含两个性质： iconCls?、 handler |
[] |
| collapsed |
boolean |
定义显示收缩按钮 |
false |
| minimized |
boolean |
初始化最小值 |
false |
| maximized |
boolean |
初始化最大值 |
false |
| closed |
boolean |
恢复到面板初始化状态 |
false |
| href |
string |
远程加载链接到面板 |
null |
| loadingMessage |
string |
加载的时候显示loading信息 |
Loading… |
|
?
?
事件说明
名称
参数
描述
| onLoad |
none |
远程数据加载完毕 |
| onBeforeOpen |
none |
面板打开之前 |
| onOpen |
none |
面板打开之后 |
| onBeforeClose |
none |
面板关闭之前 |
| onClose |
none |
面板关闭之后 |
| onBeforeDestroy |
none |
面板销毁之前 |
| onDestroy |
none |
面板销毁之后 |
| onBeforeCollpase |
none |
面板收缩之前 |
| onCollapse |
none |
面板收缩之后 |
| onBeforeExpand |
none |
面板展开之前 |
| onExpand |
none |
面板展开之后 |
| onResize |
width, height |
改变面板宽度、高度 |
| onMove |
left,top |
面板移动的位置left，top |
| onMaximize |
none |
面板最大化之后 |
| onRestore |
none |
面板恢复原始大小之后 |
| onMinimize |
none |
面板最小化之后 |
|
?
方法说明
名称
参数
描述
| options |
none |
返回option |
| panel |
none |
返回pane object |
| header |
none |
返回panel header object. |
| body |
none |
返回?panel body object. |
| setTitle |
title |
设置title |
| open |
forceOpen |
forceOpen 为true, 面板打开跳过onBeforeOpen |
| close |
forceClose |
forceClose为true,?面板关闭跳过 onBeforeClose |
| destroy |
forceDestroy |
forceDestroy?为true, 面板销毁跳过 onBeforeDestroy |
| refresh |
none |
刷新面板远程加载页面 |
| resize |
options |
调整面板大小：width、height:、left、top |
| move |
options |
移动面板：left、top |
|