使用Easy UI进行页面的简单布局

最新推荐文章于 2024-03-05 21:07:08 发布

xcmercy

最新推荐文章于 2024-03-05 21:07:08 发布

阅读量3.4k

点赞数 2

分类专栏： Easy UI 文章标签： Easy UI 布局

本文链接：https://blog.csdn.net/cccmercy/article/details/78818079

版权

Easy UI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Easy UI进行页面布局有两种方式：标记创建布局和全局布局，标记创建布局是在div标签中设置 class=“easyui-layout”,全局布局是在body标签中设置class=“easyui-layout”。

创建全局布局

在body标签中设置class=“easyui-layout”。
对页面进行布局

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:80px;padding:20px">
    </div>
    
    <div data-options="region:'south'" style="height:30px;padding:6px">
    	XXX技术有限公司版权所有
    </div>
    
    <div data-options="region:'west',title:'Navigator',split:true" style="width:200px;padding:10px">
    	<ul id="MenuTree" class="easyui-tree"></ul>
    </div>
    
    <div data-options="region:'center'">
    	 <div id="mainTabs" class="easyui-tabs" data-options="fit:true">
    	 </div>  
    </div>
    
</body>

data-option属性中的region对应的值有north、south、west、center、east，分别对应上、下、左、中、右

title设置每一个模块的名字

split为true时，表明该模块一个拉伸改变其尺寸

3.一般在左边的模块中添加树形菜单，中间区域是在点击左边树菜单的时候动态添加一个标签页，后续介绍。

xcmercy

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Easy UI进行页面的简单布局

Easy UI进行页面布局有两种方式：标记创建布局和全局布局，标记创建布局是在div标签中设置 class=“easyui-layout”,全局布局是在body标签中设置class=“easyui-layout”。创建全局布局在body标签中设置class=“easyui-layout”。对页面进行布局 XXX技术有限公司版
复制链接

扫一扫