当前位置： 代码迷 >> Web前端 >> jQuery EasyUI 汉语言API―Layout(Panel)
  详细解决方案

jQuery EasyUI 汉语言API―Layout(Panel)

热度：391   发布时间：2012-06-27 14:20:08.0
jQuery EasyUI 中文API―Layout(Panel)

Panel 【面板】

面板特性可以在div标签内被定义

使用说明

HTML代码
  1. <div?id="p"?class="easyui-panel"?title="标题"?icon="icon-save"?collapsible="true"?minimizable="true"?maximizable=true?closable="true"?style="width:500px;height:150px;padding:10px;background:#fafafa;">??
  2. ??内容 ??
  3. </div>??

?

?

JavaScript代码
  1. //创建一个面板 ??
  2. $('#p').panel(options); ??
  3. ??
  4. //创建一个定义好的面板 ??
  5. $('#p').panel({ ??
  6. ??title:?'My?Panel', ??
  7. ??tools:?[{ ??
  8. ????iconCls:'icon-new', ??
  9. ????handler:function(){alert('new')} ??
  10. ??},{ ??
  11. ????iconCls:'icon-save'??
  12. ????handler:function(){alert('save')} ??
  13. ??}] ??
  14. }); ??
  15. ??
  16. //定位 ??
  17. $('#p').panel('move',{ ??
  18. ??left:100, ??
  19. ??top:100 ??
  20. }); ??
  21. ??

?

特性说明

Properties

名称类型描述默认值
title string 面板标题 null
iconCls string ?icon图标样式 null
width number 设置宽度 auto
height number 设置高度 auto
left number 设置相对浏览器左边位置 null
top number 设置相对浏览器上边位置 null
cls string 添加一个面板的样式 null
headerCls string 添加一个面板head样式 null
bodyCls string 添加一个面板body样式 null
style object 添加一个自定义样式 {}
fit boolean 面板自适应父容器大小 false
border boolean 面板边框 true
doSize boolean 如果设置为真,容器被创建的时候会重新被定义大小和位置 true
collapsible boolean 定义显示可折叠按钮 false
minimizable boolean 定义显示最小化按钮 false
maximizable boolean 定义显示最大化按钮 false
closable boolean 定义显示关闭按钮 false
tools array 定制工具,每个工具可以包含两个性质： iconCls?、 handler []
collapsed boolean 定义显示收缩按钮 false
minimized boolean 初始化最小值 false
maximized boolean 初始化最大值 false
closed boolean 恢复到面板初始化状态 false
href string 远程加载链接到面板 null
loadingMessage string 加载的时候显示loading信息 Loading…

?

?

事件说明

名称参数描述
onLoad none 远程数据加载完毕
onBeforeOpen none 面板打开之前
onOpen none 面板打开之后
onBeforeClose none 面板关闭之前
onClose none 面板关闭之后
onBeforeDestroy none 面板销毁之前
onDestroy none 面板销毁之后
onBeforeCollpase none 面板收缩之前
onCollapse none 面板收缩之后
onBeforeExpand none 面板展开之前
onExpand none 面板展开之后
onResize width, height 改变面板宽度、高度
onMove left,top 面板移动的位置left，top
onMaximize none 面板最大化之后
onRestore none 面板恢复原始大小之后
onMinimize none 面板最小化之后

?

方法说明

名称参数描述
options none 返回option
panel none 返回pane object
header none 返回panel header object.
body none 返回?panel body object.
setTitle title 设置title
open forceOpen forceOpen 为true, 面板打开跳过onBeforeOpen
close forceClose forceClose为true,?面板关闭跳过 onBeforeClose
destroy forceDestroy forceDestroy?为true, 面板销毁跳过 onBeforeDestroy
refresh none 刷新面板远程加载页面
resize options 调整面板大小：width、height:、left、top
move options 移动面板：left、top
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.