介绍几个常用的jquery ui框架!

 jQuery ui框架很多，除了官方提供的jquery UI（如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用），还有很多第三方提供的ui框架，因官方提供的jquery ui框架体积较大，所以很多人都不喜欢用，但不论是官方提供还是第三方提供，他们都是基于jquery核心类库实现的ui框架。
    1、jQuery Smart UI 

官网地址http://smartui.chinamzz.com JQuery Smart UI是基于JQuery的Ajax开发的一个jquery ui框架，实现前、后台分离、功能和数据分离，UI层全部使用htm+js+json完成，通过一个统一数据接口与服务端进行数据交换。下载地址http://dl.dbank.com/c0dxum4xi9
    2、Liger UI框架 

官网地址http://www.ligerui.com/， LigerUI是基于jQuery开发的一系列控件组组成的jquery ui框架，包括表单、布局、表格等等常用UI控件 使用LigerUI可以快速创建风格统一的界面效果，下载地址http://ligerui.googlecode.com/
    3、DWZ富客户端框架(jQuery RIA framework)

 地址http://code.google.com/p/dwz/，DWZ富客户端框架是中国人自己开发的基于jQuery实现的Ajax RIA开源jquery ui 框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。DWZ支持用html扩展的方式来代替javascript代码, 基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化.国内很多程序员javascript不熟, 大大影响了开发速度. 使用DWZ框架自动邦定javascript效果. 不需要开发人员去关心javascript怎么写, 只要写标准html就可以了. DWZ简单扩展了html标准, 给HTML定义了一些特别的class 和attribute. DWZ框架会找到当前请求结果中的那些特别的class 和attribute, 并自动关联上相应的js处理事件和效果.DWZ基于jQuery可以非常方便的定制特定需求的UI组件, 并以jQuery插件的形式发布，下载地址http://code.google.com/p/dwz/downloads/list
    4、angela UI

 官方地址 http://code.google.com/p/angela/，angela UI 是基于jQuery的UI,最新版本0.7.1，新增tree, grid, scrollBar, tip等，服务器开启gzip压缩，jquery.angela.min.js：30KB,jquery.angela.min.css：6KB。示例下载包http://angela.googlecode.com/files/angela_0.7.1.zip
以上是目前知道的几个jQuery UI框架，如何还有其他的框架请留言，这里是官方的jquery ui的下载地址请点击此处，jquery ui下载

 

参考博客

http://blog.csdn.net/jiweigang1/article/category/890878/2

http://blog.163.com/zcy4123@126/blog/static/155255877201251402039271/

 

开始转型做HTML5移动开发

CSDN：你是什么时候开始转型做HTML5移动项目开发的？目前作品有哪些？

张慧华：大概去年11月份，公司要在绿色建筑能耗和碳排放软件的Web基础上开发一套手机离线App版本，主要包括数据采集、计算（能耗、碳排放、改进建议、改进成本，改进后能耗、碳排放等等）和上传同步到服务器。

因为考虑到要支持iOS、Android和Window Phone等平台，所以就考虑用HTML5做跨平台解决方案。刚开始用jQuery Mobile开发了一个版本，大概有几百个字段，卡的不行，特别是安卓下面特别卡，于是就开始换Sencha Touch。

目前开发了两款HTML5行业应用软件，主要是 Sencha Touch + PhoneGap （HTML5 + 离线数据存储应用）。现在都已经用于生产环境，并发布到App Store，有兴趣的朋友可以下载看看（应用一： 下载地址应用二： 下载地址）。

CSDN：能不能就其中一个项目分析下项目源码，分享HTML5如何开发，调试和最终发布到App Store的过程？

张慧华：以这个plug-heat-bleed-calculator项目为例（Sencha Touch），代码MVC结构，从app.js入口开始。

在Sencha Touch标准版本基础上，做了以下调整：

 

• 扩展Sencha Model类validations验证，实现自定义表单验证
• 添加自定义表单组件SegmentedField，用法如下：

 

1 2 3 4 5 6 7 8 9 10 11 12

{          xtype: 'segmentedfield' ,          name : 'builtForm' ,          label: '二手房类型' ,          required: true ,          options: [              {value:1, text: "楼房" },              {value:2, text: "平房" },              {value:3, text: "公寓" },              {value:4, text: "复式" }          ]      }

 

 

• 修正Sencha Touch chart图表使用渐变效果后，legend 颜色消失问题

平板和手机自动判断区分界面布局：

 

Tablet界面展示

 

 

Phone界面展示