JQuery EasyUi之界面设计——前言与界面效果（一）

若是冯巩的开场白是“观众朋友们，我想死大家了”，那么个人开场白是“最近一直很忙，好久没有发文了”。

前面说过了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之界面设计——代码详解（四）

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

首页

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

内容展示页面

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

弹出窗口

弹出窗口能够用于新增|编辑，也能够用于其余功能，这个效果与extjs的window差很少。

新增与编辑

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

提示框