jQuery Mobile开发入门手册--入门篇.pdfVIP

jQuery Mobile 开发入门手册——入门篇 目录 jQuery Mobile 开发入门手册——入门篇 1 概述 3 框架特性 3 版本约定 3 初始配置 4 页面声明 4 技术理论 4 WebKit 和 HTML5 4 移动 Web 应用程序的考虑 5 一般站点的呈现 5 组件 7 页面 7 模态对话框 8 工具条 9 标题容器 9 页脚容器 10 导航 11 按钮 11 表单应用 13 列表应用 14 概述 此文档是基于jQuery Mobile 框架的移动设备Web 应用开发知识而编制，目的是为了方便开 发人员快速的掌握此框架的开发应用，其中包含了框架的基础应用知识和在团队协作开发中 的常规约定。 框架特性 JQuery Mobile 以“Write Less, Do More ”作为目标，为所有的主流移动操作系统平台提供了 高度统一的UI 框架：jQuery 的移动框架可以让你为所有流行的移动平台设计一个高度定制 和品牌化的Web 应用程序，而不必为每个移动设备编写独特的应用程序或操作系统。 jQuery Mobile 目前支持的移动平台有苹果公司的iOS （iPhone，ipad，iPod Touch），Android ， Black Berry OS6.0，惠普 WebOS，Mozilla 的Fennec 和Opera Mobile 。今后，将增加包括Windows Mobile，Symbian 和MeeGo 在内的更多移动平台。 根据jQuery Mobile 项目网站，目前jQuery Mobile 的特性包括： • jQuery 核心——与jQuery 桌面版一致的jQuery 核心和语法，以及最小的学习曲线。 • 兼容所有主流的移动平台——iOS、Android 、BlackBerry，Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo 以及所有支持HTML 的移动平台。 • 轻量级 alpha 版本的jQuery Mobile 其 JavaScript 大小仅为 12KB ， CSS 文件也只有 6KB 大小。 • 标记驱动的配置 jQuery Mobile 采用完全的标记驱动而不需要JavaScript 的配置。 • 渐进增强 jQuery Mobile 采用完全的渐进增强原则：通过一个全功能的HTML 网页，和 额外的JavaScript 功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript ， 基于jQuery Mobile 的移动应用程序仍能正常的使用。 • 自动初始化通过使用 mobilize()函数自动初始化页面上的所有jQuery 部件。 • 无障碍 包括WAI-ARIA 在内的无障碍功能以确保页面能在类似于VoiceOver 等语音辅助 程序和其他辅助技术下正常使用。 • 简单的API 为用户提供鼠标、触摸和光标焦点简单的输入法支持。 • 强大的主题化框架 jQuery Mobile 提供强大的主题化框架和UI 接口。 版本约定 为了避免由于版本不统一等引发的问题，在此次撰写中对框架的版本进行了如下约定 ： jQuery 核心：V 1.50 Mobile 核心：V 1.0 ALPHA 3 初始配置 在head 中按顺序加入框架的引用，注意加载的顺序: link rel=stylesheet type=text/css href=jquery.mobile-1.0a2.min.css script src=jquery-1.4.4.min.js/script !--这里加入项目中其他的引用-- script src=jquery.mobile-1.0a2.min.js/script ps:建议在meta 中加入 ”charset=utf-8 ”的声明，避免出现乱码和响应方面的问题 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 或者 meta charset=utf-8 / 页面声明 建议在页面中使用HTML5 标准的页面声明和标签，因为移动设备浏览器对HTML5 标准的支 持程度要远远优于PC 设备，因此使用简洁的HTML5 标准可以更加高效的进行开发