easyui for jQuery项目地址:http://jquery-easyui.wikidot.com/
编写这个范例的目的在于介绍easyui的基本用法,这个例子中着重于介绍布局。
来看首页的布局:
<body>
<div region="north" style="background:#fafafa;color:#2d5593;height:40px;">
<div style="font-size:16px;font-weight:bold;width:400px;padding:10px 0 0 10px;">机电设备管理系统</div>
</div>
<div region="west" title="导航菜单" split="true" fit="true" style="width:150px;">
<div id="menus">
<div title="业务操作">
<table style="width:100%;">
<tr>
<td class="menu">
<a href="javascript:addTab('设备档案','device/index')">
<img src="images/print_class.png"></img><br/>
<span>设备档案</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('设备申购')">
<img src="images/kdmconfig.png"></img><br/>
<span>设备申购</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('设备维修')">
<img src="images/package_settings.png"></img><br/>
<span>设备维修</span>
</a>
</td>
</tr>
</table>
</div>
<div title="数据设置">
<table style="width:100%;">
<tr>
<td class="menu">
<a href="javascript:addTab('区域设置')">
<img src="images/package.png"></img><br/>
<span>区域设置</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('设备类别')">
<img src="images/kontact.png"></img><br/>
<span>设备类别</span>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div region="center" fit="true">
<div id="main-center">
<div title="首页" style="padding:20px;">
<img src="images/banner.gif"></img>
<div style="margin-top:20px;">
<p>该系统是一个由etmvc和easyui for jQuery技术构建的应用示例,如果您对本系统所使用的技术感兴趣,请与我们联系。</p>
<p> </p>
<p>设备管理是一款记录设备使用流程的软件,其中有设备信息录入,设备类别设置,区域信息的录制,设备的使用流程,设备使用流程中出错的处理,以及报表查询等功能。</p>
<p> </p>
<p>我们对系统进行简化,旨在说明一般功能的开发方法。</p>
</div>
</div>
</div>
</div>
</body>
我们不用写一大堆JS代码,取而代之是用基本的HTML,这对网页设计者而言是最直接最直观的。
怎样让这个布局定义发生作用,看下面的代码:
$('#menus').accordion();
$('#main-center').tabs();
$('body').layout();
用少量的代码做最多的事情,这是jQuery的风格。
设备档案表格正常显示需要配置好数据库:
1、使用MYSQL。
2、配置文件:/WEB-INF/classes/activerecord.properties
3、执行程序:http://localhost:8080/easyui-test1
来看看效果:
- 大小: 65.3 KB
- 大小: 62.3 KB
分享到:
相关推荐
在这个“基于jquery-easyui的机电设备管理系统布局新范例”中,我们将深入探讨EasyUI在机电设备管理系统的应用以及布局设计的新趋势。 首先,jQuery EasyUI的核心在于其组件化的设计理念。通过预定义的CSS样式和...
技术特点:EasyUI,JQuery,统一权限管理系统(aspx面完成显示 ashx处理所以请求) 功能描述: 商家管理:促销活动 产品管理 卡密管理 财务管理 促销商家 合作商家 慈善管理:慈善排名 慈善比例管理 奖池管理:已捐赠...
【基于jQuery EasyUI的用户管理系统】是一个典型的Web应用程序实例,它利用了jQuery EasyUI这个强大的前端框架来构建用户友好的界面,并结合后端技术(如PHP)处理数据交互。EasyUI是一个基于jQuery的UI库,提供了...
EasyUI是一套基于JQuery的前端框架,它为开发者提供了一套丰富的UI组件库,能够帮助开发者快速构建具备良好交互性的Web应用界面。它遵循简单易用的原则,使得在不需要过多编码的基础上,就可以实现复杂和多样化的...
《基于EasyUI的仓库管理系统详解》 在当今信息化社会,企业对仓库管理的效率与准确性提出了更高的要求。基于EasyUI的仓库管理系统应运而生,它利用先进的Web技术和易用的用户界面,为企业提供了一种高效、便捷的...
在这个“基于easyui做的一套管理系统”中,我们可以推测开发者利用 EasyUI 的功能创建了一个高效的企业级管理平台。 首先,EasyUI 提供了诸如对话框(dialog)、表格(datagrid)、表单(form)、下拉菜单...
基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的学生信息管理系统源码+项目说明(基本信息管理、课程信息管理、选课、考勤与签到、成绩信息管理).zip 基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的...
jQuery基于easyUi前端框架开发OA办公安全管理界面模板。包括功能菜单、权限管理、用户管理、人员管理、部门管理、角色管理、表格管理、表单管理、报表管理、统计分析、流程图、地图、日程管理等十多个界面。
EasyUI,JQuery,统一权限管理系统(aspx面完成显示 ashx处理所以请求) 商家管理:促销活动 产品管理 卡密管理 财务管理 促销商家 合作商家 慈善管理:慈善排名 慈善比例管理 奖池管理:已捐赠管理 已领取管理 待领取...
基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的学生信息管理系统源码+项目说明(基本信息管理、课程信息管理、选课、考勤与签到、成绩信息管理).zip 基于mysql5.0+servlet2.5+jsp+ajax+easyui+jquery开发的...
EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和强大的功能,使得开发者可以快速构建出美观且响应式的Web应用。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及...
《基于EasyUI+MySQL的仓库管理系统详解》 仓库管理系统的构建是企业信息化进程中不可或缺的一环,它能够有效地提升库存管理效率,减少人为错误,优化资源配置。本仓库管理系统以EasyUI和MySQL为核心技术,构建了一...
**jQuery EasyUI 机电管理系统详解** jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了丰富的用户界面组件,便于快速构建美观、响应式的 Web 应用程序。在"jquery easyui 机电管理系统demo下载"中,我们...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业...基于SSM+jQuery EasyUI开发的生产管理ERP系统源码+项目说明(高分毕设).zip
JavaEE学生管理系统与教务管理系统的实现主要基于一系列先进的技术和工具,其中包括MySQL数据库、EasyUI前端框架以及jQuery库。在本文中,我们将深入探讨这些关键组件及其在系统开发中的作用。 首先,JavaEE(Java ...
jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了一套丰富的 UI 组件库,包括按钮、表单、网格、树形结构等,可以极大地简化前端开发工作,使得开发者能够更加专注于业务逻辑的实现而无需过多地关注...
【标题】:“基于EasyUI+SpringMVC实现的文件管理系统” 在现代企业信息化管理中,文件管理系统扮演着至关重要的角色,它能够有效地组织、存储、检索和管理企业内部的各类文档,提高工作效率,保证信息的安全性。本...
《基于ASP.NET MVC4+JQuery easyui的企业管理系统开发详解》 在当今信息化时代,企业管理系统已经成为企业管理不可或缺的一部分。本文将深入探讨一个基于ASP.NET MVC4框架和JQuery EasyUI库构建的企业管理系统的...
jQuery EasyUI 是基于jQuery的一个轻量级的前端框架,它提供了一系列的JavaScript组件,如对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)等,帮助开发者快速构建用户界面。EasyUI的主要优点在于其简洁...
SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...