您的位置：首页 > 产品设计 > UI/UE

Easyui简单布局

2015-11-22 17:33 549 查看

1.创建布局

创建布局只需要添加 'easyui-layout' class 到 <div> 标记或者

在整个页面创建布局，即<body class="easyui-layout"></body>

<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">logo</div>
<div data-options="region:'west',split:true,title:'导航菜单'" style="width:200px;">
<!--fit属性很重要当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器-->
<div class="easyui-accordion" fit="true" style="width:200px;height:auto;">
<div title="权限管理" selected="true" style="overflow:auto;height:auto;">

</div>
<div title="系统管理" style="padding:10px;">

</div>

</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">footer</div>
<div data-options="region:'center',title:'我的桌面'"></div>
</body>

View Code
2.效果

3.常用属性

1.data-options 对easyui组件的属性设值

2.title 布局面板（layout panel）的标题文本

3.region 定义布局面板（layout panel）的位置，有：north、south、east、west、center

4.border 是否显示边框

5.iconCls 在面板（panel）头部显示一个图标的 CSS class

6.collapsible 是否显示可折叠按钮

还有其他就不写了参考

http://www.jeasyui.net/plugins/162.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航