代码改变世界

easyUI Panel

2012-07-30 16:48  java线程例子  阅读(435)  评论(0)  编辑  收藏  举报

@author YHC

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

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

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


使用示例:

创建panel

1.通过标记创建panel

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

<div id="p" class="easyui-panel" title="My Panel"   
        style="width:500px;height:150px;padding:10px;background:#fafafa;"  
        data-options="iconCls:'icon-save',closable:true,  
                collapsible:true,minimizable:true,maximizable:true">  
    <p>panel content.</p>  
    <p>panel content.</p>  
</div>
2.以编程的方式创建panel

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

<div id="p" style="padding:10px;">  
    <p>panel content.</p>  
    <p>panel content.</p>  
</div>  
  
$('#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:

<div class="easyui-panel" style="width:200px;height:100px"
		data-options="style:{borderWidth:2}">
</div>
{}
fit boolean 当该项设置为true时设置panel的大小自适应父容器, 下面的示例展示,他将自动适应父容器内部最大尺寸 
<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 决定是否显示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元素声明:

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

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

<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 决定panel是否在初始化的时候折叠 . false
minimized boolean 决定panel是否在初始化的时候最小化. false
maximized boolean 决定panel是否在初始化时最大化. false
closed boolean 决定panel是否在初始化时关闭. false
href string 一个URL去加载远程服务器端数据然后显示到panel中. 注意,这个类容不会加载知道panel打开(open)和 展开(expand).这个对于创建一个懒加载的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 将缓存从href加载的内容. true
loadingMessage string 当从远程服务器上加载数据的时候显示这个信息在panel中. Loading…
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;
	}
}
 

事件

Name Parameters Description
onLoad none 远程数据加载的时候触发.
onBeforeOpen none 在panel打开之前触发,如果返回false将停止打开panel.
onOpen none 当panel打开之后触发.
onBeforeClose none 在panel关闭之前触发, 该方法如果返回false将取消关闭. 下面声明的这个panel将不能关闭. 
<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 当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!