在编写网页管理工具的时候,可以使用easyui来帮助来布局。其中还有很多的比较好玩的插件。基本上能满足开发服务器管理后台。
下载
引入
在自己的html模板前面添加下面的几句话
<!-- easyui -->
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.5/themes/icon.css">
<script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.min.js">
</script>
<script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.easyui.min.js">
</script>
基本布局
参考
这个布局是将窗口分为顶,左,中,右,底。
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">Item ID</th>
<th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="60">Status</th>
</tr>
</thead>
</table>
</div>
</div>
手风琴
参考
这个控件像最早的QQ的好友界面。这个功能用于做后台管理菜单蛮好用的。
<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
<ul class="easyui-tree">
<li>
<span>Foods</span>
<ul>
<li>
<span>Fruits</span>
<ul>
<li>apple</li>
<li>orange</li>
</ul>
</li>
<li>
<span>Vegetables</span>
<ul>
<li>tomato</li>
<li>carrot</li>
<li>cabbage</li>
<li>potato</li>
<li>lettuce</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>