easyui 与java实例_easyUI Panel

@author YHC

$.fn.panel.defaults覆盖默认值;

panel是使用最为其他内容的一个容器,是一个用于构建其他组件的基础组件,例如layout,tabs,accordion,等等.也提供内置的collapsible(可折叠的)

closable(可关闭的),maximizable(可最大化),minimizable(可最小化的) 行为,和一些自定义行为,panel可以很容易的嵌入网页的任何位置.

使用示例:

创建panel

1.通过标记创建panel

从标记创建panel非常简单,仅仅只需要添加"easyui-panel"样式给div标记

style="width:500px;height:150px;padding:10px;background:#fafafa;"

data-options="iconCls:'icon-save',closable:true,

collapsible:true,minimizable:true,maximizable:true">

panel content.

panel content.

2.以编程的方式创建panel

让我们创建panel工具,在她的右上角

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')}

}]

});移动panel

调用move方法,移动panel到一个新的位置

$('#p').panel('move',{

left:100,

top:100

});加载类容:

让我们通过ajax加载panel内容,当它加载成功之后显示一些信息

属性

Name

Type

Description

Default

id

string

这个panel的id属性.

null

title

string

这个标题文本是显示在panel的头部

null

iconCls

string

一个css样式来显示一个16*16 的icon在panel上

null

width

number

设置panel的宽度.

auto

height

number

设置panel的高度.

auto

left

number

设置panel的左侧的位置.

null

top

number

设置panel的顶部的位置.

null

cls

string

给panel添加一个css样式.

null

headerCls

string

给panel标题添加一个样式.

null

bodyCls

string

给panel的body添加css样式.

null

style

object

添加一个自定义样式给panel.

代码示例改变panel的border width:

data-options="style:{borderWidth:2}">

{}

fit

boolean

当该项设置为true时设置panel的大小自适应父容器, 下面的示例展示,他将自动适应父容器内部最大尺寸

data-options="fit:true,border:false">

Embedded Panel

false

border

boolean

决定是否显示panel的border

true

doSize

boolean

如果设置为 true,panel将在创建的时候调整大小个布局.

true

noheader

boolean

如果设置为 true,panel的header将不会创建.

false

content

string

panel body的内容.

null

collapsible

boolean

决定是否显示collapsible(可折叠)按钮.

false

minimizable

boolean

决定是否显示 minimizable(最小化) 按钮.

false

maximizable

boolean

决定是否显示 maximizable(最大化) 按钮.

false

closable

boolean

决定是否显示 closable(可关闭) 按钮.

false

tools

array,selector

自定义工具, 可用值:

1) 一个数组,每个元素包含iconCls和handler属性.

2) 一个选择器并且指明为panel tool

panel的工具,可以使用存在的div元素声明:

title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">

panel的tool也可以通过一个数组定义 :

title="My Panel" data-options="iconCls:'icon-ok',tools:[

{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-edit',

handler:function(){alert('edit')}

}]">

[]

collapsed

boolean

决定panel是否在初始化的时候折叠 .

false

minimized

boolean

决定panel是否在初始化的时候最小化.

false

maximized

boolean

决定panel是否在初始化时最大化.

false

closed

boolean

决定panel是否在初始化时关闭.

false

href

string

一个URL去加载远程服务器端数据然后显示到panel中. 注意,这个类容不会加载知道panel打开(open)和 展开(expand).这个对于创建一个懒加载的panel是非常有用的:

data-options="href='get_content.php',closed:true">

Open

null

cache

boolean

True 将缓存从href加载的内容.

true

loadingMessage

string

当从远程服务器上加载数据的时候显示这个信息在panel中.

Loading…

extractor

function

定义如何从ajax 的响应内容中如何提取内容, 返回提取后的信息.

extractor: function(data){

var pattern = /

]*>((.|[\n\r])*)/im;

var matches = pattern.exec(data);

if (matches){

return matches[1];// only extract body content

} else {

return data;

}

}

事件

Name

Parameters

Description

onLoad

none

远程数据加载的时候触发.

onBeforeOpen

none

在panel打开之前触发,如果返回false将停止打开panel.

onOpen

none

当panel打开之后触发.

onBeforeClose

none

在panel关闭之前触发, 该方法如果返回false将取消关闭. 下面声明的这个panel将不能关闭.

title="My Panel" data-options="onBeforeClose:function(){return false}">

The panel cannot be closed.

onClose

none

当panel关闭之后触发.

onBeforeDestroy

none

在panel销毁之前触发,该方法返回false将取消销毁.

onDestroy

none

在panel销毁之后触发.

onBeforeCollapse

none

在panel 折叠(collapse) 之前触发,该方法返回false将停止折叠.

onCollapse

none

在panel折叠之后触发.

onBeforeExpand

none

在panel展开(expand)之前触发,该方法如果返回false将停止展开.

onExpand

none

在panel展开之后触发.

onResize

width, height

在panel大小改变之后触发.

width:新的外部的宽度(outer width)

height:新的外部的高度(outer height)

onMove

left,top

在panel移动之后触发.

left: 新的panel的左边的位置

top: 新的panel的顶部的位置

onMaximize

none

在window已经最大化之后触发.

onRestore

none

在window已经还原为原始大小之后触发.

onMinimize

none

在window已经最小化之后触发.

方法

Name

Parameter

Description

options

none

返回 options属性值 .

panel

none

返回外部的panel对象.

header

none

返回panel 的 header 对象.

body

none

返回panel 的 body 对象.

setTitle

title

设置标题文本.

open

forceOpen

当forceOpen 参数设置为true的时候, panel打开将忽略onBeforeOpen回调函数.

close

forceClose

当 forceClose参数设置为true的时候, panel关闭忽略onBeforeClose回调函数.

destroy

forceDestroy

当 forceDestroy 参数设置为true的时候,panel销毁忽略onBeforeDestroy回调函数.

refresh

href

刷新panel加载远程数据.如果传入了 'href' 参数,将会重写老的"href"属性.

示例代码:

// 打开一个panel然后刷新内容.

$('#pp').panel('open').panel('refresh');

// 刷新内容和分配新的url .

$('#pp').panel('open').panel('refresh','new_content.php');

resize

options

设置panel的大小和布局 ,这个options对象包含以下属性:

width: 新的panel宽度

height: 新的panel高度

left: 新的panel左边的位置

top: 新的panel的顶部的位置

代码示例:

$('#pp').panel('resize',{

width: 600,

height: 400

});

move

options

移动panel到一个新的位置 . 这个options对象包含以下属性:

left: 新的panel的左边的位置

top: 新的panel的顶部的位置

maximize

none

自适应panel在它的容器内.

minimize

none

最小化panel.

restore

none

还原最大化的panel返回到原来的大小和原来的位置.

collapse

animate

折叠 panel 的 body.

expand

animate

展开 panel  的 body.

如果以上有错误信息,请指出thanks!