总结发布jQuery EasyUI 中文API—Layout(Panel)

Panel 【面板】

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

使用说明

HTML代码

<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;">
  内容
</div>

 

 

JavaScript代码

//创建一个面板
$('#p').panel(options);

//创建一个定义好的面板
$('#p').panel({
  title: 'My Panel',
  tools: [{
    iconCls:'icon-new',
    handler:function(){alert('new')}
  },{
    iconCls:'icon-save'
    handler:function(){alert('save')}
  }]
});

//定位
$('#p').panel('move',{
  left:100,
  top:100
});

 

特性说明

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

 

 

 

 

查看演示   官方文档