面板 Panel
用$.fn.panel.defaults重写Defaults Panel是其他组件的容器,他是创建其他组件比如layout,tabas,according等的基础组件。他通常内置,collapsible,closeable,maximizable和minimizable以及其他通用的行为,pannels可以很容易的嵌入到网页的任何位置。
使用示例(Usage Example)
创建面板Panel
1、通过标记创建panel 通过标记panle很容易,在div上加上‘easyui-panel’类
2、通过程序创建 在右上方创建带工具条的panelpanel content.
panel content.
panel content.
panel content.
$('#p').panel({ width:500, height:150, title:'My Panel', tools:[{ iconCls:'icon-add', handler:function(){alert('new')} },{ iconCls:'icon-save', handler:function(){alert('save')} }] },2);移动面板
通过‘move’方法移动panle到新的位置
$('#p').panel('move',{ left:100, top:100 },2);加载内容
通过ajax加载panel,并且当加载成功的时候显示一些信息。
$('#p').panel({ href:'content_url.php', onLoad:function(){ alert('loaded successfully',2); } },2);
属性
Name | Type | Description | Default |
---|---|---|---|
id | string | Panel的id | null |
title |
string |
The title text to display in panel header. Panel的标题文本 |
null |
iconCls |
string |
A CSS class to display a 16x16 icon in panel. 显示16*16图标的css类名 |
null |
width |
number |
Set the panel width. 设置panel的宽度 |
auto |
height |
number |
Set the panel height. 设置panel的高度 |
auto |
left |
number |
Set the panel left position. 设置panel的左边位置 |
null |
top |
number |
Set the panel top position. 设置panel的顶部位置 |
null |
cls |
string |
Add a CSS class to the panel. 为panel新增一个css类 |
null |
headerCls |
string |
Add a CSS class to the panel header. 为panel头部新增css样式 |
null |
bodyCls |
string |
Add a CSS class to the panel body. 为panel body部分新增css样式 |
null |
style |
object |
Add a custom specification style to the panel. Code example to change the panel border width: 为panel新增规定的style
|
{} |
fit |
boolean |
When true to set the panel size fit it's parent container. The example below shows a panel which can be auto resized to max inner dimensions of its parent container 当设置为true的时候,panel充满他的父容器。下面的代码展示了自动的调整最大大小到他都父容器中。
|
false |
border |
boolean |
Defines if to show panel border. 是否显示panel的border |
true |
doSize |
boolean |
If set to true,the panel will be resize and do layout when created. 当设置为true的时候,当布局被改变他将重建大小和布局 |
true |
noheader |
boolean |
If set to true, the panel header will not be created. 如果设置为true,不创建panel的头部 |
false |
content |
string |
The panel body content. Panel显示的正文 |
null |
collapsible |
boolean |
Defines if to show collapsible button. 是否显示collapsible按钮 |
false |
minimizable |
boolean |
Defines if to show minimizable button. 是否显示最小化按钮 |
false |
maximizable |
boolean |
Defines if to show maximizable button. 是否显示最大化按钮 |
false |
closable |
boolean |
Defines if to show closable button. 是否显示关闭按钮 |
false |
tools |
array,selector |
Custom tools, possible values: 1) an array, each element contains iconCls and handler properties. 2) a selector that indicating the tools The panel tools can be declared with exists |
[] |
collapsed |
boolean |
Defines if the panel is collapsed at initialization. 在初始化的时候定义该面板是否可伸缩 |
false |
minimized |
boolean |
Defines if the panel is minimized at initialization. 在初始化的时候定义该面板是否可最小化 |
false |
maximized |
boolean |
Defines if the panel is maximized at initialization. 在初始化的时候定义该面板是否可最大化 |
false |
closed |
boolean |
Defines if the panel is closed at initialization. 在初始化的时候定义该面板是否可关闭 |
false |
href |
string |
A URL to load remote data and then display in the panel. Notice that the content will not be loaded until the panel is open and expand. This is useful to create a lazy loading panel: 通过链接加载远程数据并且显示在panel上。要注意的是正文只有panel在展开或者打开的时候才会展示。在创建懒加载panel的时候有用。
|
null |
cache |
boolean |
True to cache the panel content that loaded from href. 如果设置为true,则缓存从href来的内容 |
true |
loadingMessage |
string |
When loading remote data show a message in the panel. 在panel上加载远程数据 |
Loading… |
extractor |
function |
Defines how to extract the content from ajax response, return extracted data. 定义怎么从ajax响应中提取正文内容,返回提取的数据
extractor: function(data){ var pattern = /]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data,2); if (matches){ return matches[1]; // only extract body content } else { return data; } }
|
事件
Name |
Parameters |
Description |
onLoad |
none |
Fires when remote data is loaded. 当远程数据加载的时候触发 |
onBeforeOpen |
none |
Fires before panel is opened, return false to stop the open. 在panel展开之前触发,如果返回false则不展开panel |
onOpen |
none |
Fires after panel is opened. 当panel打开之后触发 |
onBeforeClose |
none |
Fires before panel is closed, return false to cancel the close. The panel declared below cannot be closed. 在panel关闭后触发,返回false的话则取消关闭操作。下面定义的panel是不可关闭的。
?????????????????????????????? title="My Panel" data-options="onBeforeClose:function(){return false}"> ?????????????? The panel cannot be closed.
|
onClose |
none |
Fires after panel is closed. Panel关闭之后触发 |
onBeforeDestroy |
none |
Fires before panel is destroyed, return false to cancel the destroy. Panel销毁钱触发,如果返回false则取消销毁 |
onDestroy |
none |
Fires after panel is destroyed. Panel销毁后触发 |
onBeforeCollapse |
none |
Fires before panel is collapsed, return false to stop the collapse. 在collapsed前触发,如果返回false则停止collapse |
onCollapse |
none |
Fires after panel is collpased. Panel在collpased之后触发 |
onBeforeExpand |
none |
Fires before panel is expanded, return false to stop the expand. 在panel展开前触发,返回false的话停止展开 |
onExpand |
none |
Fires after panel is expanded. Panel展开后触发 |
onResize |
width, height |
Fires after panel is resized. width: the new outer width height: the new outer height Panel在改变大小后触发 Width:新的宽度 Height:新的高度 |
onMove |
left,top |
Fires after panel is moved. left: the new left postion top: the new top position 在panel移动之后触发 Left:新的距左侧位置 Top:新的距高度位置 |
onMaximize |
none |
Fires after the window has been maximized. 当panel最大化后触发 |
onRestore |
none |
Fires after the window has been restored to its original size. 当panel恢复到原始尺寸的时候被触发 |
onMinimize |
none |
Fires after the window has been minimized. Panel最小化的时候被触发 |
方法
Name |
Parameter |
Description |
options |
none |
Return options property. 返回options属性 |
panel |
none |
Return the outer panel object. 返回outer panle队形 |
header |
none |
Return the panel header object. 返回panel header对象 |
body |
none |
Return the panel body object. 返回panle body兑现 |
setTitle |
title |
Set the title text of header. 设置panel头部的标题文本 |
open |
forceOpen |
When forceOpen parameter set to true, the panel is opened by pass the onBeforeOpen callback. 当forceopen参数设置为true,panel通过调用onbeforeopen方法打开 |
close |
forceClose |
When forceClose parameter set to true, the panel is closed by pass the onBeforeClose callback. 当forceClose参数设置为true,panel通过调用onBeforeClose方法打开 |
destroy |
forceDestroy |
When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback. 当forceDestroy参数设置为true,panel通过调用onBeforeDestroy方法打开 |
refresh |
href |
Refresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property. 刷新panel加载远程数据,如果分配了href参数,他将重载href属性 Code example: // open a panel and then refresh its contents. $('#pp').panel('open').panel('refresh',2); // refresh contents with a new URL. $('#pp').panel('open').panel('refresh','new_content.php',2); |
resize |
options |
Set panel size and do layout. The options object contains following properties: width: the new panel width height: the new panel height left: the new panel left position top: the new panel top position 设置panel大小和冲洗布局,这个可设置对象包含一下属性 Width:新的panel宽度 Height:新的panel高度 Left:新的左侧位置 Top:新的高度位置 Code example: $('#pp').panel('resize',{ ?????????????? width: 600, ?????????????? height: 400 },2); |
move |
options |
Move the panel to a new position. The options object contains following properties: left: the new panel left position top: the new panel top position 移动panel去新的位置,他包含一下属性 Left: Top: |
maximize |
none |
Fits the panel winthin its container. |
minimize |
none |
Minimizing the panel. |
restore |
none |
Restores the maximized panel back to its original size and position. |
collapse |
animate |
Collapses the panel body. |
expand |
animate |
Expand the panel body. |