【easyui学习笔记】3.easyui布局之边框布局

最新推荐文章于 2023-12-26 08:56:50 发布

apollo315

最新推荐文章于 2023-12-26 08:56:50 发布

阅读量2.5k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/autobyte/article/details/55510598

版权

EasyUI 专栏收录该内容

3 篇文章

订阅专栏

学习参考：EasyUI 为网页创建边框布局

建设稍微实用点的界面都离不开布局（layout），我们先来了解最简单的一种布局：边框布局（border layout）。

1、布局区域

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

north 区域可以用来显示网站的标语。
south 区域可以用来显示版权以及一些说明。
west 区域可以用来显示导航菜单。
east 区域可以用来显示一些推广的项目。
center 区域可以用来显示主要的内容。

东西南北中，~~国粹麻将~~，上北下南左西右东（一般平面地图的方位辨识方法），非常简单。

2、布局实例

为了应用布局（layout），您应该确定一个布局（layout）容器，然后定义一些区域。布局（layout）必须至少需要一个 center 区域，以下是一个布局（layout）实例：

<div class="easyui-layout" style="width: 400px;height: 400px">
    <div region="west" title="导航栏" style="width: 150px"></div>
    <div region="center" title="正文"></div>
</div>

试试看，点击导航栏（west区域）的三角标志，可以折叠导航栏，正文（center）区域自动扩展，是不是有点小激动，才两三行代码就可以实现如此效果，GJ！
折叠前后效果图：

折叠后
接下来就可以在具体的区域内嵌入内容了，这些内容可以和easyui完全无关，html元素即可（如文章开头提到的“学习参考”中的完整范例中的内容物，就是html+js而已），当然用easyui元素也没差了。

下面是我模仿easyui范例和现有系统，自己修改后的完整代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>border layout</title>
    <link rel="stylesheet" type="text/css" href="../../r/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../r/jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="../../r/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../r/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function showcontent(module){
            $('#content').html('您选择的是' + module + '模块！');
        }
    </script>
</head>
<body>
    <div class="easyui-layout" style="width: 400px;height: 400px">
        <div region="west" title="导航栏" style="width: 150px">
            <p>请选择一个模块</p>
            <ul>
                <li><a href="#" onclick="showcontent('基础数据')">基础数据</a></li>
                <li><a href="#" onclick="showcontent('库存管理')">库存管理</a></li>
                <li><a href="#" onclick="showcontent('生产管理')">生产管理</a></li>
                <li><a href="#" onclick="showcontent('采购管理')">采购管理</a></li>
                <li><a href="#" onclick="showcontent('质检管理')">质检管理</a></li>
            </ul>
        </div>
        <div id="content" region="center" title="正文" style="padding: 10px"></div>
    </div>
</body>
</html>