<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ //返回指定面板 console.log($("#box").layout("panel","north")); //设置指定面板折叠 $("#box").layout("collapse","north"); //设置指定面板展开 $("#box").layout("expand","north"); //重新调整布局和大小 $(document).click(function(){ $("#box").layout().css("display",'none'); //alert(); //$("#box").layout().css("display",'block'); $("#box").layout("resize"); }); //删除指定面板 $("#box").layout("remove","north"); //添加新面板 $("#box").layout("add",{}); }); </script> </head> <body> <div id="box" class="easyui-layout" style="600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北</div> <!-- region : 面板的位置 title : 布局面板的标题 split ：用户可以通过分割面板改变面板的大小 iconCls ： 一个包含图标的css类的ID href: 读取远程数据的url collapsible : 定义是否显示可折叠按钮 minWidth minHeight maxWidth maxHeight --> <div data-options="region:'south',title:'South Title',split:true,collapsible: false" style="height:100px;">南方</div> <div data-options="region:'east',title:'East',split:true" style="100px;">东方</div> <div data-options="region:'west',title:'West',split:true" style="100px;">西方</div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">中部</div> </div> </body> </html>