<!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="width: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="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:\'west\',title:\'West\',split:true" style="width: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="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:\'west\',title:\'West\',split:true" style="width: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="width: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>