共计 1253 个字符,预计需要花费 4 分钟才能阅读完成。
layout
布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。两头的区域面板是必须的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也能够通过点击折叠触发器来折叠面板。布局(layout)能够嵌套,因而用户可建设简单的布局。
代码解析:
<!-- 给 div 指定 class 属性指定 easy 的 easyui-layout 款式,这样就能够通过 div 创立 easyui 的 layout -->
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<!-- 布局中如果不须要 north 这个面板,那么能够删掉这个 div-->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不须要 south 这个面板,那么能够删掉这个 div -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不须要 east 这个面板,那么能够删掉这个 div -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 布局中如果不须要 west 这个面板,那么能够删掉这个 div -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!--north,south,east,west 这几个面板都能够删掉,唯有这个 center 面板肯定不能删掉,否则应用 easyui-layout 就会出错 -->
<div data-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
</div>
树形构造
<div data-options="region:'west',title:' 菜单 ',split:true" style="width:10%;">
<ul class="easyui-tree">
<li>
<span> 商品治理 </span>
<ul>
<li> 商品新增 </li>
<li> 商品批改 </li>
<li>
<span> 商品删除 </span>
<ul>
<li> 删除 1 </li>
<li> 删除 2 </li>
</ul>
</li>
</ul>
</li>
<li>
<span> 商品题目 </span>
</li>
</ul>
</div>
能够借助一些插件
正文完