Jquery mobile framework 可以帮助你开发基于web的富移动应用程序。在这篇教程里，我们将解释一些基本的事情，比如theme selection （主题选择），library usage（库的使用），design pages（页面设计），page links（页面链接）和transition animations （过渡动画）。代码轻便，简单，灵活。它支持流行的智能手机和嵌入平台。使用它可以让你的移动应用更充实。
包含jQuery Mobile库
第一步就是在你的web page头部引入jQuery Mobile的样式表和javascript库文件。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
设计你的web page
jQuery Mobile可以在普通的html标签或html5标签中工作，但是你必须添加一些data属性（data-role，data-theme等等）在html标签中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile | 9Lessons</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<h1>9Lessons</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#"><h2>Google Plus Style Drag and Drop adding Groups</h2></a></li>
<li><a href="#"><h2>Getting Started with Adobe Flex</h2></a></li>
<li><a href="#"><h2>Facebook Wall Script 4.0 Release</h2></a></li>
<li><a href="#"><h2>Login with Google Plus OAuth</h2></a></li>
</ul>
</div>
<div data-role="footer">
<h3>www.9lessons.info</h3>
</div>
</div>
</body>
</html>
自定义列表项
你可以自定义你的文章行，添加一些描述和评论数码。看看如下代码：
<li>
<a href="http://www.9lessons.info/2011/09/google-plus-style-drag-and-drop-adding.html">
<h2>Google Plus Style Drag and Drop adding Groups</h2>
</a>
<p>Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I have tried similar user </p>
<span class="ui-li-count">55</span>
</li>
选择主题样式
Data-theme属性是用来为特定元素选择一个主题的。Data-theme的值可以是a，b，c，d，e。（根据文档data-theme的值可以是a到z，但是还在开发中。） 链接内含页 链接内含页可以使用简单的锚标签。锚链接的href值对应于包含标签的id值。
<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header" data-theme="a">
<h1>9Lessons</h1>
</div>
<div data-role="content">
Linking between pages.
<a href="#about_us" data-role="button" data-inline="true">About Us</a>
</div>
<div data-role="footer">
<h3>www.9lessons.info</h3>
</div>
</div>
<!-- About Us Page -->
<div data-role="page" id="about_us">
<div data-role="header" data-theme="a">
<h1>9Lessons</h1>
</div>
<div data-role="content">
The page contains About Us<br/>
Go back to Home
<a href="#home" data-role="button" data-inline="true">Home</a>
</div>
<div data-role="footer">
<h3>www.9lessons.info</h3>
</div>
</div>
过渡动画
你可以在页面切换时使用过渡动画。Data-transition属性定义过渡效果。
<a href="#slide" data-transition="slide">About Us</a>
说明：原示例 ZIP 附件已经失效，不再提供下载；本文中的示例代码仍然保留。
Demo：http://demos.9lessons.info/demos/jquery_mobile/ 原文：http://www.9lessons.info/2011/12/jquery-mobile-framework-tutorial.html