介绍几个常用的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入口开始。

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

在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界面展示

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

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

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

Phone界面展示

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

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

相关推荐