之前用jQuery mobile时看到过不少介绍jQuery Mobile的优秀文章,自己也积累了一些小技巧,本来是想把这些东西都总结起来的,但是由于东西实在太多,加上每天瞎忙,一直没有着手,那就从今天开始吧,尽量把知道的东西都列出来,也让自己巩固一下。

提前说明:这写内容有部分是从之前我看到的文章中截取的,只是想总结起来方便以后查阅。

首先先来介绍一下jQuery Mobile吧。

jQuery Mobile是一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的JS库,结合 jQuery Mobile 与 HTML5 ,可以很方便的开发出一款具有良好界面及用户体验的 Web App。从这里就知道JQM是依赖jQuery基本库的,而且这些文章中会穿插一些HTML5的新特性介绍。

JQM继承了 jQuery 轻量、方便、强大的特点,并且有着极好的移动设备支持。

jQuery Mobile 特性

支持多种平台

jQuery Mobile 支持各种平台,如主流的 Android, iOS, Nokia/Symbian, Blackberry, Windows Mobile, 还有其他如 bada, MeeGo,Palm WebOS ,因此无论是手机和平板都可以轻松的运行 jQuery Mobile 设计的 Web 程序。不过这些事官方文档里写的,目前笔者只在Android和IOS中用过,其他平台就现在移动设备的市场份额看已经不需要提供非常完善的支持了。

功能分级增强

前端设计时通过渐进增强功能来设计是一个很好的设计,因为不同的平台,不同的设备有着不同的 Web 环境,因此对于一些出色的前端效果很难保证在每台设备上都呈现相同的效果,因此与其为了在所有设备上做到一样的效果而降低整体的前端样式,不如对于好的设备可以呈现更出色的效果,而基本的效果就兼容所有的设备。jQuery Mobile 的设计也是如此,核心的功能支持所有的设备,而较新的设备则可以获得更为优秀的页面效果。

举个简单的例子,JQM1.3版本中的链接按钮,在Android2.2版本自带浏览器中显示的效果只是对基本的圆角按钮,但是在Android4.4和IOS7中会出现颜色渐变效果。

触摸方面的用户体验优化

jQuery Mobile 触摸屏方面的用户体验进行了优化,如果不借助JQM而只依赖jQuery和基础JS做移动端页面时,一些简单的动画在手机运行时很不流畅,对于触摸板的用户更是一种差的用户体验(试想一下手指划动屏幕,卡顿一下才出现效果,很不爽吧!),因此 jQuery Mobile 进行触摸屏优化无疑是个很好的用户设计。

新的布局控件

jQuery Mobile 提供了一个能适应不同设备的动态触摸 UI,其中包含基本的布局控件(列表,面板等本地控件),另外还有一套表单控件和新的 UI 插件。(说实话,个人感觉这个布局控件不是特别的好用,还是bootstrap的栅格用起来顺手一点)

主题化框架

在 jQuery Mobile 中,所有的布局和小工具都是被设计为面向对象的 css 框架,前端开发用户可以方便的去设计页面或 Web 程序的 UI ,并做出非常个性化的主题。(现在最新的ThemeRoller已经比刚开始的优化了很多并且支持到最新的JQM1.4.3版本,虽然主体代码生成后还是需要我们根据实际情况做出调整,但是毕竟已经帮我们减少了很多基本代码的工作量,相当于干了一些体力活了)