<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>
easyui 简单框架界面
最新推荐文章于 2024-01-18 04:10:25 发布