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

最新推荐文章于 2024-02-22 17:48:54 发布

Hello World,

最新推荐文章于 2024-02-22 17:48:54 发布

阅读量3.3k

点赞数

分类专栏： EasyUI 文章标签： easyui 布局

本文链接：https://blog.csdn.net/apollokk/article/details/78134059

版权

EasyUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用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>

Hello World,

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI Layout 显示隐藏中间区域示例

使用EasyUI的layout布局时中间区域是没有折叠功能的，有时候想要下方区域最大化只能手工拖动分隔条，不太方便，可以使用resize来调整区域的高度，达到目的。示例效果：代码：显示或隐藏EasyUI Layout Center区域 body { line-height: 30px;
复制链接

扫一扫