使用EasyUI的layout布局时中间区域是没有折叠功能的,有时候想要下方区域最大化只能手工拖动分隔条,不太方便,可以使用resize来调整区域的高度,达到目的。
示例效果:
代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示或隐藏EasyUI Layout Center区域</title>
<link href="../../Script/jquery-easyui%201.4.4/themes/icon.css" rel="stylesheet" />
<link href="../../Script/jquery-easyui%201.4.4/themes/default/easyui.css" rel="stylesheet" />
<style>
body {
line-height: 30px;
font-size: 20px;
}
</style>
</head>
<body class="easyui-layout" data-options="fit:true" style="height: 100%; margin: 0;" id="mainLayout">
<div data-options="region:'north',height:30" style="background-color: #9fcdf8; overflow: hidden;">
北方区域
<a href="javascript:void(0);" class="easyui-linkbutton"
style="margin: 3px 3px; position: absolute; right: 0px; top: 0px;"
data-options="iconCls:'layout-button-up',plain:true"
οnclick="showHideCenter(this);" title="收起中间区域"></a>
</div>
<div data-options="region:'center'">中间区域</div>
<div data-options="region:'south',height:'40%',title:'南区'">南方区域</div>
</body>
</html>
<script src="../../Script/jquery-easyui%201.4.4/jquery.min.js"></script>
<script src="../../Script/jquery-easyui%201.4.4/jquery.easyui.min.js"></script>
<script>
function showHideCenter(link) {
var spanItem = $(link).find('span.l-btn-icon');
var layoutHeight = $('#mainLayout').innerHeight();
var northHeight = $('#mainLayout').layout('panel', 'north').outerHeight();
if (spanItem.hasClass('layout-button-up')) {
spanItem.removeClass('layout-button-up').addClass('layout-button-down').attr('title', '展开已排区域');
$('#mainLayout').layout('panel', 'south').panel("resize", { height: layoutHeight - northHeight });
$('#mainLayout').layout('expand', 'south');
$('#mainLayout').layout('panel', 'center').panel("resize", { height: 0 });
} else {
spanItem.removeClass('layout-button-down').addClass('layout-button-up').attr('title', '收起已排区域');
$('#mainLayout').layout('panel', 'south').panel("resize", { height: layoutHeight / 2 });
$('#mainLayout').layout('panel', 'center').panel("resize", { height: layoutHeight / 2 });
}
$('#mainLayout').layout('resize');
}
</script>