基于easyui的相关问题讨论续
来源：互联网 发布：软件界面设计 编辑：程序博客网 时间：2024/06/06 14:03
针对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" onclick="javascript:alert('Add')">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="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" onclick="javascript:alert('Add')">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">剪切</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">保存</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 基于easyui的相关问题讨论续
- easyui相关的问题
- 邮局问题的相关讨论
- 计算列相关问题的讨论
- 主要讨论hadoop相关的问题
- 索引相关问题讨论
- 处理问题的思路，基于easyui
- jQuery EasyUI相关问题
- TI论坛上的ZigBee相关问题讨论
- 基于结构体sizeof的字节对齐问题讨论
- easyui的相关经验
- 关于static的相关讨论：
- 基于wpf的相关设计问题-ViewModel
- [技术讨论]讨论问题的两个基本原则
- 基于easyui的验证扩展
- 基于easyui的界面扩展
- Java可变参数讨论与重写，重载的相关讨论
- 关于NP，NP-hard，P，NPC等相关问题的讨论【转帖】
- 数据结构与算法分析 P86 Stack 栈的实现
- 使用pyInstaller打包py文件
- zookeeper(二) java客户端api的使用
- 如何使用windebug追踪ASL CODE
- Ubuntu 14.04 + OpenCV 3.2+PCL 1.7环境配置
- 基于easyui的相关问题讨论续
- swift 恒等于运算符使用说明(swift identical)
- JavaScript学习
- [opencv]opencv中的坐标系问题
- nvme_queue_scan 分析
- LeetCode练习<六> 相关排序
- Win10下IIS配置图解、MVC项目发布图解、IIS添加网站图解
- windows环境下node.js环境搭建
- uboot中关于LCD的代码分析
