EasyUi_배움길_02

<div class="easyui-panel" style="width:200px;height:100px"
		data-options="style:{borderWidth:2}">
</div>

<div style="width:200px;height:100px;padding:5px">
	<div class="easyui-panel" style="width:200px;height:100px"
			data-options="fit:true,border:false">
		Embedded Panel
	</div>
</div>

tag:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
	<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

The panel tools can also be defined via array:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>

[]
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:

<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href='get_content.php',closed:true">
</div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>

null
cache
boolean
True to cache the panel content that loaded from href.
true
loadingMessage
string
When loading remote data show a message in the panel.
Loading…
extractor
function
Defines how to extract the content from ajax response, return extracted data.

extractor: function(data){
	var pattern = /<body[^>]*>((.|[
\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}

 

Events

Name
Parameters
Description
onLoad
none
Fires when remote data is loaded.
onBeforeOpen
none
Fires before panel is opened, return false to stop the open.
onOpen
none
Fires after panel is opened.
onBeforeClose
none
Fires before panel is closed, return false to cancel the close. The panel declared below cannot be closed.

<div class="easyui-panel" style="width:300px;height:200px;"
		title="My Panel" data-options="onBeforeClose:function(){return false}">
	The panel cannot be closed.
</div>

onClose
none
Fires after panel is closed.
onBeforeDestroy
none
Fires before panel is destroyed, return false to cancel the destroy.
onDestroy
none
Fires after panel is destroyed.
onBeforeCollapse
none
Fires before panel is collapsed, return false to stop the collapse.
onCollapse
none
Fires after panel is collpased.
onBeforeExpand
none
Fires before panel is expanded, return false to stop the expand.
onExpand
none
Fires after panel is expanded.
onResize
width, height
Fires after panel is resized. width: the new outer width height: the new outer height
onMove
left,top
Fires after panel is moved. left: the new left postion top: the new top position
onMaximize
none
Fires after the window has been maximized.
onRestore
none
Fires after the window has been restored to its original size.
onMinimize
none
Fires after the window has been minimized.

Methods

Name
Parameter
Description
options
none
Return options property.
panel
none
Return the outer panel object.
header
none
Return the panel header object.
body
none
Return the panel body object.
setTitle
title
Set the title text of header.
open
forceOpen
When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
close
forceClose
When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
destroy
forceDestroy
When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
refresh
href
Refresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property. Code example:

// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');

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 Code example:

$('#pp').panel('resize',{
	width: 600,
	height: 400
});

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
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.