<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Layout（布局）</title> <meta http-equiv="keywords" content="学习,IT学习,好好学习"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 --> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body> <!-- 布局 --> <div id="layoutID" style="700px;height:500px" class="easyui-layout" data-options="fit:true"> <!-- 区域面板--北边 --> <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div> <!-- 区域面板--南边 --> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <!-- 区域面板--东边 --> <div data-options="region:'east',iconCls:'icon-reload',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:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> </div> <script type="text/javascript"> //easyui调用方法的语法如下：$('selector').组件名('method',parameter); //浏览器加载jsp页面时触发 $(function(){ //将北边折叠 $('#layoutID').layout('collapse','north'); //休息3秒 window.setTimeout(function(){ //将南边折叠 $("#layoutID").layout("collapse","south"); //将北边展开 $('#layoutID').layout('expand','north'); window.setTimeout(function(){ //将南边展开 $("#layoutID").layout("expand","south"); },3000); },3000); }); </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Layout（布局）</title> <meta http-equiv="keywords" content="学习,IT学习,好好学习"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 --> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body class="easyui-layout"> <!-- 区域面板--北边 --> <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div> <!-- 区域面板--南边 --> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <!-- 区域面板--东边 --> <div data-options="region:'east',iconCls:'icon-reload',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:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> <script type="text/javascript"> //easyui调用方法的语法如下：$('selector').组件名('method',parameter); //浏览器加载jsp页面时触发 $(function(){ //将北边折叠 $('#layoutID').layout('collapse','north'); //休息3秒 window.setTimeout(function(){ //将南边折叠 $("#layoutID").layout("collapse","south"); //将北边展开 $('#layoutID').layout('expand','north'); window.setTimeout(function(){ //将南边展开 $("#layoutID").layout("expand","south"); },3000); },3000); }); </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Layout（布局）</title> <meta http-equiv="keywords" content="学习,IT学习,好好学习"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 --> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body> <div id="layoutID" class="easyui-layout" data-options="fit:true"> <!-- 北 --> <div data-options="region:'north'" style="height:100px"></div> <!-- 中 --> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <!-- 西 --> <div data-options="region:'west'" style="200px"></div> <!-- 中 --> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <!-- 北 --> <div data-options="region:'north'" style="height:100px"></div> <!-- 中 --> <div data-options="region:'center'"></div> </div> </div> </div> </div> </div> </body> </html>