jQuery Mobile开发入门手册——入门篇
作者：张勇辉更新日期2010-11-03
Blog：www.uedcool
目录
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="bile-1.0a2.min.css">
<script src="jquery-1.4.4.min.js"></script>
<!--这里加入项目中其他的引用-->
<script src="bile-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标准可以更加高效的进行开发，免去了因为声明错误出现的兼容性问题。
HTML5页面基础元素：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>标题</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</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：yourcompanyname/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 标记的简单例子：<meta name="viewport" content="width=device-width" />。当这个metatag 被添加到一个HTML 页面后，我们看到此页面被缩放到更为适合这个移动设备的大小，如图2 所示。如果浏览器不支持此标记，它会简单地忽略此标记。
为了设置特定的值，将viewport metatag 的content 属性设为一个显式的值：<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />。通过改变初始值，屏幕就可以按要求被放大或缩小。将值分别设置在1.0 和1.3 之间对于iPhone 和Android 平台是比较合适的。viewport metatag 还支持最小和最大伸缩，可用来限制用户对呈现页面的控制力。
自具有320x480 布局的iPhone 面世以来，其形态系数就一直没有改变过，而随着来自不同制造商、针对不同用户的更多设备的出现，Android 则有望具备更多样的物理特点。在开发应用程序并以诸如Android 这类移动设备为目标时，一定要考虑屏幕尺寸、形态系数以及分辨率方面的潜在多样性。
除了Android 设备与其他设备之间的这些物理差异之外，经验还表明Android 的软件还通过设备内置的（on-device）浏览器设置对页面的呈现实施了更多控制。不仅稳定，Android 平
>jquery修改html内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。