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自带验证、提交、重置与赋值,使用起来简单方便。

提示框

时间: 2024-09-20 09:09:03

JQuery EasyUi之界面设计——前言与界面效果(一)的相关文章

java逻辑布局-关于java界面设计的基本应用和布局

问题描述 关于java界面设计的基本应用和布局 我想知道,大体框架如何怎样去搭建一个界面,功能先不实现,具体监听器该在什么时候注册? 请大神讲讲代码的整洁和逻辑性,一般会开头定义要用的大部分组件,容器和组件之间又如何添加和运用布局管理器,本人新手,,,有的地方问的见笑了,请大神磨磨我这个新手,虚心学习-- 解决方案 iPad开发界面设计基本规范界面设计的基本技巧 解决方案二: 强烈建议使用easyUI

Visual Basic中的界面设计原则和编程技巧

在vb里,mdi(multiple document interface,多窗口程序)窗体是这样定义的:"mdi窗体作为一个程序的后台窗口,包含着mdichild属性为true的窗体".在一个vb程序中,至多只能存在一个mdi父窗体,可以有多个mdi子窗体:建立一个mdi父窗体的方法是在vb的file菜单里选择"new mdi form". 在mdi程序运行时,如果子窗口具有菜单,那么当子窗口被激活时,子窗口的菜单就会自动替换父窗口菜单:当子窗口被最小化时,在mdi

网站界面设计应该如何迎合用户操作习惯?

通 过对界面设计不同需求进行的分类以及界面设计元素对用户行为的影响,来研究用户在界面设计中所体现的重要性.交互性已经成为网络界面设计中设计追求的目 标.为了使设计满足可用性要求,全面的了解用户特征及多元化要求是十分必要的.这就需要找到正确的方法来记录和实现多元化的用户要求. 界面是人与物体互动的媒介,换句话说,界面就是设计师赋予物体的新面孔[1]. 一.界面设计的分类 (一)以功能实现为基础的界面设计. 交互设计界面最基本的性能是具有功能性与使用性,通过界面设计,让用户明白功能操作,并将作品本身

网站界面设计需要迎合用户操作习惯

中介交易 SEO诊断 淘宝客 云主机 技术大厅 通过对界面设计不同需求进行的分类以及界面设计元素对用户行为的影响,来研究用户在界面设计中所体现的重要性.交互性已经成为网络界面设计中设计追求的目标.为了使设计满足可用性要求,全面的了解用户特征及多元化要求是十分必要的.这就需要找到正确的方法来记录和实现多元化的用户要求. 界面是人与物体互动的媒介,换句话说,界面就是设计师赋予物体的新面孔[1]. 一.界面设计的分类 (一)以功能实现为基础的界面设计.交互设计界面最基本的性能是具有功能性与使用性,通过

JQuery EasyUi之界面设计——母版页以及Ajax的通用处理(三)

前面介绍过JS了,就这样个人认为还不够用. 因为JS文件是死的,无法使用服务器代码,自然不够灵活.那么通过母版页就完善了这一点.那么下面举一个例子--控件赋值. 控件赋值 前面说过easyui的form自带验证.提交.重置与赋值,那么如何利用这个赋值呢?千篇一律的写赋值代码总是那么的令人厌烦,尤其是元素比较多的时候,用反射嘛又怕别人诟病,那么就用JS来负责这一切吧. 那么如何做到通用呢?那母版页就是不错的选择. 下面贴出母版页完整代码: 1: <%@ Master Language="C#

WEBJX收集UI界面设计的Query滑块(Sliders)

文章简介:10个有效和新鲜优质jQuery滑块(Sliders) . jQuery滑块及图像画廊技术的在网站首页或组合页中的使用日渐普及,设计者们常会在界面设计中使用该技术,通过有趣的方式展示视觉内容,达到增强网页展示效果的目的. 1) Cute Slider 3D 2D Cute Slider尽可能利用浏览器最好的功能来实现3D和2D效果的Sliders.在基于webkit的浏览器使用CSS3 Transform 3D.在其它支持HTML5的浏览器,它使用canvas特性.在老的浏览器中变成2

用Eclipse进行可视化Java界面设计

设计 前言 最近,Eclipse开源项目终于推出了期待已久的Visual Editor Project(VEP).VE项目使得功能强大的eclipse平台在java开发方面又增加了一个可视化java组件开发利器.它让java开发者再也不用依赖其它的IDE产品来做GUI界面方面的工作.所有的开发,从应用程序界面到业务逻辑的开发,现在都可以在eclipse平台上完成.本文将引导开发者如何安装配置并使用Visual Editor. 关于Visual Editor 开始介绍之前,来看一个笔者用Visua

一种全新的软件界面设计方法(摘)

设计 关键字:COM MySpy IE SetUIHanlder IcustomDoc IDocHostUIHandler GetExternal 前言 作者在解决各种问题的时候喜欢首先使用C++ Builder来尝试,这篇文章也是这样,但这并不影响其他开发工具的使用者阅读,因为这都是微软的开发技术,选择什么工具并不重要,我们理解了他的原理可以使用任何工具实现同样的功能. 正文 使用过VC.Net的朋友可能知道,在VC.Net中全新提供了一种基于Web的界面设计方法,不过可能真正用到的人很少,至

19个免费的UI界面设计工具及资源

原文:http://www.oschina.net/news/16602/19-free-ui-design-tools-toolkits-and-resources-for-designers 开源中国社区刚发布了一篇<21个免费的UI界面设计工具.资源及网站>,介绍了免费的Web UI.移动UI.线框工具等.作为该文章的续篇,本文再介绍19个免费UI设计工具及资源,目的同样是帮助你通过发现新的.完美的工具来学习新的技能. 列表如下: DHTMLX DHTMLX 是一个JavaScript库