jQuery Mobile 1.0 开发跨平台移动应用


jQuery Mobile 支持到 jQuery Mobile 1.0 正式版 基于 HTML5 兼容几十种最流行移动平台 内容同步更新发布 陆明 编著 CatchException.NET 开发跨平台移动应用 前言 jQuery Mobile 并不是一个特别高深的学问,却是有用而富于技巧性的一种技术。通过 这种技术可以快速开发出来能在 iPhone, iPad, Android, Windows Phone 等多种平台上使用 的移动应用。在工程师和创业成本越发成为紧俏,网络基础设施越来越便宜的今天,这可能 是一种值得探讨与尝试的技术方向。 我并没有特别才华适合在某个艰深而富有智慧的领域将知识与经验来奉献给和我一样年 轻的工程师们。不是不想,而是深知自己知识和能力的浅薄。所以选择一些有趣而或许有用 的技术,将自己粗陋的理解和实践也杂糅其中。希望能以此砖头引得众多智慧头脑过来批判 指导,对内容的批判也是对我能力的提升。 当我起笔到草稿完成的几周时间,我注意到 jQuery Mobile 已经在西方有了很多印刷出 版物,并在相关技术领域图书排行榜中处于 Top 排行榜中。西方移动应用工程师们也正在 对这个技术展开热烈讨论。国内却也有了很多专门的技术博客文章和论坛,就其中使用方法 和应用场景进行专业的讨论。只是,系统化的整理和使用中文将这个技术介绍出来,似乎还 不多见到。作为一种新产生的技术,我想到十几年前当我开始学习 Delphi 1.0 和 Microsoft C++ 时候的场景,那个时候 Visual Studio 还没有现在这么发达,技术资料也很少。作为年 轻人的我,如果能有一些可用而易用的技术资料,或许能节省我很多摸索的时间。也基于此 段经历,我用一些笨功夫将 jQuery Mobile 技术中自认为可能会比较有价值的信息整理出来, 写成这个东西。如果能对于国内移动应用开发或者移动 Web 应用社区能带来一点些许帮助, 或者对于年轻的工程师们的学习能节省些许时间,于我就是一件很开心的事情了。 写作期间,我曾经在四姑娘山脚下的日隆镇小住。 一天,我骑马近 10 个小时,高原反应和颠簸让我发烧而浑身酸痛。在藏族本地人淳朴、 善良和辛劳的帮助之下,我才有幸深入期间欣赏山中景色。不管冷杉林,红杉林或者高原草 甸,堰塞湖,都是震撼我既往的经验。这段经历给我很大启示,扩大心胸,放眼长远,平和 坚韧,脚踏实地,经历崎岖艰难却能欣赏别一番景色。封面照片摄影于其中一天清晨,太阳 尚未升起,白塔旁边群山之上一个孤独的红衣登山者已经在向上攀登。而在雪山之上还有两 处登山者的营地,一些人已经在前一天感到与此幕天席地享受雪山高原。这些地方都在大概 海拔 4000 米上下。他们的坚持与坚毅,是每次我看到此照片,对我的鼓励。 将这样照片作为准备进入移动应用开发新领域的工程师们共同分享。 小经验 CatchException.NET 是一个旨在帮助工程师提升技 术能力,分享专业知识,建立专业领域人脉与口碑 的技术社区。 您在技术开发与实践领域,如果有所体验、感悟、 探讨、思辨可以通过这个平台与工程师们进行互动 交流。 CatchException.NET 也会经常举办线下技术沙龙和 交流活动。您可以将感兴趣的技术沙龙话题发送到 webmaster@catchexception.net 于我们分享。 jQuery Mobile 是一个发展很快的技术。过去这几个月,几乎每个月都有发展。到今天 已经发展到 1.0 版本,正式版本破茧而出。 相信未来还会有持续的更新。这本电子书也会在未来不断发展和完善。如果您有对于这 部分内容的理解和批判,也希望能指点给我。我很愿意将有价值的经验融入到未来的内容中, 以丰富和完善,并给未来工程师们更多的有价值的资料。 CatchException.NET 创始人 陆明 2011 年 11 月 23 日 第 2 页 目录 目录 第 1 章 jQuery Mobile 概述 ·····································1 1.1. 本地应用还是 Web 应用 ····················································1 1.2. jQuery Mobile 兼容的移动平台 ············································3 1.3. 其他的 Web 应用开发框架 ·················································4 1.3.1. Sencha Touch ···································································· 4 1.3.2. iUI ·················································································· 5 1.3.3. jQTouch ··········································································· 5 1.3.4. iWebKit ············································································ 5 1.4. 不适合的场景 ································································6 第 2 章 框架初探 ··················································7 2.1. jQuery Mobile 框架组成 ····················································7 2.2. 第一个程序 ···································································8 2.2.1. 开发前的准备 ····································································· 8 2.2.2. Hello World! ······································································ 9 2.3. jQuery Mobile 与 HTML5 ················································· 12 第 3 章 页面与对话框 ·········································· 14 3.1. 单页与多页模版 ···························································· 14 3.2. 页面标题 ···································································· 18 3.3. 链接到内部页面或外部页面 ············································· 18 3.4. 对话框建立,关闭 ························································· 21 3.5. 切换方式美化 ······························································ 22 3.6. 页面风格美化 ······························································ 24 第 3 页 目录 3.7. 自定义风格的用户界面 ··················································· 28 3.7.1. 使用 ThemeRoller 自定义 Theme 风格 ······································ 29 3.7.2. 导入与导出自定义样式 ························································ 30 3.7.3. 通过 Inspector 快速定义颜色 ················································· 31 第 4 章 页面布局与内容呈现 ·································· 32 4.1. 基本页面布局 ······························································ 32 4.2. 分栏与网格布局 ···························································· 37 4.3. 集成自定义 CSS ···························································· 44 第 5 章 按钮 ····················································· 45 5.1. jQuery Mobile 的按钮 ····················································· 45 5.2. 内置按钮样式 ······························································ 47 5.3. 按钮图标 ···································································· 48 5.4. 按钮组 ······································································· 50 5.5. 选项、方法和事件 ························································· 51 5.5.1. 选项 ··············································································· 52 5.5.2. 方法 ··············································································· 53 5.5.3. 事件 ··············································································· 53 第 6 章 导航工具栏 ············································· 55 6.1. 导航工具栏 ································································· 55 6.2. 头部工具栏 ································································· 56 6.3. 脚注工具栏 ································································· 57 6.4. 导航工具条 ································································· 58 6.5. 导航栏位置 ································································· 61 6.6. 导航内容高亮 ······························································ 62 第 7 章 列表视图 ················································ 63 7.1. 基本列表 ···································································· 63 7.2. 嵌套列表 ···································································· 65 第 4 页 目录 7.3. 数字列表 ···································································· 67 7.4. 分立按钮列表 ······························································ 68 7.5. 缩略图列表 ································································· 69 7.6. 列表图标与气泡提示 ······················································ 71 7.7. 检索列表内容 ······························································ 72 7.8. 列表性能测试 ······························································ 74 第 8 章 表单 ····················································· 76 8.1. HTML5 表单 ································································ 76 8.2. 表单提交 ···································································· 77 8.3. jQuery Mobile 表单样式 ·················································· 77 8.4. 表单风格 ···································································· 78 8.5. 浏览器原生样式 ···························································· 79 8.6. 输入框 ······································································· 79 8.7. 开关按钮 ···································································· 80 8.8. 无线按钮 ···································································· 81 8.9. 复选按钮 ···································································· 83 8.10. 滑动条 ······································································· 84 8.11. 选择菜单 ···································································· 85 8.12. 表单元素禁用 ······························································ 87 8.13. 隐藏标签 ···································································· 89 8.14. 选项、方法和事件 ························································· 91 8.14.1. 选项 ··············································································· 92 8.14.2. 方法 ··············································································· 92 8.14.3. 事件 ··············································································· 92 附录 A. 答疑资源 ················································ 94 文档 ··············································································· 94 问答 ··············································································· 94 第 5 页 目录 沙龙 ··············································································· 94 讲座 ··············································································· 95 附录 B. 升级计划 ················································ 96 第 1 页 jQuery Mobile 概述 第1章 jQuery Mobile 概述 jQuery Mobile 是一套基于 jQuery 的移动应用开发框架。开发工程师可以将应用托管在 Web 服务器上,智能手机或者平板电脑访问使用 jQuery Mobile 所开发的应用的时候,尽管 是基于浏览器访问,从用户界面和操作体验上却和通常的本地应用程序非常接近。 jQuery Mobile 开发者投入很大精力在支持更多的兼容的移动设备浏览器,良好的运行速度 与统一而灵活的用户体验。一处开发,随处运行,是这种移动应用开发框架的共同特点。 在使用 jQuery Mobile 之前,很多开发工程师可能已经使用 jQuery 或 jQuery UI 进行网站 应用开发。jQuery Mobile 与 jQuery UI 都是基于 jQuery 框架提供相应的界面和解决方案。 不同的是,jQuery Mobile 是面向移动平台,而 jQuery UI 是面向桌面应用的。虽然一些 jQuery UI 应用也可以运行于 Android 或者 iPhone 手机上,但 jQuery Mobile 从界面到操 作方式更多面向移动应用进行优化,所以用户体验更好。 通常熟悉 jQuery 或 jQuery UI 的工程师可以非常方便的基于已有经验而将应用迁移到 jQuery Mobile 上来。值得指出的是,在桌面 Web 应用开发 JavaScript 库中,jQuery 是当 前市场占有率最高的框架。可以预见,大量软件工程师将可以通过 jQuery Mobile 迅速开发 高质量跨平台移动应用。 1.1. 本地应用还是 Web 应用 Web 应用开发是一种有趣的尝试。软件开发团队将不需要在不同移动操作系统和移动设备 之间为能兼容而重复进行开发。例如,在 Apple 环境下使用 iOS 的应用,在 Android 平台 下使用 Java 又重复开发一遍,而这些应用如果需要运行在 Windows Phone 环境下,则又 在这一章我们将会了解, ・ jQuery 的基本概念 ・ jQuery,jQuery Mobile 和 jQuery UI 之间的关系。 ・ 使用 Web 应用方式开发移动应用的原因和好处 ・ jQuery Mobile 对于不同移动设备的支持情况 ・ 与其他移动应用开发框架比较,jQuery Mobile 的优势 ・ 不适合 Web 应用的场景 第 2 页 jQuery Mobile 概述 需要使用 C# 或者 EVC 再开发一遍。 传统移动应用开发中,即便在一种操作系统之下,不同的应用的兼容性也很难保证,例如, 一个 Android 应用在 HTC G7 手机下开发完成,在部署到 G6 手机上的时候,还需要根据不 同分辨率进行调试。当然,这种情况在 Web 应用开发过程中,虽然也会发生,却相对简单。 例如在 jQuery Mobile 开发中,可以通过定义 CSS3 的 Media Queries 进行不同分辨率下的 界面设置。 在最近 Distimo 所进行的移动产业市场调查中,可以看到这样的现象, ・ 大部分移动应用开发的技术团队工程师数量在 10 人之内。 ・ 大部分技术团队从业人员的工作经验少于 5 年。 这样的创业团队可能也意味着,创业资金不足,既有移动应用开发沉淀比较有限。那么一 种低成本的应用开发和快速交付方式,对于移动平台创业团队就具有明显的价值。设想一 个移动应用需要覆盖 iPhone,Android 和 Windows Phone 三个平台。则开发团队需要在 Windows 和 Mac 操作系统下分别搭建开发环境并开展开发活动,还需要独立的硬件测试环 境来进行应用测试。 假如通过 Web 应用开发的方式,则会简单很多。一处开发,随处运行。 第 3 页 jQuery Mobile 概述 1.2. jQuery Mobile 兼容的移动平台 jQuery Mobile 对于移动应用平台的支持,分为四种不同级别, ・ A 级 支持全部界面特效,包括基于 Ajax 的页面动画切换效果。 ・ B 级 支持用户界面特效,但是不支持基于 Ajax 的页面动画切换效果。 ・ C 级 能运行,也可以支持基本的 HTML 效果。但是比较高级的 HTML 特效就不能很好支持。 ・ D 级 可能能运行,但是并不能得到 jQuery Mobile 官方支持。 通常我们希望 jQuery Mobile 可以支持目标客户人群的移动设备在 A 级。 各种移动设备支持 jQuery Mobile 情况如下,  A 级  Apple iOS 3.2-5.0 beta  Android 2.1-2.3  Android 3.0 Honeycomb  Windows Phone 7  Blackberry 6.0  Blackberry 7  Blackberry Playbook  Palm WebOS (1.4-2.0)  Palm WebOS 3.0  Firebox Mobile (Beta)  Opera Mobile 11.0  Meego 1.2  Kindle 3  Chrome Desktop 11-13  Firefox Desktop 3.6-4.0  Internet Explorer 7-9  Opera Desktop 10-11  B 级  Blackberry 5.0 小经验 开发移动应用却没有足够的主流移动测试平台怎么 办?如果你恰巧在北京,可以选择在车库咖啡厅租 用他们的手机进行测试。车库咖啡是一个咖啡厅, 也是一个为早期创业者提供的开放式办公环境。你 在这里买一杯咖啡就可以工作一整天。他们提供大 多数主流手机以进行测试,每小时的租金只有几块 钱。 如果要过去,最好提前电话确认,这里经常会举办 会议和沙龙活动。 车库咖啡 地址:北京市·海淀区·海淀图书城步行街·鼎鑫 宾馆 2 层。 电话:010-82627127 第 4 页 jQuery Mobile 概述  Opera Mini (5.0-6.0)  Windows Phone 6.5  Nokia Symbian^3  C 级  Blackberry 4.x  其他更早版本的智能手机  D 级  Samsung Bada 从上面的清单可以看到,当前主流的移动平台 Apple iOS 3.2+,Android 2.1+,Windows Phone 7 和 Blackberry 7 都对于 jQuery Mobile 具有 A 级良好的兼容性支持。尽管如此,对 于大多数应用在面对客户进行分发和部署之前,建议还是对主流目标用户的移动平台进行兼 容性测试,以保证应用部署和运行正常。 1.3. 其他的 Web 应用开发框架 1.3.1. Sencha Touch Sencha Touch 是 jQuery Mobile 之外的另一个流行的移动平台开发框架。 Sencha Touch 继承了 ExtJS 的血统,可以看成 ExtJS 在移动平台上的实现。工程师可以通 过统一的 Sencha Touch 框架实现跨平台移动应用开发。 Sencha Touch 具有比较明显的优势, ・ 界面样式标准、美观,开发团队可以集中于应用功能实现,而对于美工方面的依赖较小。 ・ 具有 ExtJS 环境下开发经验的工程师,学习这种框架比较容易,并易于将桌面应用迁移 到 Sencha Touch 框架之下。 ・ 对于能够支持的移动平台,实现动画,Ajax,界面风格比较统一。 ・ 基于 Sencha Touch 的 Sencha Chart 可以提供丰富的图表制作能力,并能在移动平台上 良好运行。这对于企业信息化厂商具有很大吸引力。 同样,Sencha Touch 也继承了 ExtJS 的局限性, ・ 在封闭的 JavaScript 框架下完成应用开发,虽然支持对于其他 JavaScript 的扩展,但是 定制整体而言还是比较困难的。 第 5 页 jQuery Mobile 概述 ・ 全部 JavaScript 开发,调试成本比较高。搜索引擎友好性也比较有限。 另一个需要指出的局限性在于 Sencha Touch 支持的移动平台相对有限。所以如果要面对公 众用户开展应用开发和部署,选择 Sencha Touch 就要相对谨慎。 相信未来国内很多企业信息系统开发商很可能会基于既有 Sencha ExtJS 沉淀,而将应用迁 移到 Sencha Touch 的移动应用上来。 1.3.2. iUI iUI 也是一种基于 HTML 的 Web 移动应用框架,包括,JavaScript, CSS, 图片。旨在为 iPhone 和与 iPhone 相兼容的设备开发移动应用。 iUI 的主要特性为, ・ 基于标准的 HTML 代码建立具有 iPhone 风格的导航菜单。 ・ 很少甚至不需要 JavaScript 就可以建立基于 HTML 的应用界面。 ・ 美化过的移动应用的用户体验具有 iPhone 应用风格。 ・ 适应移动手机应用的界面设计要求。 1.3.3. jQTouch jQTouch 也是一个基于 jQuery 的 Web 移动应用开发框架,大概在 2009 年前后诞生。对于 Android, iPhone 和基于 Webkit 核心的桌面浏览器支持较好。 只是 jQTouch 在纷繁的移动应用平台和移动浏览器框架的环境下,兼容性能力比较弱。所 以并不建议支持 jQTouch 进行跨平台移动应用开发,除非本身就是面对特定用户群体的。 1.3.4. iWebKit iWebKit 是一套通过 HTML 和 JavaScript 开发建立 iPhone 和 iPod Touch 移动应用的框架。 为何选择 jQuery Mobile jQuery Mobile 很有可能成为未来跨平台移动应用的主流开发工具,尽管直到今天 jQuery Mobile 依然还是 Release Candidate 1 版本。 通过与其他跨平台移动应用比较,我们可以看到 jQuery Mobile 具有如下优势, ・ 框架轻量,适合移动应用场景 第 6 页 jQuery Mobile 概述 ・ 优化的移动应用界面风格 ・ 移动设备和浏览器厂商支持广泛 ・ 从手机到平板电脑支持领域广泛 ・ jQuery 社区的开发工程师和技术支持资源丰富 ・ 框架开放,并允许进行扩展,如开发基于 jQuery Mobile 的第三方插件 1.4. 不适合的场景 也有一些应用场景并不适合于 jQuery Mobile,通常是与硬件集成相对紧密的功能。例如, 要开发一个手机的手电筒功能,这个硬件设备就是 HTML 所无法控制的。 当然,大多数移动应用并不与硬件具有特别的交互,这些场景通常是适合 jQuery Mobile 的。 而一些传统上与硬件设备需要进行交互的功能,例如 GPS,也因为移动设备的地理功能已经 集成到 HTML5 之中,所以事实上在 jQuery Mobile 框架应用中使用并没有太大问题。 第 7 页 框架初探 第 2 章 框架初探 通过 jQuery Mobile 开发 Web 移动应用和开发面向桌面的 Web 应用,其实差别并不很大。 对于当前的工程师而言,熟悉程序的框架结构,了解基本的 HTML5 程序样式,通常就能很 快开发出来基本的移动应用程序来。 2.1. jQuery Mobile 框架组成 jQuery Mobile是一套以jQuery为核心的JavaScript框架。和广泛应用的 jQuery UI 非常类似, jQuery Mobile 框架中也需要包含这样几个部分, • jQuery JavaScript 文件 • jQuery Mobile JavaScript 文件 • jQuery Mobile 层叠样式单 • jQuery Mobile 图形资源库 在使用 jQuery Mobile 进行移动应用开发的时候,需要能够使页面访问到上面的资源。 最近的 jQuery Mobile 下载页面位于 http://jquerymobile.com/download/ 。开 发者可以从这里下载 jQuery Mobile。 在 jQuery Mobile 下载资源中并没有包 括 jQuery JavaScript 库。下载 jQuery 可以访问,http://docs.jquery.com/ Downloading_jQuery 。 jQuery Mobile 推荐几种方法在页面中调用 jQuery 和 jQuery Mobile JavaScript, 1. 下载 JavaScript 和 CSS 并部署在服务器本地。 2. 在页面中访问 code.jquery.com 中托管的代码资源。 通常建议将 JavaScript 和 CSS 下载到本地服务器,页面调用本地服务器的资源。通常国内 的移动用户连接国外互联网资源的速度都比较慢。如果将 JavaScript 和 CSS 部署在国内的服 小经验 在 jQuery 和 jQuery Mobile 下载页面中会看到有 xxx. min.js 或者 xxx.min.css 文件。例如, jquery-1.6.4.min. js,jquery.mobile-1.0.min.js,jquery.mobile-1.0.min. css。同时也可以看到同样的目录下会存放不包含 .min 的文件。这个两种文件的区别在于包含 min 的 文件对 JavaScript 或者 CSS 进行了压缩,删除了不需 要的回车,空格等内容,以使得下载体积更小。 如果只是作为调用,而不是调试,则建议部署包含 .min 的文件。以提升移动设备访问内容的速度,减 少流量消耗。 第 8 页 框架初探 务器,则可以很大程度加快移动设备的访问和呈现速度。 如果希望直接使用 jQuery 所托管的代码资源,则只需要在页面 head 标记中加入这一段话 就可以了, 如果希望阅读其他 jQuery Mobile 资料可以参阅 jQuery Mobile 官方网站, http://jquerymobile.com/ 2.2. 第一个程序 如同所有软件开发教程一样,我们第一个范例也是 Hello world。 2.2.1. 开发前的准备 开发 jQuery Mobile 应用可以使用市场常见的,或者你所熟悉的 HTML 编辑工具,例如,记 事本,EditPlus, Adobe Dreamweaver,Aptana Studio 等。对于初学者而言,建议使用支 持 HTML5 的开发工具。 虽然说是移动应用,其核心其实是通过 HTML 页面实现的。所以调试 jQuery Mobile 应用的 方式和调试桌面应用的方式基本上是一致的。工程师可以首先在支持 HTML5 的桌面浏览器 上调试通过,然后再进行移动设备的兼容性测试。由于 HTML5 的支持已经比较标准化,通 常兼容性测试是比较容易通过的。 在进行调试的时候,推荐使用安装 Fire- Bug 插件的 FireFox 来帮助调试。关于 FireBug 的安装方法,可以参考《如何安装 FireBug 进行 HTML,JavaScript 和 CSS 调试? 》 尽管 jQuery Mobile 可以支持高版本的 Internet Explorer 浏览器,但是需要注意一些 Inter- net Explorer 的外壳程序将可能会影响 jQuery Mobile 正常使用。如果不想有更多麻烦,建 议还是使用 FireFox 或者 Google Chrome 浏览器。 小经验 关于哪些 HTML5 即插即用编辑器的选择,可以参 阅这篇文章《有哪些 HTML5 编辑器比较方便使用?》 第 9 页 框架初探 2.2.2. Hello World! 一个基本的 jQuery Mobile 应用程序结构如下所示。在这个程序中,包含这样几个部分, HTML 代码框架,jQuery 和 jQuery Mobile 框架 JavaScript 库。 基本的 jQuery Mobile 程序结构 跨平台移动应用 在上面的框架中,包含这样几部分内容, 1. 是 HTML5 新的标记定义,表示一个 HTML5 文档的开始。,在任何使用 jQuery Mobile 实现的页面中,必须以此作为开始。 2. <body> 这些标记是继承自 HTML4 标准的,表示 HTML 文档的各个部分。 3. <head> 标记中包含将会被引用的 CSS 和 JavaScript,对于 jQuery 和 jQuery Mobile 的 引用也定义在这里。 4. <meta charset=”utf-8”> 表示页面内容的字符集,用于多语言显示。 基于上面的代码框架,就可以填充内容到这个页面 body 之中了。 在填充页面内容的时候,通常是基于这样的框架, jQuery Mobile 页面内容程序结构 <section id=”page1” data-role=”page”> <header data-role=”header”> </header> 第 10 页 框架初探 <div class=”content” data-role=”content”> </div> <footer data-role=”footer”> </footer> </section> 在这段代码中,定义了这样几部分内容, 1. <section data-role=”page”>,这部分告诉 jQuery Mobile 框架,下面的内容将在一个 页面中显示。 2. <header>,缺省将显示在浏览器上的标题栏。 3. <div class=”content” data-role=”content”>,表示其中内容为移动应用界面的正文 部分。 4. <footer>,表示为移动应用界面中的页脚部分。 我们在页面内容程序中,填入所要展现的 Hello World! 内容。然后,将前面 HTML 代码以 及 jQuery Mobile 库引用的代码合在一起,于是得到了下面的代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> 跨平台移动应用

jQuery Mobile 跨平台移动应用

Hello World!

第 11 页 框架初探

CatchException.NET

在 FireFox 7.0 中,界面呈现如下, 在 Android Mobile 2.2 模拟器中呈现界面效果如下, 第 12 页 框架初探 和很多 Hello World! 程序一样,第一个程序总是带有那么一些兴奋。尽管并不完美,却是看 到的第一个跨平台移动应用的样子。后面,我们将会一起看到更多通过 jQuery Mobile 实现 移动应用开发的方法。 2.3. jQuery Mobile 与 HTML5 虽然早期范例代码和很多网站中,jQuery Mobile 是可以通过定义 DIV 的方式与 HTML4 页 面集成。还是建议使用 HTML5 来完成 jQuery Mobile 框架。一来 HTML5 所书写的框架更加 简洁,二来一些 HTML5 新特性对于移动应用开发非常有用。 第 13 页 框架初探 这样的新特性包括, • 简化而实用的语义标签。 • 增强的表单功能。 • 原生视频和音频支持 • 绘图 API • Web Sockets API • 离线 Web 应用 • Web Storage • Web Worker 多线程 • 基于地理位置的 Geolocation API 很多应用将会对移动应用开发产生长远影响,例如传统的 HTML4 Cookie 只能保存 4KB 数据, 而通过 Web Storage 将可以存储 5MB 甚至更多的数据。在基于 Geolocation API 的应用中, SoLoMo 应用的开发将不需要涉及复杂的基于 GPS 或移动基站的位置定位,而通过浏览器将 可以大大简化之前的操作。 第 14 页 页面与对话框 第3章 页面与对话框 jQuery Mobile 框架的页面就相当于传统本地移动应用程序的界面,了解页面和对话框开发 技术,就可以很快定义基本的软件框架出来。 jQuery Mobile 的页面和对话框开发通过基于定义 HTML 和 CSS 实现,非常简单。基于这个 框架开发应用,对于初学者甚至比传统的桌面 Web 应用开发还要更简单。 3.1. 单页与多页模版 通常在面向桌面浏览器开发一个网页的时候,一个页面就是一个网站。好像我们在上一章所 看到的 Hello World 程序,这是一种典型的单页模版页面。简单的说,单页模板是,一个应 用界面就通过一个网页文件实现。 在一些页面中,例如一个网页中包括多个选项卡。通常为了节省用户打开各个选项卡的时间, 网页设计师会在 CSS 方面下一些功夫,从界面看来是打开了新的选项卡,而实际上这个选 项卡的内容已经从服务器下载到本地浏览器了。关于在桌面浏览器中显示多选项卡,可以参 见 jQuery UI Tabs 组件, http://jqueryui.com/demos/tabs/ 。 有别于桌面计算机连接互联网,移动互联网当使用 3G 网络通过移动基站连接到服务器获得 页面内容的时候,网络通讯环境会大大复杂,而移动网络性能是比较不稳定的。传输的速度 收到手机连接到基站的速度,基站自身带宽品质,以及移动设备运行过程中从一个移动基站 在这一章中,我们将接触到, • 单页与多页模板 • 页面标题 • 链接到内部页面或外部页面 • 页面切换方式美化 • 对话框建立与关闭 • 页面风格美化 第 15 页 页面与对话框 切换到另一个移动基站过程中,对于网络性能的影响。这也是,为什么我们乘坐地铁的时候 打开网页通常速度都会比较慢的原因。虽然通过 Wifi 能保证在一定范围内的通讯品质,但 并不是随处都能有免费而具有加密保护的 Wifi 热点的。这样的环境下,移动 Web 应用就需 要能够针对这样的网络环境进行专门优化设计。 在 jQuery Mobile 框架下,多页模版在加快小网站或具有关联性页面的加载速度,改善用户 体验的作用更进一步被突出。用户在下载第一个页面的时候,同时也下载了相关的其他页面。 当用户打开这样的页面的时候,不再需要重新从服务器下载新的页面,而只需要将“隐藏” 在背后的页面调出来就好了。 多页模板页面范例, 跨平台移动应用 第 16 页 页面与对话框

多页面模板演示

这是一个“多页面模板演示”。
请点击下面的“关于我们”页面,以跳转页面。

点击这里,进入 关于我们 页面。
CatchException.NET

关于我们

CatchException.NET 是帮助工程师分享工作中所遇到的各种各样技术问题,寻求解 决方案,并帮助建立现实社交网络的工程师社区。

CatchException.NET 的口号是,讲求理性观点的工程师社区。


点击这里,进入 演示 页面。
CatchException.NET
这是一个通过多页模板生成的页面。包括两个基本页面,“主页面”点击之后进入到“关于 我们”页面。 第二个页面是一个独立的
,设置 data-role 为 page。这样点击打开是一个关于我 们的页面。如果设置为 dialog,则点击关于我们按钮进入的第二个页面会变为对话框样式。 在第二个页面设置 section 的 id 为 page_aboutus 。此时在需要调用的位置加入超链接指向 到锚链 #page_aboutus ,就可以通过点击而打开第二个页面了。 第 17 页 页面与对话框 使用浏览器打开上面的页面,看到“多页面模板演示”界面。 点击“关于我们”,跳转到下面的页面。同样,点击“进入演示页面”链接,回到前面的页面。 第 18 页 页面与对话框 3.2. 页面标题 在前面的演示中,不管单页模版或者多页模板,在页面代码的 head 中 title 部分都设置为“跨 平台移动应用”。但是在打开的浏览器中,却发现这个标题并没有被显示而取而代之的是在 当前界面打开的页面 section 中定义在
中的文字内容。这样的好处在多页模板的 显示方式下,不同页面的浏览器标题都是不同的。这样,用户体验可以被加强。 例如,在本章页面展示中,“关于我们”页面的标题就是和 header 中定义的文字“关于我们” 一致。 如果多页模板第一个页具有
,而之后的页面没有,那么会怎么样呢?后面的页面 会使用前一个页面的标题。假如第一个页面没有
,这个时候页面显示的标题才会 显示 HTML 的 head 中的标题内容。 而这样的处理的确容易引起混乱,正确使用方法是在
中定义 data-title 属性值。 例如,
即便我们将“关于我们”部分的代码删除掉
部分。在实际使用的时候,浏览器标 题依然不会出现错误。 修改之后的“关于我们”页面,删除掉

CatchException.NET 是帮助工程师分享工作中所遇到的各种各样技术问题,寻求解 决方案,并帮助建立现实社交网络的工程师社区。

CatchException.NET 的口号是,讲求理性观点的工程师社区。


点击这里,进入 演示 页面。
CatchException.NET
3.3. 链接到内部页面或外部页面 内部页面是当前页面或者通过锚链指向到的当前页面中的一部分。 第 19 页 页面与对话框 外部页面是外部独立页面。如果声明为外部页面,即便是对当前页面的请求也会到服务器重 新请求一遍。这个时候相当于刷新当前页面。 链接样式 链接类型 内部链接 内部链接 外部链接 外部链接 外部链接 这个例子展示了不同的内部链接和外部链接的实现方式。 跨平台移动应用

外部页面链接演示

CatchException.NET
第 20 页 页面与对话框

关于我们

CatchException.NET 是帮助工程师分享工作中所遇到的各种各样技术问题,寻求解 决方案,并帮助建立现实社交网络的工程师社区。

CatchException.NET 的口号是,讲求理性观点的工程师社区。


点击这里,进入 演示 页面。
第 21 页 页面与对话框 3.4. 对话框建立,关闭 对话框可以看成一种特别的页面样式。还以之前的“关于我们”为例,只需要替换关于我们 section 的 data-role 从 page 到 dialog 就可以实现对话框效果。 为了更加接近真实的对话框样式,将之前例子中的“返回”链接调整为按钮样式。 调整之后的“关于我们”对话框代码为,

关于我们

CatchException.NET 是帮助工程师分享工作中所遇到的各种各样技术问题,寻求解 决方案,并帮助建立现实社交网络的工程师社区。

CatchException.NET 的口号是,讲求理性观点的工程师社区。


返回
第 22 页 页面与对话框 关闭对话框可以使用 jQuery 选择器实现,也可以点击对话框左上方图标, 。 通过程序实现对话框关闭的代码如下, $(‘.ui-dialog’).dialog(‘close’); 3.5. 切换方式美化 不管页面或者对话框,在呈现的时候都可以设定其切换方式,以改善用户体验。 只需要在链接中声明 data-transition 属性为期望的切换方式。 当前 jQuery Mobile 支持的页面切换方式包括 6 种。 切换方式 data-transition 属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 第 23 页 页面与对话框 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 flip 值得注意的是,旋转弹出在 Android 某些版本中可能不能很好支持。因为这个美化需要使用 到 3D CSS,而很多 Android 尚未支持。 这部分代码片段显示了各种切换到“关于我们”界面的样式。

页面切换方式演示

这段演示将会呈现不同的页面切换方式。

横向 缺省的切换方式
自下向上
自上向下
中央跳出
淡入淡出
旋转弹出 可惜,Android 不支持这种切换

第 24 页 页面与对话框 3.6. 页面风格美化 jQuery Mobile 拥有 6 种已经预设好的配色方案。在使用不同配色方案的时候,只需要在需 要控制的部分设置 data-theme 属性,就可以进行颜色设置。例如,本章对话框范例程序中 分别在 header 和 content 部分声明为界面风格 e。
各种不同界面风格样式如下。 第 25 页 页面与对话框 缺省界面风格 界面风格 A 第 26 页 页面与对话框 界面风格 B 界面风格 C 第 27 页 页面与对话框 界面风格 D 界面风格 E 第 28 页 页面与对话框 3.7. 自定义风格的用户界面 早期 jQuery Mobile 用户往往有这样的概念,jQuery Mobile 的样式只能有 5 中,如“3.6 页 面风格美化”中的那些一样,而缺乏自定义的界面风格样式。在 jQuery Mobile 1.0 中, jQuery Mobile 发布了 ThemeRoller 以帮助应用设计者以所见即所得的方式自定义用户界面 样式。设计者只需要在 ThemeRoller 中进行各个界面元素的定义,然后在将生成的 CSS 下 载到自己的服务器,加入到 HTML5 中,就可以实现自定义风格用户界面。 ThemeRoller 的访问地址位于,http://jquerymobile.com/themeroller/ 这个界面和 jQuery UI 的 ThemeRoller 非常接近。之前使用 jQuery UI 从事桌面应用开发的 工程师,应该对这个界面非常熟悉。一个明显的不同之处在于 jQuery UI 一次只能定义和下 载一套自定义 Theme 风格。而 jQuery Mobile 则可以多达 26 套,在 ThemeRoller 中,这些 按照 A-Z 的顺序全部呈现出来。 第 29 页 页面与对话框 3.7.1. 使用 ThemeRoller 自定义 Theme 风格 使用 ThemeRoller 自定义 Theme 风格,大致遵循这样的顺序, 1. 设定 Theme 数量 2. 定义全局 CSS 定义 3. 就某个 Theme 进行逐一定义 4. 下载定义的 Theme 风格的 CSS 文件,并将 CSS 加入到 HTML5 头部 在 ThemeRoller 界面左侧的区域可以进行 Theme 数量定义。 如果希望添加更多的 Theme 风格数量。则 点击“+”按钮,每次点击增加一个缺省风 格的 Theme。当 Theme 数量达到一定数量 的时候,通常是 6 个,则之后的 Theme 会 被“>>”符号所隐藏。点击“>>”按钮, 可以看到被隐藏的 Theme 界面。另一种添 加 Theme 的方式是在右侧 Theme 列表的 最后,点击“Add Swith”区域,则每次点 击增加一个 Theme。不管通过左侧 Theme Setting 区域或者右边 Swith 区域,最多只是定义 26 个 Theme 风格。 对于希望删除的 Theme,可以在指定的 Theme 区域的 Setting 中点击“Delete”按钮进行删除。 每次可以删除一个 Theme。 Theme 设定可能会影响 CSS 尺寸,如果一个 Theme 并不必要,建议可以删除为好。由于 手机上网条件通常不如 PC 上网环境那么稳定,有的时候通过 Edge 或者 GPRS 上网,手机 上网带宽问题表象更加突出。而即便通过 3G 上网,在行动过程中,或者地铁、电梯 等环境下,带宽通常也不稳定。小尺寸的 Theme 有助于用户快速加载界面。 在 Global 选项卡页面中可以定义全局的 CSS 定义,包括,字体族,活跃状态,圆 角半径,图标,阴影。 在每个自定义选项卡中,主要定义页眉 / 第 30 页 页面与对话框 页脚导航条样式,正文内容样式与按钮样式。 3.7.2. 导入与导出自定义样式 当 一 个 自 定 义 CSS 完 成 之 后, 可 以 通 过“Import” 功 能 将 之 前 的 Theme 导 入 到 ThemeRoller,然后再基于此更新 Theme 风格。点击“Import”按钮,将可以呈现一个 Import Theme 浮动窗口,将需要导入的 CSS 粘贴复制到对话框,点击对话框中的“Import” 按钮,即可实现导入。 自定义 Theme 风格定义完成,点击 Download Theme 可以将定义完成的 CSS 下载到本地。 第 31 页 页面与对话框 导出的 Theme 风格文件,作为 CSS 引用到 HTML5 页面中则实现了自定义风格集成。 3.7.3. 通过 Inspector 快速定义颜色 如果需要手工进行每个 CSS 元素的定义,通常需要花费较大的时间。ThemeRoller 提供基于 Adobe Kuler 技术的 Inspector 功能可以很大程度上帮助开发者节省开发时间。 开发者可以基于 Inspector 设置合适的颜色,亮度和色彩饱和度,然后将颜色从色版拖动到 Switch 中相应的元素位置,这样就可以快速定义元素的色彩样式。而在 ThemeRoller 中,工 作量最大的工作之一就是自定义颜色。这也是 Inspector 的特长。 第 32 页 页面布局与内容呈现 第4章 页面布局与内容呈现 移动应用的界面通常受到屏幕尺寸限制,尤其手机最为明显。而移动设备顾名思义,在移动 中使用,自然没有桌面电脑可以两只手敲击键盘,滑动鼠标那么方便便捷。这些就为移动应 用软件的布局与用户体验设计提出了要求。 4.1. 基本页面布局 在之前章节的范例中,各个范例的界面都是一栏的。也就是各个页面元素基本都是自上而下 顺序排列的。在基于 jQuery Mobile 开发的应用中,HTML4 页面标记几乎都可以得到良好支 持。 下面的代码以顺序显示了主要的 HTML4 标记,并可以通过之后的界面来看到不同标记的内 容所呈现的效果。 跨平台移动应用

基本页面布局

标题 1

标题 2

标题 3

标题 4

标题 5
标题 6

此处为正常字体
此处为粗体
此处为斜体字
此处为超级链接

此处为块引用开始
此处为 引用文字
此处为块引用结束

CatchException.NET
第 34 页 页面布局与内容呈现 下面的代码展示了项目符号列表,数字编号列表和表格在界面中的呈现效果。 跨平台移动应用

基本页面布局

项目符号列表

  • 项目符号列表 1
  • 项目符号列表 2
  • 项目符号列表 3


数字编号列表

  1. 数字编号列表 1
  2. 数字编号列表 2
  3. 数字编号列表 3


第 36 页 页面布局与内容呈现
表格标题
书名 作者 年代
表格脚注
红楼梦 曹雪芹 清朝
水浒传 施耐庵
荷马史诗 荷马 公元前八世纪后半期

CatchException.NET
在上面的代码中,可以看到关于表格的定义方式与传统的表格定义方式有些区别。这部分表 格定义是由 HTML5 的方式进行的定义,  caption 标记表示表格标题  thead 表示表格列名称  tfoot 表示表格脚注  tbody 表示表格内容。这部分相当于传统 HTML4 中 tr 和 td 标记中所包含的内容。 有关于 HTML5 表格的具体定义,可以参照 HTML5 相关参考资料。 第 37 页 页面布局与内容呈现 下图展示了前面各种列表和表格基于 jQuery Mobile 的输出样式。 4.2. 分栏与网格布局 虽然通过表格方式可以实现多行多列的内容呈现,但是代码毕竟不够简洁。另外,通过表格 方式辅助内容排版还存在这样两个可能的弊端,  呈现和渲染表格的速度在移动设备中通常比较耗时和消耗资源  通过表格进行排版的内容,搜索引擎友好型通常不怎么好 jQuery Mobile 通过支持分栏和网格布局,提供了简单而有效的界面排版方式。这种方式对 于之前通过表格的方式进行排版,有不错的应对。 jQuery Mobile 的分栏格式通常来说具有两类标记嵌套而成,  Ui-grid-a,表示每栏宽度为移动设备屏幕的 50%  Ui-block-a,表示栏目所处的顺序。 第 38 页 页面布局与内容呈现

第一栏

第二栏

如果要设置不同的栏宽度,可以选择 ui-grid-b, ui-grid-c…最多可以到 ui-grid-e。 同样,对于各个栏目的位次排列,每个块的顺序也可以通过设置,a,b,c,d,e 的顺序进 行排列。如果顺序没有按照 a 到 e 的顺序进行排列,则可能会出现换行的情况。而如果一 行容纳不下足够的块,也会出现多行显示。这样就呈现网格的效果了。 下面的例子中,我们将看到不同分栏数量的现实效果。 跨平台移动应用
第 39 页 页面布局与内容呈现

分栏布局

2 栏

第一栏

第二栏

3 栏

第一栏

第二栏

第三栏

4 栏

第一栏

第二栏

第三栏

第 40 页 页面布局与内容呈现

第四栏

5 栏

第一栏

第二栏

第三栏

第四栏

第五栏

2 行 3 列

第一栏

第二栏

第三栏

第 41 页 页面布局与内容呈现

第一栏

第二栏

第三栏

CatchException.NET
上述代码呈现效果如下, 第 42 页 页面布局与内容呈现 这部分示例代码中,最后一段两行三列的代码实现方式就可以看成是一个网格布局。 在分栏和网格布局的结构下,通常是没有背景颜色和边框颜色的。为了能够看到分栏的各个 部分的效果,在 HTML 开始的部分进行了 CSS 定义,设置了背景颜色,边框颜色以及边框 之间的间距。 第 43 页 页面布局与内容呈现 下面的代码是结合应用场景的具体事例。在一个界面中,一段提示语言之后,有两个并排的 按钮。点击不同的按钮将执行不同的操作。而两个并排的按钮被放置于两个独立的分栏中。 跨平台移动应用

分栏布局

这是一个分栏布局的示例。在下方有两 个按钮,“确认”和“取消”分别放置于不同的分栏之内。
CatchException.NET
这段代码呈现样式如下, 第 44 页 页面布局与内容呈现 4.3. 集成自定义 CSS 虽然 jQuery Mobile 提供了几种系统缺省的 Themes 界面定义风格,并可以通过简单的 data-theme 属性指定为不同风格。在实际使用过程中依然可能会涉及到自定义样式,例如, 行间距,字体,字号,颜色,间距等。这样的标记可以使用自定义的 CSS 来实现,就好象 传统的网页设计一样。只是如果要选择 CSS3 的一些升级的功能,可能要检查一下不同移动 平台浏览器的支持能力,例如 CSS3 中对于 3D 的支持,在 Android 的多个操作系统中是不 能支持的。 对于界面的定义,建议通过独立的 CSS 文件实现,如果可能,也可以将 CSS 缓存到本地, 这样将有助于减少页面下载速度,提升用户体验效果。 第 45 页 按钮 第5章 按钮 我们在之前的章节中曾经使用到按钮,这是一种典型的页面元素。在 jQuery Mobile 技术中, 按钮是一种比较有趣的实现。有别于传统 HTML 语言对于按钮的实现,除传统 button 标签 之外,jQuery Mobile 还支持通过定义超链接 来实现具有页面链接和跳转功能的按钮功 能。我们将专门探讨不同的按钮功能、样式和实现方式。 在这一章中,我们将接触到, • jQuery Mobile 的按钮 • 内置按钮样式 • 按钮图标 • 按钮组 5.1. jQuery Mobile 的按钮 按钮是移动应用中最常见的页面元素。通常按钮功能主要是两种,  页面或者功能跳转  提交表单内容 所以在 jQuery Mobile 定义中,按钮也有两种不同的书写方式,按钮外形的超级链接和表单 按钮。 两种按钮的样例比较可以参阅下面这段代码, 跨平台移动应用 第 46 页 按钮

基本按钮样式

链接按钮
在这段代码中,姑且对于传统 HTML Input 类型的按钮称之为“表单按钮”,而对于超级链 接的按钮样式称之为“链接按钮”。显然他们的功能是不同的。 而从下图中看到,两种按钮的样式却是一致的。 第 47 页 按钮 除去上面基于链接的按钮和通过 button 标签声明的按钮,在传统 HTML4 的方式下声明的按 钮,在 jQuery Mobile 中也可以被显示为按钮,包括,如下声明方式 而这样的声明的按钮功能和传统 HTML4 的按钮功能也是一致的。 5.2. 内置按钮样式 在前面一个样例中,按钮宽度几乎占到整个移动设备屏幕的宽度。而很多情况下,按钮是不 需要占用这么大尺寸的。如果能占用空间相对有效,则方便手指操作,提升用户体验。针对 这种场景,jQuery Mobile 提出了一种内置按钮(inline button)样式的声明方式。 只需要在之前的声明上添加 data-inline 属性,则按钮宽度自然按照文字尺寸进行安排。而 按钮也按照自左向右的顺序依次排列。 在前述样例基础上,对于按钮部分添加 data-inline 属性 true,则更新代码段如下,

内置按钮样式

链接按钮
其显示效果为, 第 48 页 按钮 5.3. 按钮图标 jQuery Mobile 在进行按钮设计的时候,缺省定义了一套 data-icon 参数,基于这套参 数可以指定常用的按钮图标。例如, Delete ,则会呈现如下效果, data-icon 可以指定不同的参数,参数不同,所呈现的按钮图标样式也会不同。 左箭头 data-icon = “arrow-l” 右箭头 data-icon=”arrow-r” 向上箭头 data-icon=”arrow-u” 向下箭头 data-icon=”arrow-d” 删除 data-icon=”delete” 加号 data-icon=”plus” 减号 data-icon=”minus” 检查 data-icon=”check” 齿轮 data-icon=”gear” 第 49 页 按钮 刷新 data-icon=”refresh” 向前 data-icon=”forward” 向后 data-icon=”back” 网格 data-icon=”grid” 星型 data-icon=”star” 警告 data-icon=”alert” 信息 data-icon=”info” 主页 data-icon=”home” 查询 data-icon=”search” 此外,设置 data-iconpos 属性也可以设置图标的位置。 值 图标位于按钮的位置 left 左侧(缺省) right 右侧 top 上方正中 bottom 下方正中 notext 只有图标,而没有文字 缺省图标位于左侧,所以如果需要图标在缺省位置,则可以不用设置 data-iconpos 属性。 如果只是设置图标,而不希望包括任何文字,则可以添加参数 data-iconpos 为 notext。 例如, Delete ,则呈现效果如下图所示, 第 50 页 按钮 5.4. 按钮组 按钮组,顾名思义,一组按钮在一起。jQuery Mobile 统一对一组样式一致的按钮进行样式 定义和渲染。 按钮组分为横向按钮组和纵向按钮组。 在纵向按钮组中,声明按钮组的 div 标签,添加属性 data-role=”controlgroup”。缺省为 纵向按钮组,如果希望呈现为横向按钮组,则添加 data-type=”horizontal”属性。 下面的范例代码分别呈现了纵向按钮组和横向按钮组。

按钮组样式

如下内容为纵向按钮组

链接按钮

如下内容为横向按钮组

链接按钮

第 51 页 按钮 呈现效果如下图所示, 5.5. 选项、方法和事件 在进行页面编程的时候,按钮被点击之后所执行的行为以及对于事件的捕获,在 jQuery Mobile 中有专门的定义。这些属性、方法和事件都是基于 jQuery 实现的,方便工程师进行 灵活的前端功能定制。 第 52 页 按钮 5.5.1. 选项 这部分选项和之前程序范例标签中的属性从功能和实现效果是相同的。 不同之处在于,之前范例标签中的属性值是在 HTML 标签中声明的,而选项则是在 JavaS- cript 代码中,经由 jQuery 选择器定位到某个按钮而进行的选项的赋值。从命名来说,通常 选项的名称就是所要操作的语义,例如,icon,而属性的命名则会添加 “data-” 作为前缀, 例如,data-icon 。 作为属性,定义一个按钮的图标是这样实现的。