java_easyui体系之layout
一:简介
用于实现页面整体布局、将页面分成五个模块——东、西、南、北、中。其中中是与其他四块有密切关系。
二:页面源码
有layout的基本使用、其中中部内嵌一个html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'original.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
var layout;
$(function(){
layout = $('#blayout').layout();
//南部面板折叠
layout.layout('collapse', 'south');
});
//获取中间面板属性
function getCenterPanel(){
var panel =layout.layout('panel', 'center');//已经获取中央面板、可使用panel具有的属性、方法
console.info('center panel title : ' + panel.panel('options').title);
}
//展开南部面板
function expandCollapsePanel(){
layout.layout('expand','south');
}
//删除东部面板
function removeEastPanel(){
layout.layout('remove', 'east');
}
//添加东部面板、当原来的面板存在时、点击添加不会将原有面板替换掉。注意有些地方的引号别漏掉
function addEastPanel(){
layout.layout('add',{
region:'east',
width:200,
title:'East Title',
split:true,
tools: [{
iconCls:'icon-add',
handler:function(){alert('add');}
},{
iconCls:'icon-remove',
handler:function(){alert('remove');}
}]
});
}
</script>
</head>
<body id="blayout">
<div data-options="region:'north',title:'North Title',split:false" style="height:100px;">
<input type="button" value="expand" οnclick="expandCollapsePanel()">
<input type="button" value="remove" οnclick="removeEastPanel()">
<input type="button" value="add" οnclick="addEastPanel()">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
<input type="button" value="click" οnclick="getCenterPanel()">
</div>
<div data-options="region:'east',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',iconCls:'icon-save',title:'center title',href:'center.html'" style="padding:5px;background:#eee;"></div>
</body>
</html>
center.html页面:
1、center 中使用href载入的另一个页面的内容、只会载入"body"之间的内容、其他的都不会载入、更不会执行你在这个页面写入的javascript代码。<br/>
切记所以想要在layout中使用href时、最好的方法就是将被载入的页面中所有内容删掉、只关心body之间的内容.
<br/><br/>
2、他会将body中内容按照html格式解析、然后返回结果: 下面这段注释内容就不会显示 <!-- 注释内容 -->
<br/><br/>
3、注意引入的顺序:data-options="region:'center',iconCls:'icon-save',title:'center title',href:'center.html'"
这里href要放在最后、放在前面都不能正常显示。
简单说明:
1、在上面center.html页面中可以看出、基本什么标签都没有用、内嵌页面只会读取body中间的内容、其他的一概不问、
2、如果想要加入js效果、则可以将js写入到body中来实现。
三:效果图
四:注意事项
1、 可以加在div上也可以在body上、在body上一般使用fit属性、使其自适应。
2、 不一定五个一定全要有、但是center不能删
3、 border 边框线条
4、 split 是否可拖动
5、 iconCls 添加小图标
6、 href 只会载入body标签内的内容、如果想执行javascript中的内容、则可以将Javascript写在<body></body>内部
7、 注意href的载入顺序对结果的影响、使用href之后就会覆盖原有的panel中的内容。
更多内容 : java_easyui体系之目录——00