摘要:Web系统最开始是作为网页和网站载体,网页的设计从模仿纸质媒体开始,而不是从模仿桌面应用程序开始,所以在桌面应用迁移到Web端时,很多设计也是采用了网页设计的风格。其优点是采用现有技术,开发周期短,缺点是交互性和美观性差。由于JavaScript尤其是jQuery在Web前端的广泛应用,jQuery的扩展库例如EasyUI模仿了传统桌面应用的界面设计和良好的交互性,得到广泛应用。通过jQuery EasyUI实现了项目管理系统的Web前端设计,具有较好的交互性和用户友好性。
关键词:jQueryEasyUI技术;Web前端设计
EasyUI是基 于jQuery的一套网页前端布局插件,在风格上模仿了传统桌面程序的布局,具有良好的交 互性和用户友好性。在 设 计 项 目 管 理 系 统Web前端 时,除了登录界面,都采取了EasyUI技术。EasyUI有20多种布局和控件,采用了其中的5种。以下为不同页面和局部的设计:
1、项目管理系统总体布局
系统管理员登录后的界面,采 用 了EasyUI的lay-out。缺省的按东南西北中5个方位的布局如图1所示。
去掉了右侧的East,页面代码如下:
2、项目列表
项目列表位于页面的左侧(west),用 树 形 结 构(tree)来实现,如图2所示。
3、子项目布局
4、表格
涉及到项目资金或者其他适合用表格来实现的地方,EasyUI的数 据 表 格(datagrid)更美 观 实 用,而 且可以即时添加、删除和更新数据。如图3所示。
这里的数据调用采用了JSON技术,代 码 第 二 行 的url:‘datagrid_data1.json’可以代替为从数据表中取值的代码。
5、弹出对话框
对话框的布局如下:
打开和关闭对话框的JavaScript代码如下:
对打开和关闭对话框的JavaScript代码的调用方法如下:
6、结语
前端设计者从传统的网页Web转到EasyUI方式 的设计,需要一些时间来学习和适应。对于没有美工基础的程序开发人员,也 可 以 用EasyUI进行Web系统 的 前端 设 计。EasyUI封装 了jQuery和CSS的很 多 细 节,学习和使用的成本低。
参考文献
[1]汤晓 燕.基于EasyUI框架 的Web异步 树 实 现[J] .电脑编程技巧与维护,2012, 6(12):92-93.
[2]喻健,朱 三 元.基于Entity Framework和easyUI的毕业 论 文 管 理 系 统[J] .软件 工 程,2016,12(12):40-42.
[3]邓海,潘智,郭志 峰.基于MVC+EasyUI三层 架 构的权限管理模 块设计与应用[J] .柳钢科技,2017,4(2):31-33
[4]朱鹏,郭亚莎.基于EasyUI框架 的Datagrid数据 呈现[J].电子世界,2017, 3(5):165-166.(本文于2017年发表于《电脑编程技巧与维护》)