jQuery Mobile入门学习教程是本文要介绍的内容，主要是来了解jQuery Mobile的使用方法，文中很详解的讲解了jQuery Mobile学习教程。
Android，黑莓还是iphone？为了让你清楚意识到究竟哪些才算是智能手机，我在下面总结了一个智能手机系统/设备的列表：
- AppleiPhone/iPodTouch
- GoogleAndroid
- RIMBlackBerry/PlaybookOS
NokiaSymbian(我承认它该退休了，可是在世界范围内它仍然拥有10亿以上的用户）
- HP/PalmWebOS
- MicrosoftWindowPhone7
没错，这令人眼花缭乱的众多智能手机系统对HTML标准支离破碎的支持，直接导致了处理这些系统浏览器的兼容性成为了你最大的挑战。举例来说，苹果的iphone对HTML5标准有着很好的支持，然而Symbian和MicrosoftPhone系列却几乎不支持HTML5的任何特性（译注：准确的说，是windowsmobile系列，目前的windowsphone7对HTML5支持很好）。jQuery社区为了在解决兼容性和高效创建移动web站点做了大量努力，并开发了jQuery Mobile这个移动框架。而本文旨在为读者介绍仍在alpha版本阶段的jQuery Mobile框架（译注：目前jQuery Mobile已经为beta2版本）的开发基础知识和技巧。
用jQuery Mobile来开发网站
Gartnerstudy(link)的数据表明在未来将会有越来越多的用户通过手机或者平板电脑访问你的网站，到2013年，将会有18亿的移动设备用户，对你的web设计团队来说开发移动站点已经不能再仅仅是“计划”而已了，你必须将你的移动站点迅速变为“现实”才行。
在美国，IOS和Android设备占了很大比重，而美国以外的地方主要是Nokia的设备占统治地位。jQuery Mobile为了在尽可能多的设备上运行，承诺将支持绝大部分移动设备/系统。在早些时候（2010年9月），jQuery的作者JohnResig透露了一张jQuery Mobile对各种设备/系统的支持表格（见下）。对于每个系统来说，jQuery Mobile将他们的支持情况分为A（好），B（一般），C（基本）三个等级。
由于移动设备市场的变幻莫测，这张图表也会迅速变化（一个很好的例子就是目前Nokia正在与Microsoft合作生产基于WindowsPhone7的设备——而在jQuery Mobile中WP7的支持等级为A）。
jQuery Mobile始终贯彻渐进增强的设计观念来满足你的开发需要。jQuery mobile的核心能使得基本的HTML标签在所有的浏览器中生效，在此基础之上，再对网页的行为和效果进行增强，这意味着你的网页在等级较高的浏览器中能获得非常优秀的体验，而在较差的浏览器也能正常的使用。
繁杂的移动浏览器们带来了巨大的挑战。一方面某些浏览器（例如Android的原生浏览器，Safari移动版等）都基于WebKit的一个变种版本（WebKit是一个web渲染引擎，GoogleChrome桌面版，Apple的Safari都采用了该引擎。WebKit并不知道当前运行的网络的好坏，操作系统是什么甚至屏幕滚动到了哪里，为了让WebKit知道这些情况，操作系统/浏览器/设备厂商都需要基于WebKit来构建自己的浏览器程序），并带有丰富的特性。另一方面Nokia的Symbian和WindowsMobile6（及更早的版本）这些胡乱支持标准的设备又占有相当大的市场。雪上加霜的是，WebKit在不同移动设备中还有不同的版本。所以渐进增强的基本目标就是你的内容能够在任何的设备中都能够正常“显示”。
jQuery Mobile使用入门：
使用jQuery Mobile的第一步，先创建一个html页面，并在head标签中加入以下内容：
正如你在代码中看到的，jQuery Mobile是jQuery的一个扩展。目前来说，压缩后的jQuery mobile仅12Kb。
上面的代码均来自jQuery的CDN服务器，css文件中也包含必需的图片链接，如果你需要在你自己的服务器上运行，可以下载下面的文件解压缩后部署到你的服务器上：
- ZipFile:jquery.mobile-1.0b2.zip
在创建第一个jQuery Mobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：
- PageTitle
- Pagecontentgoeshere.
- PageFooter
在模版中有些地方值得我们注意。首先是DIV元素的使用，我们知道，既然HTML5在移动设备中如此流行，为什么不使用更加新的HEADER,ARTICLE,SECTION,FOOTER元素呢？这是因为较老的智能手机浏览器无法明白新的HTML5元素。在某些情况下，例如windowsphone上老版本的IE会出现一个bug使得无法加载页面的css。而DIV元素却被广泛支持。
此时你已经可以保存你的网页并在浏览器中查看了，这些代码同样可以在桌面浏览器中正常工作。我推荐你使用Chrome来进行本地测试。要在真实环境测试，你就需要相应移动设备了。
使用超链接
普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在你的iPhone上加载纽约时报的主页，但你需要缩放它才能顺利阅读上面的内容。这样的体验并不好，而更好的解决方案是减少那些杂乱的内容，只在屏幕上显示你需要显示的内容。
如果是传统的网站，你可能会创建一些包含少量内容的子页面，而当你使用jQuery Mobile时，你最好在页面中包含“微量”的内容，这样才会更有效率。
在上面例子中你已经看到了如何利用模版来创建一个页面。现在让我们更进一步，来创建内容的“page”。jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。现在你可以使用上面的模板来创建一个包含四个跳转到其他页面的链接的导航页面：
- Menu
- Whatvehiclesdoyoulike?
- Cars
- Trains
- Planes
- PageFooter
上面这段代码中第一个div非常重要，它包含有一个id和一个data-role属性：
- data-role="page"id="menu"
data-role定义了这个div是一个“page”，page这个术语稍微有点让人误解，“page”这里其实指的是一个可视面或者在屏幕里未隐藏的HTML代码部分，而不是指的一个单独的页面（或者说单独的HTML文件）。data-role="page"意味着jQuery Mobile会根据div元素在屏幕中构建可视内容。而id属性允许你通过a标签链接到该page，或者其他page。
上面创建的导航页是我们在浏览器看到的第一个页面，接下来我们再添加三个“page”，他们有不同的id：Cars，Planes，Trains。
- Cars
- Wecanaddalistofcars
- PageFooter
- Trains
- Wecanaddalistoftrains
- PageFooter
- Planes
- Wecanaddalistofplanes
- PageFooter
现在，在你的Android或者IOS设备里测试一下，当你加载好页面后你会发现这三件事情：
导航页出现在屏幕中（你可以上下滚动一下，并没有别的东西出现）
当你点击一个链接时，会动画切换到另一个页面。
新页面的顶部会自动出现一个“back”按钮（译注：jQuery Mobile目前版本默认已经取消了这一功能）
其实这些div元素预先会加载并缓存到你的浏览器中，因此“页面”间的切换会非常流畅。
在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数，但同时也会导致许多移动设备运行缓慢。jQuery Mobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接时，你可以这样编写你的链接代码：
madinc.co
如上所示，仅需要为a标签添加rel="external"属性即可。然而jQuery Mobile对于（同域的）外部链接并不是简单地跳转完事儿，相比于其他移动框架它更进了一步，因为他对（同域的）所有链接都采用Ajax调用方式，从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。
使用组件
链接和页面只是移动网页设计中一个很小的部分，APP程序（比如采用Object-C，C#，java等在Android或者IOS设备上创建的本地应用程序）快速增长的同时产生了丰富的控件和组件（例如菜单栏，列表等控件）使得开发者可以很方便地创建复杂的应用程序，这正是许多移动网页开发者第二个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。
针对这一问题，jQuery Mobile当前正在创建一组非常有用的组件。以下是在alpha版本中已经发布的组件：
Pages（页面）
Dialogboxes（对话框）
Toolbars（工具栏）
Buttons（按钮）
Contentformatting（内容格式化）
Formelements（表单）
Listviews（列表）
只要你懂的一点点的HTML，你会发现添加这些组件并不困难，接下来我们看几个例子。
为页面添加header和footer
上面的模版已经为你展示了如何轻松地创建工具栏（header，footer）。我们知道，在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活儿。而现在，jQuery Mobile让你能够非常容易地创建一个带有一个居中标题和两个按钮并且自适应任何屏幕尺寸的header：
- Cancel
- EditContact
- Save
代码中a标签的顺序决定了按钮显示的位置。以上代码在几乎所有的设备中都能取得一致的显示效果。
header和footer同样可以被自定义为你想要的样式，比如改造一个导航条：你可以添加一些按钮在footer里面，从而导航到某一页面的不同部分：
- ElizabethII
- ReignSince1952
- Details
在你需要展现富文本时这种列表尤为有用，比如显示一个包含照片，名字，平均分等信息的学生名单。
部署你的jQuery Mobile站点
当你完成了开发，最后一步当然是让全世界都看到你的工作成果啦~
到现目前为止，jQuery Mobile都只是包含了一些HTML，CSS，javascript文件罢了，部署方式与一般的HTML站点无异。用FTP（或者其他你喜欢的方式）上传到你的web服务器就可以了，当然，你要确保你上传了所有用到的文件。
此时已经大功告成，你就可以用你的移动设备访问站点啦！
使用jQuery Mobile的目标群是移动设备用户，因此你可以考虑为你的网站创建两个版本，一个为桌面用户准备，另一个则为移动用户（准备比如主站为www.xxxx.com，移动站位m.xxxx.com）。
接下来呢？
jQuery Mobile当前版本已经做了非常多的工作，如果你想进入移动开发领域那么现在已经无需再等待了，jQuery Mobile让一切都来得那么简单。
小结：解析jQuery Mobile入门学习教程的内容介绍完了，希望通过本文的学习能对你有所帮助！
