jQuery EasyUI API 中文文档 - Panel面板
<html><head><title>布局管理器--控制面板</title><script src="jquery-easyui/jquery.min.js"></script><script src="jquery-easyui/jquery.easyui.min.js"></script><script src="jquery-easyui/easyloader.js"></script><script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"><script>$(function (){//alert弹出框，//第一个参数是标题//第二个参数是内容//$.messager.alert('Warning','The warning message'); //2. 使用脚本创建控制面板/*$("#p1").panel({width:100,height:100,title:'嘻嘻哈哈',//标题tools:[{iconCls:'icon-save',handler:function (){alert('123')}}]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。})*///下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。/*$('#p1').panel({ href:'1.html', onLoad:function(){ alert('loaded successfully'); } });*/$('#p1').panel({width:100,height:100,title:'嘻嘻哈哈',//标题tools:[{iconCls:'icon-save',handler:function (){alert('123')}}]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。});/*options：返回选项属性。panel：返回控制面板对象。header：返回控制面板头对象。body：返回控制面板主体对象。setTitle：设置控制面板头部的标题文本。open：当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。close：当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。destroy：当参数forceDestroy设置为true时,控制面板将被打开,不受onBeforeDestroy回调函数的约束。refresh：当href属性被设置时，刷新控制面板以载入远程数据。resize：这是控制面板的尺寸并且进行布局。options对象包含以下2个属性:width： 新的控制面板宽度height： 新的控制面板高度left： 新的控制面板左边距top： 新的控制面板顶边距move：移动控制面板到一个新的位置。options对象包含以下2个属性:left： 新的控制面板左边距top： 新的控制面板顶边距maximize：使控制面板铺满整个容器。minimize：最小化控制面板。restore：使最大化的控制面板重置为其初始化时的大小和位置。collapse：折叠控制面板主体。expand：扩展控制面板主体。*/ //open,close的方法使用如下：$("#open").click(function (){$('#p1').panel('open');})$("#close").click(function (){$('#p1').panel('close');})});</script></head><body><!--2. 使用脚本创建控制面板--><div id="p1"></div><input id="close" type="button" value="关闭"><input id="open" type="button" value="开启"><!--1. 使用标签创建控制面板<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" iconCls="icon-save" closable="true" collapsible="true" minimizable="true" maximizable=true> <p>panel content.</p> <p>panel content.</p> </div> --><!--panel的属性data-options：是放easyui自带的属性和方法的title：控制面板的标题<div id="p" class="easyui-panel" title="My Panel"></div>iconCls：控制面板的图标<div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel"></div>width：控制面板的宽<div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100"></div>height：控制面板的高<div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>style：给控制面板加一个自定义样式<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>fit：设置为true时，控制面板的大小将铺满它所在的(浏览器)<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100,fit:true" ></div>border：为false时不显示边框，相反是显示，默认是true<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true" ></div>noheader：为true时控制面板头部将不被创建，相反会被创建，默认是false<div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true" ></div>content：显示控制面板里的内容<div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'" ></div>collapsible：为true时显示可折叠按钮，相反不显示，默认是fales<div id="p" class="easyui-panel" collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'" ></div>minimizable：为true时显示最小化按钮，相反不显示，默认是false<div id="p" class="easyui-panel" minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'" ></div>maximizable：为true时显示最大化按钮，相反不显示，默认是false<div id="p" class="easyui-panel" maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'" ></div>closable：为true时显示关闭按钮，相反不显示，默认是false<div id="p" class="easyui-panel" closable=true maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'" ></div>collapsed：为true时默认是折叠，相反不折叠，默认是false<div id="p" class="easyui-panel" collapsed=true></div>minimized：为true时默认是最小化的，相反是不最小化的，默认是false<div id="p" class="easyui-panel" minimized=true></div>maximized：为true时默认是最大化的，相反是不最大化的，默认是false<div id="p" class="easyui-panel" maximized=true></div>closed：为true时默认是关闭的，相反是不关闭的，默认是false<div id="p" class="easyui-panel" closed=true></div>href：载入远程数据的超链接，载入的数据将显示在控制面板中。<div id="p" class="easyui-panel" href="1.html"></div>loadingMessage：完全加载之前显示的内容<div id="p" class="easyui-panel" data-options="loadin..."></div>panel的事件onLoad：在远程数据被载入时触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onLoad:aa" > onBeforeOpen：在控制面板被打开之前触发，返回false将停止打开。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeOpen:aa" > onOpen：在控制面板被打开之后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onOpen:aa" > onBeforeClose：在控制面板被关闭之前触发，返回false将取消关闭。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeClose:aa" >onClose：在控制面板被关闭后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onClose:aa" >onBeforeCollapse：在控制面板被折叠之前触发，返回false将停止折叠。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeCollapse:aa" >onCollapse：在控制面板被折叠之后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onCollapse:aa" >onBeforeExpand：在控制面板被扩展之前触发，返回false将停止扩展。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeExpand:aa" >onExpand：在控制面板被扩展之后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onExpand:aa" >onMaximize：在控制面板被最大化后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMaximize:aa" >onMinimize：在控制面板被最小化后触发。<div id="p" class="easyui-panel" title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMinimize:aa" >--></body></html>