JQuery Mobile开发入门手册——入门篇
jQuery Mobile开发入门手册——入门篇
作者：张勇辉 更新日期2010-11-03
Blog： http://www.uedcool.com
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
目录
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
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
概述
此文档是基于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
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
初始配置
在中按顺序加入框架的引用，注意加载的顺序:
ps:建议在meta中加入'”charset=utf-8”的声明，避免出现乱码和响应方面的问题
或者
页面声明
建议在页面中使用HTML5标准的页面声明和标签，因为移动设备浏览器对HTML5标准的支持程度要远远优于PC设备，因此使用简洁的HTML5标准可以更加高效的进行开发，免去了因为声明错误出现的兼容性问题。
HTML5页面基础元素：
标题
技术理论
WebKit 和 HTML5
WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背后的技术。WebKit 也在其他的移动环境内有自己的用武之地，但是我们还是将我们
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
的讨论集中于 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 页能被正确呈现，不再
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
像原来的移动浏览器体验：内容被包裹起来或是根本不显示。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得非常小，甚至不可读，如图 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 平
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
台还很灵活。取决于 SDK 等级和制造商，某个设备上的设置很可能不同于您的开发环境。图 4 显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕允许用户将一个设备设置为一个预先定义的缩放等级（far、near、medium）或请求此设备自动适应页面。
组件
页面
jQuery Mobile应用了HTML5标准的特性，在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。
在body中插入内容块：
data-role="page”代表这个div是一个Page，在一个屏幕中只会显示一个page；
header是标题，content是内容块，footer是页脚
data-role参数表：
参数
说明
page
页面容器，其内部的mobile元素将会继承这个容器上所设置的属性
header
页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer
页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content
页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素
controlgroup
将几个元素设置成一组，一般是几个相同的元素类型
fieldcontain
区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar
功能导航容器，通俗的讲就是工具条
listview
列表展示容器，类似手机中联系人列表的展示方式
list-divider
列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button
按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格
none
阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
完整的页面模版：
Page Title
以上是一个完整的页面结构模版代码，在使用过程中可以根据需要来组合。
页面动画：
data-transition属性可以定义页面切换是的动画效果。
例如：I'll pop
data-transition参数表：
参数
说明
slide
从右侧向左滑入页面
slideup
从底部向上滑入
slidedown
从上向下滑入
pop
从中心渐显展开
fade
渐显
flip
翻转
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入data-direction="reverse"属性，这个属性和原来的data-back="true"相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
化的页面都可以用data-rel="dialog"链接的方式实现模态对话框应用。
例如：Open dialog
这个页面切换效果同样可以使用标准页面的data-transition参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有data-rel="back"的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用href=”#”或者data-rel="back"来实现关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在A页面中点击一个链接打开B对话框,操作完成并关闭对话框,然后跳转到C页面,这时候你点击浏览器的后退按钮，这时候将回到A页面，而不是B页面。
工具条
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jQuery Mobile提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和css兼容性不佳的设备都有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。
实现方式：在标题和页脚区域加入data-position="fixed"属性。
标题容器
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
例如：
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现，或者通过扩展的方式实现：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同，只要把data-role属性的参数设置为”footer”。
例如：
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如：
如果我们需要一组链接效果，我们可以这样写：
技巧：通过使用data-id属性可以让多个页面使用相同的页脚。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
导航
导航容器是一个可以每行容纳最多5个按钮的按钮组控件，用一个拥有data-role="navbar"属性的div来容纳这些按钮。
例子：
在默认的按钮上添加class="ui-btn-active"
如果按钮的数量超过5个，导航容器将会自动以合适的数量分配成多行显示。
按钮
你可以将页面中的任何一个链接通过data-role="button"来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将form类的按钮格式化为jQuery Mobile风格的按钮，不需要添加data-role属性。
框架中包含了一组常用的图标可以用于按钮，用data-icon属性中的参数来定义显示不同的图标效果。
例如：Delete
data-icon原生参数列表
参数
图标
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
除了可以默认显示左侧的图标之外，还可以用data-iconpos属性来定义图标与文字的位置关系。
data-iconpos参数列表：
参数
效果
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
right
图标在文字的右侧
top
图标在文字上面
bottom
图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
内联样式
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了data-inline="true"。
例如：
按钮组
jQuery Mobile框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮间的紧凑关系。例如：
如果需要按钮横向排列可以增加data-type="horizontal"属性。
表单应用
jQuery Mobile框架为原生的html表单元素封装了新的表现形式，对触屏设备的操作进行了优化。在框架的页面中会自动将form元素渲染成jQuery Mobile风格的元素。
form元素的使用和默认的html方式使用相同，可以同样使用Post和get方式提交数据，但是需要注意的是元素的ID命名问题，在常规的规范中同一个页面中是不允许出现相同的ID命名的，在jQuery Mobile中由于其允许在同一个DOM中存在多个页面，所以建议form元素的ID命名在整个项目中是唯一的，防止由于ID问题引发的错误。
默认情况下框架会自动渲染在标准页面中的form元素的风格，一旦成功渲染后，这个控件元素将可以使用jQuery中的函数进行操作。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
在某些情况下，我们需要使用html原生的form元素，为了阻止mobile框架对该元素的自动渲染，在框架中我们在data-role属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以html原生的状态显示。
例如：
列表应用
信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在ul或ol上声明data-role="listview"就可以让框架以列表的方式渲染了，例如：
如果需要在列表里添加数据，则需要在数据加载后执行refresh()方法对列表进行数据更新。
例如：$('ul').listview('refresh');
以上是运用jQuery Mobile进行界面构建的基础规则，后续将完善Ajax和动态创建页面的技术资料。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
作者：张勇辉 更新日期2010-11-03
Blog： http://www.uedcool.com
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
目录
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
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
概述
此文档是基于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
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
初始配置
在中按顺序加入框架的引用，注意加载的顺序:
ps:建议在meta中加入'”charset=utf-8”的声明，避免出现乱码和响应方面的问题
或者
页面声明
建议在页面中使用HTML5标准的页面声明和标签，因为移动设备浏览器对HTML5标准的支持程度要远远优于PC设备，因此使用简洁的HTML5标准可以更加高效的进行开发，免去了因为声明错误出现的兼容性问题。
HTML5页面基础元素：
技术理论
WebKit 和 HTML5
WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背后的技术。WebKit 也在其他的移动环境内有自己的用武之地，但是我们还是将我们
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
的讨论集中于 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 页能被正确呈现，不再
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
像原来的移动浏览器体验：内容被包裹起来或是根本不显示。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得非常小，甚至不可读，如图 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 平
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
台还很灵活。取决于 SDK 等级和制造商，某个设备上的设置很可能不同于您的开发环境。图 4 显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕允许用户将一个设备设置为一个预先定义的缩放等级（far、near、medium）或请求此设备自动适应页面。
组件
页面
jQuery Mobile应用了HTML5标准的特性，在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。
在body中插入内容块：
...
...
...
data-role="page”代表这个div是一个Page，在一个屏幕中只会显示一个page；
header是标题，content是内容块，footer是页脚
data-role参数表：
参数
说明
page
页面容器，其内部的mobile元素将会继承这个容器上所设置的属性
header
页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer
页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content
页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素
controlgroup
将几个元素设置成一组，一般是几个相同的元素类型
fieldcontain
区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar
功能导航容器，通俗的讲就是工具条
listview
列表展示容器，类似手机中联系人列表的展示方式
list-divider
列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button
按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格
none
阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
完整的页面模版：
Page Title
Page content goes here.
Page Footer
以上是一个完整的页面结构模版代码，在使用过程中可以根据需要来组合。
页面动画：
data-transition属性可以定义页面切换是的动画效果。
例如：I'll pop
data-transition参数表：
参数
说明
slide
从右侧向左滑入页面
slideup
从底部向上滑入
slidedown
从上向下滑入
pop
从中心渐显展开
fade
渐显
flip
翻转
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入data-direction="reverse"属性，这个属性和原来的data-back="true"相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
化的页面都可以用data-rel="dialog"链接的方式实现模态对话框应用。
例如：Open dialog
这个页面切换效果同样可以使用标准页面的data-transition参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有data-rel="back"的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用href=”#”或者data-rel="back"来实现关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在A页面中点击一个链接打开B对话框,操作完成并关闭对话框,然后跳转到C页面,这时候你点击浏览器的后退按钮，这时候将回到A页面，而不是B页面。
工具条
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jQuery Mobile提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和css兼容性不佳的设备都有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。
实现方式：在标题和页脚区域加入data-position="fixed"属性。
标题容器
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
Page Title
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
例如：
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现，或者通过扩展的方式实现：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同，只要把data-role属性的参数设置为”footer”。
例如：
Footer content
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如：
如果我们需要一组链接效果，我们可以这样写：
技巧：通过使用data-id属性可以让多个页面使用相同的页脚。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
导航
导航容器是一个可以每行容纳最多5个按钮的按钮组控件，用一个拥有data-role="navbar"属性的div来容纳这些按钮。
例子：
在默认的按钮上添加class="ui-btn-active"
如果按钮的数量超过5个，导航容器将会自动以合适的数量分配成多行显示。
按钮
你可以将页面中的任何一个链接通过data-role="button"来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将form类的按钮格式化为jQuery Mobile风格的按钮，不需要添加data-role属性。
框架中包含了一组常用的图标可以用于按钮，用data-icon属性中的参数来定义显示不同的图标效果。
例如：Delete
data-icon原生参数列表
参数
图标
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
除了可以默认显示左侧的图标之外，还可以用data-iconpos属性来定义图标与文字的位置关系。
data-iconpos参数列表：
参数
效果
更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
right
图标在文字的右侧
top
图标在文字上面
bottom
图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
内联样式
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了data-inline="true"。
例如：
按钮组
jQuery Mobile框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮间的紧凑关系。例如：
如果需要按钮横向排列可以增加data-type="horizontal"属性。
表单应用
jQuery Mobile框架为原生的html表单元素封装了新的表现形式，对触屏设备的操作进行了优化。在框架的页面中会自动将form元素渲染成jQuery Mobile风格的元素。
form元素的使用和默认的html方式使用相同，可以同样使用Post和get方式提交数据，但是需要注意的是元素的ID命名问题，在常规的规范中同一个页面中是不允许出现相同的ID命名的，在jQuery Mobile中由于其允许在同一个DOM中存在多个页面，所以建议form元素的ID命名在整个项目中是唯一的，防止由于ID问题引发的错误。
默认情况下框架会自动渲染在标准页面中的form元素的风格，一旦成功渲染后，这个控件元素将可以使用jQuery中的函数进行操作。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。
在某些情况下，我们需要使用html原生的form元素，为了阻止mobile框架对该元素的自动渲染，在框架中我们在data-role属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以html原生的状态显示。
例如：
列表应用
信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在ul或ol上声明data-role="listview"就可以让框架以列表的方式渲染了，例如：
如果需要在列表里添加数据，则需要在数据加载后执行refresh()方法对列表进行数据更新。
例如：$('ul').listview('refresh');
以上是运用jQuery Mobile进行界面构建的基础规则，后续将完善Ajax和动态创建页面的技术资料。 更多电子书教程请登陆 http://down.zzbaike.com/ebook
本站提供的电子书教程均为网上搜集，如果该教程涉及或侵害到您的版权请联系我们。