日期：2011/12/14
官方已经正式发布了jQuery Mobile 1.0，今天我们这里将介绍这个流行的移动端框架以帮助大家跨平台开发基于web的应用。 jQuery Mobile是一个流行的jQuery框架的扩展。正如其名，它用来帮助开发基于移动设备的web应用。作为最流行的移动端开发框架之一，它能提供大家一个非桌面应用的解决方案。同时它也被整合到SDK例如PhoneGap中作为本地应用的必要的组件。 支持jQuery的团队非常努力的开发jQuery移动框架，在最后的3个月终于正式发布了。 今天我们来看看jQuery mobile中的一些特性，希望能帮助大家快速的开发出基本的移动客户端应用。
创建页面
在我们正式开始之前，我们需要确认几件事情。首先，我们需要确认我们使用meta标签设置正确的viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
然后，使用这个作为我们在iOS上的首页，我们可以使用app-capable，如下：
<meta name="apple-mobile-web-app-capable" content="yes" />
以上标签并不强制需要，但是设置它们是个不错的主意。
接 下来，我们需要引入CSS及其javascript。当前我们使用缺省的CSS，虽然后面我们将讨论分开的样式结构。对于javascript来说，我们 需要确认我们包括了Version1.6.4的jQuery和jQuery mobile 1.0。jQuery mobile依赖于jQuery，所以你必须倒入jQuery类库。这篇文章书写的时候，最新的jQuery是1.7，但是jQuery mobile目前只支持jQuery1.6.4。当然不久后，将会支持1.7。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
接下来，我们将看看主题部分并且创建一个页面的最典型部分。jQuery Mobile使用HTML5 data属性来指定元素的行为， data-role可能是最常用的属性之一，它定义了元素的页面角色。添加data-role="page"到你的页面中。
<div data-role="page"> <!-- all page content --> </div>
不需要一定是一个div元素，也可以是html5的section元素，但是结果是一样的。这样你创建了你的第一个jQuery Mobile页面。
上面代码中我们使用了data-role属性。我们同样可以使用data-role="header"和data-role="footer"来设置页头和页脚。用data-role="content"来设置主体body
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The Header</h1> </div><!-- /header --> <div data-role="content"> <p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p> </div><!-- /content --> <div data-role="footer"> <h4></h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
如果你使用iphone来展示页面，你将能够看到如下内容：
完整的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Single page template</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="one"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ipsum, non volutpat sapien. Sed consequat gravida eros, vitae convallis dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> </body> </html>
以上是不是很简单，但是这仅仅是开始。使用jQuery Mobile开发将非常迅速。对于快速开发原型及其完整功能的应用都非常合适
创建多重页面(multiple pages)
当然，使用所有的类库来开发一个页面有点过分，接下来我们将介绍最有意思的部分，并且添加一些页面到我们的应用中。
你可以添加俩个新div容器到属性data-role="content"的div对应闭合标签后面，但是页面data-role应该设置id属性为"two"和"three"。同时给前面我们添加的div加上一个id为"one"。 其它部分都不变。代码如下：
<div data-role="page" id="two"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>This is the second page</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> <div data-role="page" id="three"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>This is the third page contents</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div>
如果你现在在移动浏览器中查看效果，可能没有任何变化。因为我们需要将这些页面链接到第一个页面。添加如下代码到第一个页面中：
<a href="#two">Page Two</a> <a href="#three">Page Three</a>
如果你点击第一个页面中属性为href="#two"的链接，你将会看到动画效果并且页面移动到第二个页面中。当然现在你无法返回到第一个页面中。你可以同样添加一个页面link到页面two中，这样就可以返回到页面one。
按钮
目前我们页面比较乏味，但是不用花很大力气我们就可以添加一些按钮让页面更加漂亮。
如果你添加属性data-role="button"到对应链接上，并且刷新页面，你可以看到更漂亮的页面。
主题
目 前我们的页面展现不错，我们可以在页面间导航，但是所有的页面看起来比较呆板。好消息是jQuery Mobile自带了一些不错的主题我们可以使用。这些主题能够快速的帮助开发人员修改颜色和UI的look and feel。这里我们使用data-theme属性。我们添加data-them="a"， data-them="b"，data-theme="c"到每个页面。刷新后，看看效果吧。是不是很酷。
直到最近，唯一的方式来切换你的自定义主题就是引入一个额外的样式表，并且覆盖缺省的。很感谢的是，最近10月份的RC版本已经被拆分成2个分开的实体，使得有空间来添加新的ThemeRoller。第一个样式处理应用的结构，第二个样式处理主题。
去主题切换页面看看吧，你会看到如下页面：
在左手边，你就有你的主题设置。你可以选择过滤每一个部分，并且进行调整。然后使用边栏菜单来进行选择。你可以自己设定最多为26个的主题。然后下载你需要的主题到你的应用中。
下载Zip文件后，你将会有一个index.html文件，这个文件包括了主题文件夹，你可以在这个文件夹中找到图片目录及其2个样式文件。
现在你可以使用这个样式替代缺省的主题CSS。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- INSERT CUSTOM THEME CSS--> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <!-- INSERT STRUCTURE CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> </head>
现在，你通过data-role="theme"来访问你创建的主题。你可以参考你创建的ThemeRoller CSS。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- INSERT CUSTOM THEME CSS--> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <!-- INSERT STRUCTURE CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> <!-- INSERT jQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <!-- INSERT latest jQuery Mobile --> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>The Header</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> </body> </html>
你 可以添加data-theme属性到任何页面元素中。如果你添加到属性为data-role="page"的div中，主题将会应用到页面上所有元素。你 可以切换不同主题试试，看看不同的搭配效果。这里有其它的一些拖放效果。你可以调整颗粒度，阴影，甚至修改颜色亮度及其饱和度。