Jquery EasyUI 面板内布局（6）

最新推荐文章于 2022-08-23 18:03:00 发布

kaleid_liner

最新推荐文章于 2022-08-23 18:03:00 发布

阅读量987

点赞数

分类专栏： EasyUI 文章标签： easyui jquery

本文链接：https://blog.csdn.net/qq_36735409/article/details/78021502

版权

EasyUI 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

我们可以将面板进行布局。

在之前的几篇文章中，我们已经知道了如何获得一个面板，就是在一个div标签中引用一个已经写好的样式：

<div class="easyui-panel"></div>

而如果我们想要使用easyui的布局，则需要使用layout样式：

<div class="easyui-layout"></div>

一个页面的简单布局为：上、下、左、右、中，

我们可以在layout下这样来表示：

<div class="easyui-layout" data-options="fit:false">
        <div data-options="region:'north'" style="height:50px">
            top
        </div>
        <div data-options="region:'south',split:true" style="height:50px;">
            foot
        </div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;">
            right
        </div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;">
            left
        </div>
        <div data-options="region:'center'" style="padding:10px">
            center
        </div>
</div>

效果如图：

那么如果想对面板进行布局，只需要把上面的代码放入面板内部即可。如图：

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-panel" title="Nested Panel" style="width:500px;height: 300px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">
            top
        </div>
        <div data-options="region:'south',split:true" style="height:50px;">
            foot
        </div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;">
            right
        </div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;">
            left
        </div>
        <div data-options="region:'center'" style="padding:10px">
            center
        </div>
    </div>
</div>
</body>
</html>

kaleid_liner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery EasyUI 面板内布局（6）

我们可以将面板进行布局。在之前的几篇文章中，我们已经知道了如何获得一个面板，就是在一个div标签中引用一个已经写好的样式：而如果我们想要使用easyui的布局，则需要使用layout样式：一个页面的简单布局为：上、下、左、右、中，我们可以在layout下这样来表示： top
复制链接

扫一扫