jQuery EasyUI panel 中文翻译

原创
2013/02/17 12:13
阅读数 1.2K

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

panel为作为其它内容的容器使用。它是其它组件的基础,比如layout、tabs、accordion等等。它还提供了折叠、关闭、最大化、最小化和自定义的特性。panels可以很容易的嵌入到网页的任意位置。

image

示例

创建Panel

1. 通过标记创建。
从标记创建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。


   
< 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加载内容,当加载成功时显示一些信息。


   
$('#p').panel({ href:'content_url.php', onLoad:function(){ alert('loaded successfully'); } });

属性

名称 类型 说明 默认值
id string panel的id属性 null
title string title属性显示在panel的头部 null
iconCls string 一个CSS的类显示一个16×16的图标 null
width number 设置panel的宽度 auto
height number 设置panel的高度 auto
left number 设置panel的横坐标 null
top number 设置panel的纵坐标 null
cls string 给panel添加一个类 null
headerCls string 给panel的header添加一个类 null
bodyCls string 给panel的body添加 一个类 null
style object 给panel添加一个自定义的样式 {}
fit boolean 设置为true时,panel适应父容器的大小 false
border boolean 是否显示边框 true
doSize boolean 如果设置为true,当layout创建时调整大小 true
noheader boolean 如果设置为true,panel的header不会被创建 false
content string panel的body内容 null
collapsible boolean 是否显示可折叠按钮 false
minimizable boolean 是否显示最小化按钮 false
maximizable boolean 是否显示最大化按钮 false
closable boolean 是否显示关闭按钮 false
tools array,selector 自定义工具,可能的取值为:
1. 一个数组,每一个元素包含iconCls和handler属性
2.一个选择器
[]
collapsed boolean 初始状态是否折叠 false
minimized boolean 初始状态是否最小化 false
maximized boolean 初始状态是否最大化 false
closed boolean 初始状态时关闭 false
href string 一个URL来加载和显示远程数据。注意数据不会预先加载,直到panel打开和展开时才加载 null
cache boolean 是否缓存远程加载的内容 true
loadingMessage string 加载远程数据时显示的信息 Loading…
extractor function 定义怎样提前内容,从Ajax返回提取数据  

 

事件

名称 参数 说明
onLoad none 远程数据加载时执行
onBeforeOpen none 打开前执行,返回false停止打开
onOpen none 打开后执行
onBeforeClose none 关闭前执行,返回false停止关闭
onClose none 关闭后执行
onBeforeDestroy none 销毁前执行,返回false停止销毁
onDestroy none 销毁后执行
onBeforeCollapse none 折叠前执行,返回false停止折叠
onCollapse none 折叠后执行
onBeforeExpand none 展开前执行,返回false停止展开
onExpand none 展开后执行
onResize width,height 改变大小时执行
onMove left,top 移动后执行
onMaximize none 最大化后执行
onRestore none 重置后执行
onMinimize none 最小化后执行

 

方法

名称 参数 说明
options none 返回options属性
panel none 返回panel
header none 返回panel的header对象
body none 返回panel的body对象
setTitle title 设置header的标题
open forceOpen 为true表示忽略onBeforeOpen
close forceClose 为true表示忽略onBeforeClose
destroy forceDestroy 为true表示忽略onBeforeDestroy
refresh href 刷新panel加载远程数据,若指定href,这覆盖旧的href
resize options 设置大小
move options 移动到一个新的位置
maximize none 最大化
minimize none 最小化
restore none 重置
collapse animate 折叠
expand animate 展开
展开阅读全文
打赏
0
0 收藏
分享
加载中
17
2014/03/05 15:15
回复
举报
这是啥啊
2014/03/05 15:15
回复
举报
更多评论
打赏
2 评论
0 收藏
0
分享
返回顶部
顶部