编程那点事编程那点事

专注编程入门及提高
探究程序员职业规划之道!

easyui api中文文档:面板 Panel

面板 Panel

用$.fn.panel.defaults重写Defaults Panel是其他组件的容器,他是创建其他组件比如layout,tabas,according等的基础组件。他通常内置,collapsible,closeable,maximizable和minimizable以及其他通用的行为,pannels可以很容易的嵌入到网页的任何位置。

使用示例(Usage Example)

创建面板Panel

1、通过标记创建panel 通过标记panle很容易,在div上加上‘easyui-panel’类

panel content.

panel content.

2、通过程序创建 在右上方创建带工具条的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')}
}]
},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充满他的父容器。下面的代码展示了自动的调整最大大小到他都父容器中。


				
Embedded 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

tag:


自定义工具栏,可能的值

1 一个数组,每个都包含iconcls和handler属性

2 一个表面是工具的选择器


					


The panel tools can also be defined via array:

Panel工具也可以通过数组定义


					


[]

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的时候有用。


				
Open


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.

未经允许不得转载: 技术文章 » javascript » easyui api中文文档:面板 Panel