<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>