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

简介: 如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择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之界面设计——代码详解(四)

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

首页

image

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

内容展现页面

image

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

弹出窗口

image

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

新增与编辑

image

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

提示框

imageimage

image

目录
相关文章
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
79 0
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
137 0
|
JavaScript 前端开发
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
2047 0
|
JavaScript 前端开发 开发者
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
1783 0
fbh
|
JavaScript
基于Jquery easyui 选中特定的tab并更新
原文:http://www.cnblogs.com/bohanfu/p/5802138.html  获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡。
fbh
1043 0
|
前端开发 JavaScript .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之五--模块(菜单)管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/17074343 使用J...
1077 0
|
JavaScript 前端开发 .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之四--组织机构管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/14102147 使用J...
1119 0
|
JavaScript 前端开发 .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/12613953 使用J...
941 0
|
前端开发 JavaScript .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/12616775 使用J...
975 0
|
JavaScript 前端开发 .NET
使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/11926719   使...
1080 0