<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({ 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({ 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="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="100"></div> height：控制面板的高 <div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="100,height:100"></div> style：给控制面板加一个自定义样式 <div id="p" class="easyui-panel" style="100" iconCls="icon-save" title="My Panel" data-options="100,height:100"></div> fit：设置为true时，控制面板的大小将铺满它所在的(浏览器) <div id="p" class="easyui-panel" style="100" iconCls="icon-save" title="My Panel" data-options="100,height:100,fit:true" ></div> border：为false时不显示边框，相反是显示，默认是true <div id="p" class="easyui-panel" style="100" iconCls="icon-save" title="My Panel" border=true data-options="100,height:100,fit:true" ></div> noheader：为true时控制面板头部将不被创建，相反会被创建，默认是false <div id="p" class="easyui-panel" noheader=true style="100" iconCls="icon-save" title="My Panel" border=true data-options="100,height:100,fit:true" ></div> content：显示控制面板里的内容 <div id="p" class="easyui-panel" noheader=true style="100" iconCls="icon-save" title="My Panel" border=true data-options="100,height:100,fit:true content:'xixihaha'" ></div> collapsible：为true时显示可折叠按钮，相反不显示，默认是fales <div id="p" class="easyui-panel" collapsible=true noheader=true style="100" iconCls="icon-save" title="My Panel" border=true data-options="100,height:100,fit:true content:'xixihaha'" ></div> minimizable：为true时显示最小化按钮，相反不显示，默认是false <div id="p" class="easyui-panel" minimizable=true collapsible=true noheader=true style="100" iconCls="icon-save" title="My Panel" border=true data-options="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="100" iconCls="icon-save" title="My Panel" border=true data-options="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="100" iconCls="icon-save" title="My Panel" border=true data-options="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="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="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="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="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="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="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="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="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="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="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="500,height:500,onMinimize:aa" > --> </body> </html>