jQuery EasyUI panel 中文翻译

为什么80%的码农都做不了架构师？>>>   

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

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

示例

创建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	展开

转载于:https://my.oschina.net/bery/blog/108778