jQuery Mobile中文手册：开发入门

jQuery Mobile 以“Write Less, Do More”做为目标，为全部的主流移动操做系统平台提供了高度统一的 UI 框架：jQuery 的移动框架可让你为全部流行的移动平台设计一个高度定制和品牌化的 Web 应用程序，而没必要为每一个移动设备编写独特的应用程序或操做系统。

　　框架特性

　 　jQuery Mobile 目前支持的移动平台有苹果公司的 iOS(iPhone，ipad，iPod Touch)，Android，BlackBerry OS 6.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

　　初始配置

　　在中按顺序加入框架的引用，注意加载的顺序:

1 .     < link rel = " stylesheet " type = " text/css " href = " jquery.mobile-1.0a2.min.css " >    2 .     < script src = " jquery-1.4.4.min.js " ></ script >    3 .     < ! -- 这里加入项目中其余的引用 -->    4 .     < script src = " jquery.mobile-1.0a2.min.js " ></ script >

　　ps:建议在meta中加入'”charset=utf-8”的声明，避免出现乱码和响应方面的问题

1 .     < meta  http - equiv = " Content-Type "   content = " text/html;  charset=utf-8 "    /> 或 者 < meta charset = " utf-8 " />

　　页面声明

　　建议在页面中使用 HTML5 标准的页面声明和标签，由于移动设备浏览器对 HTML5 标准的支持程度要远远优于 PC 设备，所以使用简洁的 HTML5 标准能够更加高效的进行开发，免去了由于声明错误出现的兼容性问题。

　　HTML5 页面基础元素：

1 .     < !DOCTYPE HTML >    2 .     < html lang = " en-US " >    3 .     < head >    4 .     < title > 5 .    标题 6 .       </ title >    7 .     < meta charset = " UTF-8 " >    8 .       9 .     </ head >    10 .     < body >    11 .     </ body >    12 .     </ html >

　　技术理论

　　WebKit 和 HTML5

　 　WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背后的技术。WebKit 也在其余的移动环境内有本身的用武之地，可是咱们仍是将咱们的讨论集中于 iPhone 和 Android 平台。

　　WebKit 是一个开源项目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应用程序。虽然设备自己的能力和形态因素都至关重要，但移动用户最热衷的仍然是内容。若是移动用户可用的内容只是 Internet 用户可用内容的一个很小的子集，那么用户体验充其量也只能划分为二等。

　　咱们当中的大多数人都更但愿生活是连贯的 — 若是咱们在家中的笔记本上访问了一个网站，咱们一样但愿在火车上旅行时仍然访问到一样的内容。内容是最好的应用程序。无论咱们身在何处、在作什么，咱们都想要访问到咱们的数据。WebKit 让 iPhone 和 Android 平台上能够有丰富的内容。

　 　有一点很值得注意，即 WebKit 还应用在了桌面的 Safari 浏览器内，该浏览器是 Mac OS X 平台默认的浏览器。无论咱们讨论的是桌面版本仍是 iPhone 或 Android 上的浏览器引擎，WebKit 均优先支持 HTML 和 CSS 特性。实际上，WebKit 还支持还没有被其余浏览器采纳的一些 CSS 样式 — 这些特性正在获得 HTML5 规范的考虑。

　　 HTML5 规范是一个技术草案集，涵盖了各类基于浏览器的技术，包括客户端 SQL 存储、转变、转型、转换等。HTML5 的出现已经有些时间了，虽然还没有完成，可是一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后，Web 应用程序的简陋开端将成为永久的记忆。Web 应用程序开发将成为主导 — 而且不仅是在传统的桌面浏览器空间，还将在移动领域。移动将一跃成为首要考虑，而再也不是后备之选。

　　移动 Web 应用程序的考虑

　　为了访问 Web 开发技术，现在，应用程序开发人员有几个选择。第一，应用程序可严格编写为服务器上的 HTML、CSS 和 JavaScript 文件。固然，HTML 内容能够产生自静态 HTML 文件，也能够从任何的服务器端技术(好比 PHP、 ASP.NET、Java Servlets 等)动态生成。全部这些技术追根到底均可简单地用术语 HTML 指代 — 这不是本文讨论的重点所在 — 而且最为重要的是，受 WebKit-支撑的浏览器可以在移动设备上解析和呈现 HTML。

　　用户经过在移动设备上(即 iPhone 或 Android)打开浏览器应用程序并输入目标服务器对应的 URL：http://yourcompanyname.com/applicationurl 来访问 Web 应用程序。

　　特定的某个移动 Web 应用程序老是能找到本身的位置：从通常的 Web 站点到高度特定于平台的移动 Web 应用程序。

　　通常站点的呈现

　 　WebKit 内的呈现引擎，再配以 iPhone 和 Android 平台上的高度直观的 UI，实际上就使得几乎任何一个基于 HTML 的 Web 站点都能呈如今此设备上。Web 页能被正确呈现，再也不像原来的移动浏览器体验：内容被包裹起来或是根本不显示。当页面加载后，内容一般被彻底缩放以便整个页面均可见，尽管内容会被缩放得 很是小，甚至不可读，如图 1 所示。不过，页面是可滚动、放大、缩小的，这就提供了对所有内容的访问。默认地，浏览器使用 980 像素宽的视见区或逻辑尺寸。 要想使 Web 页面从通常的页面变成支持移动设备的页面，Web 应用程序能够在几个方面进行修改。

　　虽然页面能够在 WebKit 中正确呈现，可是，一个以鼠标为中心的设备(好比笔记本或台式机)与一个以触摸为中心的设备(好比一个 iPhone 或 Android 智能手机)仍是有区别的。其中主要的一些差别包括 “可单击” 区域的物理大小、“悬浮样式” 的缺乏以及彻底不一样的事件顺序。以下所列的是在设计一个能被移动用户正常查看的 Web 站点时须要注意的一些事情：

　　iPhone/Android 浏览器呈现的屏幕是可读的 — 大大好于传统的移动浏览器 — 因此不要急于草草制做您网站的移动版本。

　　手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点 — 不要把连接放得相互太靠近，由于用户不太可能单击了一个连接而不触及相邻的连接。

　　悬浮样式将再也不奏效，由于用手指不能进行用鼠标指针进行的 “悬浮”。

　 　诸如 mouse-down、mouse-move 等事件在基于触摸的设备上天然截然不同。这类事件中有一些将被取消，不要期望移动设备上的事件顺序与桌面浏览器上的同样。 让咱们来看看要使一个 Web 站点对 iPhone 或 Android 访客具备友好性所面临的最为明显的一个挑战：屏幕大小。咱们今天使用的实际移动屏幕尺寸是 320x480。请注意因为用户可能会选择横向查看 Web 内容，因此屏幕大小也能够是 480x320。正如咱们在图 1 中看到的，WebKit 将能很好地呈现面向桌面的 Web 页面，可是文本可能会过小以致于若不进行缩放或其余操做就没法有效阅读内容。那么，咱们该如何应对这个问题呢?

　　最为直观也是最不唐突的适合移动用户的方式是经过使用一个特殊的 metatag：viewport。

　 　metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。以下是一个使用 viewport 标记的简单例子： 。当这个 metatag 被添加到一个 HTML 页面后，咱们看到此页面被缩放到更为适合这个移动设备的大小，如图 2 所示。若是浏览器不支持此标记，它会简单地忽略此标记。 为了设置特定的值，将 viewport metatag 的 content 属性设为一个显式的值： 。经过改变初始值，屏幕就能够按要求被放大或缩小。将值分别设置在 1.0 和 1.3 之间对于 iPhone 和 Android 平台是比较合适的。viewport metatag 还支持最小和最大伸缩，可用来限制用户对呈现页面的控制力。

　　自 具备 320x480 布局的 iPhone 面世以来，其形态系数就一直没有改变过，而随着来自不一样制造商、针对不一样用户群的更多设备的出现，Android 则有望具有更多样的物理特色。在开发应用程序并以诸如 Android 这类移动设备为目标时，必定要考虑屏幕尺寸、形态系数以及分辨率方面的潜在多样性。

　　除了 Android 设备与其余设备之间的这些物理差别以外，经验还代表 Android 的软件还经过设备内置的(on-device)浏览器设置对页面的呈现实施了更多控制。不只稳定，Android 平台还很灵活。取决于 SDK 等级和制造商，某个设备上的设置极可能不一样于您的开发环境。

　　图 4 显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕容许用户将一个设备设置为一个预先定义的缩放等级(far、near、medium)或请求此设备自动适应页面。