EasyUI 面板

  面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。

1、用法

（1）、通过标记创建面板（Panel）

从标记创建面板（Panel）更容易。把 'easyui-panel' class 添加到 <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')}    }]});

（3）、移动面板（Panel）

调用 'move' 方法把面板（Panel）移动到新位置。

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

（4）、加载内容

让我们通过 ajax 加载面板（panel）内容并且当加载成功时显示一些信息。

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

2、属性

名称

类型

描述

默认值

id

string

面板（panel）的 id 属性。

null

title

string

显示在面板（panel）头部的标题文字。

null

iconCls

string

在面板（panel）里显示一个 16x16 图标的 CSS class。

null

width

number

设置面板（panel）的宽度。

auto

height

number

设置面板（panel）的高度。

auto

left

number

设置面板（panel）的左边位置。

null

top

number

设置面板（panel）的顶部位置。

null

cls

string

给面板（panel）添加一个 CSS class。

null

headerCls

string

给面板（panel）头部添加一个 CSS class。

null

bodyCls

string

给面板（panel）主体添加一个 CSS class。

null

style

object

给面板（panel）添加自定义格式的样式。

{}

fit

boolean

当设置为 true 时，面板（panel）的尺寸就适应它的父容器。下面的实例演示了

自动调整尺寸到它的父容器的最大内部尺寸的面板（panel）。

false

border

boolean

定义了是否显示面板（panel）的边框。

true

doSize

boolean

如果设置为 true，创建时面板（panel）就调整尺寸并做成布局。

true

noheader

boolean

如果设置为 true，面板（panel）的头部将不会被创建。

false

content

string

面板（panel）主体内容。

null

collapsible

boolean

定义是否显示折叠按钮。

false

minimizable

boolean

定义是否显示最小化按钮。

false

maximizable

boolean

定义是否显示最大化按钮。

false

closable

boolean

定义是否显示关闭按钮。

false

tools

array,selector

自定义工具组，可能的值：
1、数组，每个元素包含 iconCls 和 handler 两个属性。
2、选择器，指示工具组。
面板（panel）工具组可通过已存在 <div> 标签声明

面板（panel）工具组可通过数组定义

[]

collapsed

boolean

定义初始化面板（panel）是不是折叠的。

false

minimized

boolean

定义初始化面板（panel）是不是最小化的。

false

maximized

boolean

定义初始化面板（panel）是不是最大化的。

false

closed

boolean

定义初始化面板（panel）是不是关闭的。

false

href

string

一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非

面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板

（panel）很有用

null

cache

boolean

设置为 true 就缓存从 href 加载的面板（panel）内容。

true

loadingMessage

string

当加载远程数据时在面板（panel）里显示一条信息。

Loading…

extractor

function

定义如何从 ajax 响应中提取内容，返回提取的数据。

 

3、事件

名称

参数

描述

onLoad

none

当远程数据被加载时触发。

onBeforeOpen

none

面板（panel）打开前触发，返回 false 就停止打开。

onOpen

none

面板（panel）打开后触发。

onBeforeClose

none

面板（panel）关闭前触发，返回 false 就取消关闭。下面声明的面板（panel）不会关闭。

onClose

none

面板（panel）关闭后触发。

onBeforeDestroy

none

面板（panel）销毁前触发，返回false就取消销毁。

onDestroy

none

面板（panel）销毁后触发。

onBeforeCollapse

none

面板（panel）折叠前触发，返回false就停止折叠。

onCollapse

none

面板（panel）折叠后触发。

onBeforeExpand

none

面板（panel）展开前触发，返回false就停止展开。

onExpand

none

面板（panel）展开后触发。

onResize

width, height

面板（panel）调整尺寸后触发。
width：新的外部宽度
height：新的外部高度

onMove

left,top

面板（panel）移动后触发。
left：新的左边位置
top：新的顶部位置

onMaximize

none

窗口最大化后触发。

onRestore

none

窗口还原为它的原始尺寸后触发。

onMinimize

none

窗口最小化后触发。

 

4、方法

名称

参数

描述

options

none

返回选项（options）属性（property）。

panel

none

返回外部面板（panel）对象。

header

none

返回面板（panel）头部对象。

body

none

返回面板（panel）主体对象。

setTitle

title

设置头部的标题文本。

open

forceOpen

当 forceOpen 参数设置为 true 时，就绕过 onBeforeOpen 回调函数打开面板（panel）。

close

forceClose

当 forceClose 参数设置为 true 时，就绕过 onBeforeClose 回调函数关闭面板（panel）。

destroy

forceDestroy

当 forceDestroy 参数设置为 true 时，就绕过 onBeforeDestroy 回调函数销毁面板（panel）。

refresh

href

刷新面板（panel）加载远程数据。如果分配了 'href' 参数，将重写旧的 'href' 属性。

resize

options

设置面板（panel）尺寸并做布局。Options 对象包含下列属性：
width：新的面板（panel）宽度
height：新的面板（panel）宽度
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置

move

options

移动面板（panel）到新位置。Options 对象包含下列属性：
left：新的面板（panel）左边位置
top：新的面板（panel）顶部位置

maximize

none

面板（panel）适应它的容器的尺寸。

minimize

none

最小化面板（panel）。

restore

none

把最大化的面板（panel）还原为它原来的尺寸和位置。

collapse

animate

折叠面板（panel）主体。

expand

animate

展开面板（panel）主体。

 

5、实例

（1）、基础面板

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0 10px 0;"><a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a><a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a></div><div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div></body></html>

 

 

（2）、面板工具

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0 10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand',true)">Expand</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a></div><div class="easyui-panel" style="height:350px;padding:5px;"><div id="p" class="easyui-panel" title="Panel Tools" style="width:600px;height:200px;padding:10px;"data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div></div></body></html>

 

（3）、用户面板工具

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0 10px 0;"></div><div class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:200px;padding:10px;"data-options="iconCls:'icon-save',closable:true,tools:'#tt'"><p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div id="tt"><a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a><a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a><a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a><a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a></div></body></html>

 

（4）、载入面板内容

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0 10px 0;"></div><div id="p" class="easyui-panel" title="Load Panel Content" style="width:700px;height:200px;padding:10px;"data-options="tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh', '_content.html');}}]"></div></body></html>

 

（5）、面板尾部

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0 10px 0;"></div><div class="easyui-panel" title="Panel Footer" style="width:700px;height:200px;" data-options="footer:'#footer'"></div><div id="footer" style="padding:5px;">Footer Content.</div></body></html>