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

easyui 简单框架界面

2014-02-27 11:32 387 查看

<body class="easyui-layout">
<div data-options="region:'north',split:true" title="标题" style="height:100px; width:100px;padding:20px;" > @*北 上面  split:是否可改变大小(拖拉) padding：边界填充 *@
上面
</div>

<div data-options="region:'south',spilt:true" title="下面标题"   style="height:100px;padding:10px;background:#efefef;"> @*南 下面*@
<div class="easyui-layout" data-options="fit:true" style="background:#ccc;">  @*fit:显示边框*@
<div data-options="region:'center'">下面左边</div>
<div data-options="region:'east',split:true" style="width:200px;">下面右边</div>
</div>
</div>

<div data-options="region:'east',iconCls:'icon-reload',split:true" title="右边标题" style="width:180px;">
<ul class="easyui-tree" data-options="url:'tree_data.json'"></ul>  @*data-options="url:'tree_data.json'"？*@
右边
</div>

<div data-options="region:'west',spilt:true" title ="左边菜单" style="width:280px;padding:1px;overflow:hidden;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="菜单1" style="padding:10px;overflow:auto;">
<p>菜单1</p>
<p>菜单1</p>
</div>
<div title="菜单2"   style="padding:10px;">
菜单2
</div>
<div title="菜单3" data-options="selected:true" style="padding:10px">  @* selected:true 默认展开菜单*@
菜单3
</div>
</div>
</div>

<div data-options="region:'center'" title="主显示框" style="overflow:hidden;">  @*中间主菜单*@
<div class="easyui-tabs" data-options="fit:true,border:false">
<div title="标签1" data-options="closable:true" style="padding:20px;overflow:hidden;">
<div style="margin-top:20px;">  </div>
</div>
<div title="标签2" data-options="closable:false" style="padding:20px;"></div>  @* closable:是否带关闭 默认不带*@
<div title="标签3" data-options="closable:true" style="overflow:auto;padding:5px;">@*overflow:标签中内容超出长度处理 auto自动增长 hidden 不处理*@
<table id="tt2"></table>
</div>
</div>
</div>
</body>

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

标签：

相关文章推荐

新的分享

章节导航