panel - Documentation - jQuery EasyUI

jQuery EasyUI

previous page next page

面版 - Panel

使用$.fn.panel.defaults重载默认值。

面版用作其他内容的容器。这是基本组件构建其他组件(如布局、标签、折叠等。它还提供了内置的可折叠、可闭,maximizable和minimizable行为和其他定制的行为。面板可以很容易地嵌入到web页面的任何位置。
.

使用方法（Usage Example）

创建面版

1. 使用标签创建控制面板

使用标签创建控制面板十分简单，只须要对<div>标签引用'easyui-panel'类。

2. 使用脚本创建控制面板

下面的代码将创建一个工具栏在右上方的控制面板。


移动控制面板

调用'move'方法可以将控制面板移动到一个新的位置。


载入内容

下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。

 

属性（Properties）

名称 类型 描述 默认值
id string 面版的id属性。 null
title string 显示在面版顶部的标题文本。 null
iconCls string 在面版标题前显示一个16x16大小图标的CSS类。 null
width number 设置面版的宽度。 auto
height number 设置面版的高度。 auto
left number 设置面版的左边距。 null
top number 设置面版的顶边距。 null
cls string 对面版引用一个CSS类。 null
headerCls string 对面版头部引用一个CSS类。 null
bodyCls string 对面版主体引用一个CSS类。 null
style object 给面版添加一个自定义的样式。

Code example to change the panel border width:

<div class="easyui-panel" style="width:200px;height:100px"
		data-options="style:{borderWidth:2}">
</div>
{}
fit boolean 设置为true时，面版的大小将铺满它所在的容器（浏览器）。
<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>
false
border boolean 定义是否显示控制面板边框。 true
doSize boolean 如果设置为true，在控制面板被创建时将被重置大小并且自动布局。 true
noheader boolean 如果设置为true，控制面板头部将不被创建。 false
content string 面版主体的内容。 null
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
closable boolean 定义是否显示关闭按钮。 false
tools array,selector 自定义工具,可能的值:
　　1)一个数组,每个元素包含iconCls和处理程序的属性。
　　2)一个选择器,指示工具

The panel tools can be declared with exists <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  class="icon-add" onclick="javascript:alert('add')"></a>
	<a  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 定义控制面板初始化时是否折叠。 false
minimized boolean 定义控制面板初始化时是否最小化。 false
maximized boolean 定义控制面板初始化时是否最大化。 false
closed boolean 定义控制面板初始化时是否关闭。 false
href string 一个URL加载远程数据,然后显示在面板。注意,内容将不会被加载到面板是开放和扩大。这是用来创建一个延迟加载面板: 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href='get_content.php',closed:true">
</div>
<a  onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache boolean 如果设置为true，从超链接载入的数据将被缓存。 true
loadingMessage string 在正在载入远程数据时显示在面板中的信息。 Loading��?/td>
extractor function 定义如何从ajax返回值中提取内容,返回被提取的数据。 
extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}

事件（Events）

名称 属性 描述
onLoad none 在远程数据被载入时触发。
onBeforeOpen none 在控制面板被打开之前触发，返回false将停止打开。
onOpen none 在控制面板被打开之后触发。
onBeforeClose none 在控制面板被关闭之前触发，返回false将取消关闭。
<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 在控制面板被关闭后触发。
onBeforeDestroy none 在控制面板被注销前触发，返回false将取消注销。
onDestroy none 在控制面板被注销后触发。
onBeforeCollapse none 在控制面板被折叠之前触发，返回false将停止折叠。
onCollapse none 在控制面板被折叠之后触发。
onBeforeExpand none 在控制面板被扩展之前触发，返回false将停止扩展（这里应该是指扩展区域，宽、高等）。
onExpand none 在控制面板被扩展之后触发。
onResize width, height 在控制面板被缩放后触发。
width： 新的控制面板宽度
height：新的控制面板高度
onMove left,top 在控制面板被移动后触发。
left：新的控制面板左边距
top：新的控制面板顶边距
onMaximize none 在控制面板被最大化后触发
onRestore none 在控制面板被重置为初始大小后触发。
onMinimize none 在控制面板被最小化后触发。

方法（Methods）

名称 属性 描述
options none 返回选项属性。
panel none 返回控制面板对象。
header none 返回控制面板头对象。
body none 返回控制面板主体对象。
setTitle title 设置控制面板头部的标题文本。
open forceOpen 当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。
close forceClose 当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。
destroy forceDestroy 当参数forceDestroy设置为true时,控制面板将被打开，不受onBeforeDestroy回调函数的约束。
refresh href 当href属性被设置时，刷新控制面板以载入远程数据。

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 这是控制面板的尺寸并且进行布局。options对象包含以下2个属性:
width： 新的控制面板宽度
height： 新的控制面板高度
left： 新的控制面板左边距
top： 新的控制面板顶边距

示例:

$('#pp').panel('resize',{
	width: 600,
	height: 400
});
move options 移动控制面板到一个新的位置。options对象包含以下2个属性:
left： 新的控制面板左边距
top： 新的控制面板顶边距
maximize none 使控制面板铺满整个容器。
minimize none 最小化控制面板。
restore none 使最大化的控制面板重置为其初始化时的大小和位置。
collapse animate 折叠控制面板主体。
expand animate 扩展控制面板主体。
previous page start next page