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

野性酷女 2022-08-12 00:26 132阅读 0赞

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

前面说过了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][]][image 1]

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

# 内容展现页面 #

[![image][image 2]][image_image 2]

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

# 弹出窗口 #

[![image][image 3]][image_image 3]

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

# 新增与编辑 #

[![image][image 4]][image_image 4]

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

# 提示框 #

[![image][image 5]][image_image 5][![image][image 6]][image_image 6]

[![image][image 7]][image_image 7]

作者： [雪雁][Link 1]  
出处： [http://www.cnblogs.com/codelove/][Link 1]  
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。  
**静听鸟语花香，漫赏云卷云舒。**

[image]: /images/20220810/5d41ef2bc26e4b228e0bc3aafb30e4de.png
[image 1]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044477989.png
[image 2]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044495613.png
[image_image 2]: /images/20220810/da0192641d474b9081570250a1990de7.png
[linkbutton]: http://www.jeasyui.com/documentation/linkbutton.php
[datagrid]: http://www.jeasyui.com/documentation/datagrid.php
[image 3]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044495646.png
[image_image 3]: /images/20220810/6e0218e52de24713aba47849a27c2afc.png
[image 4]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044491775.png
[image_image 4]: /images/20220810/fbfa3efc8a5e43a797195b3906d9015d.png
[image 5]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044509649.png
[image_image 5]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044505712.png
[image 6]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044501318.png
[image_image 6]: /images/20220810/346df19eac51411c8799edc1ed44af8c.png
[image 7]: http://images.cnblogs.com/cnblogs_com/codelove/201203/201203190044503303.png
[image_image 7]: /images/20220810/9b68c45141d2411f9d434de0c7a44703.png
[Link 1]: http://www.cnblogs.com/codelove/