EasyUI Layout 显示隐藏中间区域示例

来源：互联网发布：js的location方法编辑：程序博客网时间：2024/05/10 15:55

使用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"            onclick="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>

阅读全文

0 0