针对easyui的强大的封装功能,因此我们在实际的开发中如果运用进去的话,确实会给我们省不少事情;
针对底层的h5的进一步升华
容器的运用,使我们可以在上面达到我们任何目的,主要是以下几点,需要我们格外注意
easyui-layout easyui 布局使我们有了总体的认识
easyUi panel easyui面板 这些都是容器的体现
easyui-tabs 选项卡 的运用主要是体现在嵌套上面
easyui-datagrid的运用就是表格的运用,减少我们 写代码的时间
他有完整的后台交互功能
简单的小应用,可以看看
html>
<head>
<meta charset="utf-8" />
<!--
作者:offline
时间:2017-05-16
描述:easyui导入的js和相关css
-->
<script type="text/javascript" src="easyui/js/jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="easyui/js/jquery.easyui.min.js" ></script>
<link href="easyui/css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/themes/icon.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div align="center"><b>网医科技</b> </div>
<!--
作者:offline
时间:2017-05-16
描述:以下是关于面板的操作 主要是菜单的运用 说到底就是h5做底层,其他做容器,书写相应的内容
-->
<div style="width: 100%;">
<div class="easyui-panel" style="padding:5px;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">操作</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">编辑</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">帮助</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">关于我们</a>
</div>
<div id="mm1" style="width:150px;">
<div data-options="iconCls:'icon-undo'">撤销</div>
<div data-options="iconCls:'icon-redo'">键入</div>
<div class="menu-sep"></div>
<div>剪切</div>
<div>复制</div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div>
<span>工具箱</span>
<div>
<div>地址</div>
<div>关联</div>
<div>Navigation Toolbar</div>
<div>书签工具列</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div>全选</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
<div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
<p style="font-size:14px;color:#444;">基于easyui在\(^o^)/~的基础上进行相关的开发</p>
</div>
</div>
<div >
<div style="width:200px;float: left ;"class="easyui-tabs" id="tabs">
<div title="前尘一梦">
<table class="easyui-datagrid" title="表格布局的运用" style="width:1322px;height:250px"
toolbar="#tb" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">id</th>
<th data-options="field:'productid',width:100">用户id</th>
<th data-options="field:'listprice',width:80,align:'right'">价格</th>
<th data-options="field:'unitcost',width:80,align:'right'">最低价</th>
<th data-options="field:'attr1',width:250">相关用途</th>
<th data-options="field:'status',width:60,align:'center'">默认</th>
</tr>
</thead>
</table>
<div id="tb">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:alert('Add')">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" οnclick="javascript:alert('Cut')">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:alert('Save')">编辑</a>
</div>
</div>
<div title="未完成">
<table class="easyui-datagrid" title="表格布局的运用" style="width:1322px;height:250px"
toolbar="#tb1" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">id</th>
<th data-options="field:'productid',width:100">用户id</th>
<th data-options="field:'listprice',width:80,align:'right'">价格</th>
<th data-options="field:'unitcost',width:80,align:'right'">最低价</th>
<th data-options="field:'attr1',width:250">相关用途</th>
<th data-options="field:'status',width:60,align:'center'">默认</th>
</tr>
</thead>
</table>
<div id="tb1">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:alert('Add')">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" οnclick="javascript:alert('Cut')">剪切</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:alert('Save')">保存</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>