panel框架的用法:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<title>panel</title>
</head>
<body>
<!-- 方式一 -->
<!-- <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> -->
<!-- 方式二 -->
<div id="p" style="padding:10px;">
<p>panel content1.</p>
</div>
<script type="text/javascript">
$(function(){
$('#p').panel({
width:500,
height:150,
title:'My Panel',
tools:[{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
});
</script>
</body>
</html>
下面是关于panel文档
Properties
Name | Type | Description | Default |
---|---|---|---|
id | string | The id attribute of this panel. | null |
title | string | The title text to display in panel header. | null |
iconCls | string | A CSS class to display a 16x16 icon in panel. | null |
width | number | Set the panel width. | auto |
height | number | Set the panel height. | auto |
left | number | Set the panel left position. | null |
top | number | Set the panel top position. | null |
cls | string | Add a CSS class to the panel. | null |
headerCls | string | Add a CSS class to the panel header. | null |
bodyCls | string | Add a CSS class to the panel body. | null |
style | object | Add a custom specification style to the panel. Code example to change the panel border width: <div class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}"> </div> | {} |
fit | boolean | When true to set the panel size fit it's parent container. The example below shows a panel which can be auto resized to max inner dimensions of its parent container <div style="width:200px;height:100px;padding:5px"> <div class="easyui-panel" style="width:200px;height:100px" data-options="fit:true,border:false"> Embedded Panel </div> </div> | false |
border | boolean | Defines if to show panel border. | true |
doSize | boolean | If set to true,the panel will be resize and do layout when created. | true |
noheader | boolean | If set to true, the panel header will not be created. | false |
content | string | The panel body content. | null |
collapsible | boolean | Defines if to show collapsible button. | false |
minimizable | boolean | Defines if to show minimizable button. | false |
maximizable | boolean | Defines if to show maximizable button. | false |
closable | boolean | Defines if to show closable button. | false |
tools | array,selector | Custom tools, possible values: 1) an array, each element contains iconCls and handler properties. 2) a selector that indicating the tools The panel tools can be declared with exists <div> tag: <div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"> </div> <div id="tt"> <a href="#" class="icon-add" οnclick="javascript:alert('add')"></a> <a href="#" class="icon-edit" οnclick="javascript:alert('edit')"></a> </div> The panel tools can also be defined via array: <div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} }]"> </div> | [] |
collapsed | boolean | Defines if the panel is collapsed at initialization. | false |
minimized | boolean | Defines if the panel is minimized at initialization. | false |
maximized | boolean | Defines if the panel is maximized at initialization. | false |
closed | boolean | Defines if the panel is closed at initialization. | false |
href | string | A URL to load remote data and then display in the panel. Notice that the content will not be loaded until the panel is open and expand. This is useful to create a lazy loading panel: <div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true"> </div> <a href="#" οnclick="javascript:$('#pp').panel('open')">Open</a> | null |
cache | boolean | True to cache the panel content that loaded from href. | true |
loadingMessage | string | When loading remote data show a message in the panel. | Loading… |
extractor | function | Defines how to extract the content from ajax response, return extracted data. extractor: function(data){ var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // only extract body content } else { return data; } } |
Events
Name | Parameters | Description |
---|---|---|
onLoad | none | Fires when remote data is loaded. |
onBeforeOpen | none | Fires before panel is opened, return false to stop the open. |
onOpen | none | Fires after panel is opened. |
onBeforeClose | none | Fires before panel is closed, return false to cancel the close. The panel declared below cannot be closed. <div class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options="onBeforeClose:function(){return false}"> The panel cannot be closed. </div> |
onClose | none | Fires after panel is closed. |
onBeforeDestroy | none | Fires before panel is destroyed, return false to cancel the destroy. |
onDestroy | none | Fires after panel is destroyed. |
onBeforeCollapse | none | Fires before panel is collapsed, return false to stop the collapse. |
onCollapse | none | Fires after panel is collpased. |
onBeforeExpand | none | Fires before panel is expanded, return false to stop the expand. |
onExpand | none | Fires after panel is expanded. |
onResize | width, height | Fires after panel is resized. width: the new outer width height: the new outer height |
onMove | left,top | Fires after panel is moved. left: the new left postion top: the new top position |
onMaximize | none | Fires after the window has been maximized. |
onRestore | none | Fires after the window has been restored to its original size. |
onMinimize | none | Fires after the window has been minimized. |
Methods
Name | Parameter | Description |
---|---|---|
options | none | Return options property. |
panel | none | Return the outer panel object. |
header | none | Return the panel header object. |
body | none | Return the panel body object. |
setTitle | title | Set the title text of header. |
open | forceOpen | When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback. |
close | forceClose | When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback. |
destroy | forceDestroy | When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback. |
refresh | href | Refresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property. Code example: // open a panel and then refresh its contents. $('#pp').panel('open').panel('refresh'); // refresh contents with a new URL. $('#pp').panel('open').panel('refresh','new_content.php'); |
resize | options | Set panel size and do layout. The options object contains following properties: width: the new panel width height: the new panel height left: the new panel left position top: the new panel top position Code example: $('#pp').panel('resize',{ width: 600, height: 400 }); |
move | options | Move the panel to a new position. The options object contains following properties: left: the new panel left position top: the new panel top position |
maximize | none | Fits the panel winthin its container. |
minimize | none | Minimizing the panel. |
restore | none | Restores the maximized panel back to its original size and position. |
collapse | animate | Collapses the panel body. |
expand | animate | Expand the panel body. |