JQuery EasyUi之界面设计——前言与界面效果(一)

标签: jquery easyui 界面 | 发表时间:2012-03-19 00:45 | 作者:雪雁
出处:http://www.cnblogs.com/

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。

前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主要有以下几点:

  1. 轻量级。
  2. 基本的组件都用,即“麻雀虽小五脏俱全”。
  3. 使用简洁方便,比如支持html+js。
  4. 可扩展性。
  5. 可维护性。世上没有完美的产品,而且其对IE6的兼容性还存在一些问题,但相比extjs,其还是很方便阅读和修改的。
  6. 简单性。这既是优点也是缺点。比如icon,自带的就那么几个,像我这样的懒人,就用那么几个就够了,extjs的图标选择起来都比较麻烦。如果实在不够用,就去extjs里面找几个加上。再比如组件的使用,官方文档的描述也就那么几页,使用起来,也就那么几个方法与事件,但基本够用了。
  7. 个人不喜欢固步自封,喜好使用对自己来说有点神秘和陌生的技术。
  8. extjs如一个行动不便的美妇,其脚本太庞大,对象太丰富,并且不利于维护;ext.net如一个打扮得花枝招展的裹脚的妇女,其将extjs封装成服务器控件,虽然其维护起来不错,体验不错,使用方便,但是我不喜欢使用服务器控件的这种方式,也不喜欢其包了一层有一层的外壳,调起问题来从ASP.NET到EXT.NET到extjs;而easyui,则如一个清纯的少女,从外表即可窥探内心,清秀而不失美观。
  9. 其他。

最近手上有个私活,于是就试试了。现在项目已经基本完工了。那么我就来说说EasyUi这个系列吧。由于时间有限,会分几篇说(一定会说完),而且更新时间不会固定,敬请谅解。

在此之前,先说说编写本系列的计划吧:

  1. JQuery EasyUi之界面设计——前言与界面效果(一)
  2. JQuery EasyUi之界面设计——通用的JavaScript(二)
  3. JQuery EasyUi之界面设计——母版页以及Ajax的通用处理(三)
  4. JQuery EasyUi之界面设计——代码详解(四)

下面先从界面效果开始吧。

首页

image

首页的样式是扒的官网DEMO,但是与其不同的是,其右侧是一个框架,我这里的右侧换成了一个tab,对于管理系统来说,使用tab更方便。

内容展现页面

image

上面的按钮时类型,使用的是 linkbutton实现的特效。下面区域使用的是 datagrid,查询放在顶部工具栏。

弹出窗口

image

弹出窗口可以用于新增|编辑,也可以用于其他功能,这个效果与extjs的window差不多。

新增与编辑

image

easyui的form自带验证、提交、重置与赋值,使用起来简单方便。

提示框

image image

image

本文链接

相关 [jquery easyui 界面] 推荐:

JQuery EasyUi之界面设计——前言与界面效果(一)

- - 博客园_首页
如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”. 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用,即“麻雀虽小五脏俱全”. 使用简洁方便,比如支持html+js. 世上没有完美的产品,而且其对IE6的兼容性还存在一些问题,但相比extjs,其还是很方便阅读和修改的.

jQuery EasyUI 1.3.5 发布

- - 开源中国社区最新新闻
jQuery EasyUI 1.3.5 发布,此版本修复了bugs和增加了一些改进. 下载: jquery-easyui-1.3.5.zip.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

基于jquery-easyui的仓库管理系统

- - CSDN博客Web前端推荐文章
使用jQuery EasyUI创建的仓库管理系统包括系统管理、数据维护、业务单据管理等,有兴趣可以对其进行修改扩展. 数据库采用MYSQL, 帐号/密码:root/root,演示登录帐号/密码:admin/admin. 数据库配置信息可以修改配置文件:/WEB-INF/classes/activerecord.properties.

浅析jQuery EasyUI响应式布局的实现方案

- - WebUI框架使用参考
首先解释一下本篇文章标题中提到的“jQuery EasyUI响应式布局”,这里是指EasyUI里布局类组件的fit属性,也就是实现自适应的属性. 到了1.4版本,新增了一个宽度百分比的概念,既可以用在布局类组件上,也可用在表单类组件上,但是其实现方案跟fit是类似的. 也就是说,jQuery EasyUI的自适应布局包含两块内容:.

一个关于jquery easyui crud demo 的一个例子

- - Web前端 - ITeye博客
注:这个程序jsp的源代码在这个http://www.jeasyui.com/demo/main/index.php网址的basic crud里面下载它用的是html + php 我们今天要把他改成 Java后台 struts + hibernate + ibatis. 这里是jsp代码easyui.jsp.

8个实用的页面布局和用户界面jQuery插件

- - Jackchen Design 1984
网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求. 可能一些需求不能单独使用CSS就能实现的. 于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现. 其实如果你知道一些jQuery,你会发现这些jQuery非常的好用和灵活. 在这篇文章中我们分享了一些优秀实用的jQuery插件.

吐槽一次MVC与Jq EasyUI的经历

- - 博客园_首页
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JSON各式的数据也更加方便. 但是总体上说,在公司的这次MVC经历最后的感觉还是比较失败. 个人记录下来在此做个反思,同时希望和大家一起交流,向大家学习. 首先从以上截图中, 个人就犯错了. 从整体架构上来说,项目中的授权部分(Accredit )之前是希望通过AOP的方式进行的,最后和在基础加上的AOP部分就发生了剧烈的冲突.

easyui datagrid 大数据加载效率慢,优化解决方法

- - Web前端 - ITeye博客
在使用easyui datagrid途中发现加载数据的效率真的不是一般的差. 经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60 秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.