对话框
使用data-rel属性可以方便地创建弹出式对话框，以下代码将会以对话框形式加载dialog.html页面：
a href="dialog.html" data-rel="dialog">Open dialog
由于对话框在jQueryMobile里面其实和其他page没有任何区别，因此你可以在对话框里添加任何类型的HTML代码，当然你也可以在同一个html文件里创建两个page，一个是主界面：
<div data-role="header">
<h1>Dialog Box</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
另一个是对话框(上面的HREF属性便指向这个对话框page)：
<div data-role="header">
<h1>Dialog Title</h1>
</div><!-- /header -->
<div data-role="content">
This is a dialog box
</div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
要注意以上代码中footer是可选的，但是你必须包括header，因为如果没有header，将无法显示自动生成的对话框关闭按钮。
列表
当你有大量的数据条目需要显示时，列表是一个不错的选择。下面是使用ul时的HTML代码：
<li><a href="#nav1">Henry VIII</a></li>
<li><a href="#nav1">George V</a></li>
<li><a href="#nav1">Prince of Wales</a></li>
<li><a href="#nav1">Elizabeth I</a></li>
<li><a href="#nav1">Elizabeth II</a></li>
</ul>
在jQueryMobile你可以通过data-role="listview"来将一个普通的列表转换成一个非常华丽如同本地APP一般的列表样式：
<li><a href="#nav1">Henry VIII</a></li>
<li><a href="#nav1">George V</a></li>
<li><a href="#nav1">Prince of Wales</a></li>
<li><a href="#nav1">Elizabeth I</a></li>
<li><a href="#nav1">Elizabeth II</a></li>
</ul>
就是这样，仅需要20个字母，你就搞定了这一切。
除此之外，jQueryMobile还为列表提供了一些增强的选项，以下代码将为列表添加分隔符(divider):
<li data-role="list-divider">Royal Family</li>
<li><a href="#home">Henry VIII</a></li>
<li><a href="#home">George V</a></li>
<li><a href="#home">Prince of Wales</a></li>
<li><a href="#home">Elizabeth I</a></li>
<li><a href="#home">Elizabeth II</a></li>
<li data-role="list-divider">Prime Ministers</li>
<li><a href="#home">Winston Churchill</a></li>
<li><a href="#home">Tony Blare</a></li>
<li><a href="#home">David Cameron</a></li>
</ul>
如上面的代码所示，为li元素添加data-role="list-divider"即可实现分隔符的效果。
你还可以为列表添加小气泡来展示一些附加数据(本例展示了英国皇室的统治时间)：
<li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
<li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
<li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
<li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>
下面是一个更加复杂的例子，列表中包含了链接，图片，文本：
<li>
<img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
<h3><a href="index.html">Henry VIII</a></h3>
<p>Reign 37 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" />
<h3><a href="index.html">George V</a></h3>
<p>Reign 25 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
<h3><a href="index.html">Prince of Wales</a></h3>
<p>Reign N/A</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" />
<h3><a href="index.html">Elizabeth I</a></h3>
<p>Reign 44 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" />
<h3><a href="index.html">Elizabeth II</a></h3>
<p>Reign Since 1952</p>
<a href="#home">Details</a>
</li>
</ul>
在你需要展现富文本时这种列表尤为有用，比如显示一个包含照片，名字，平均分等信息的学生名单。
部署你的jQueryMobile站点
当你完成了开发，最后一步当然是让全世界都看到你的工作成果啦~
到现目前为止，jQueryMobile都只是包含了一些HTML，CSS，javascript文件罢了，部署方式与一般的HTML站点无异。用FTP(或者其他你喜欢的方式)上传到你的web服务器就可以了，当然，你要确保你上传了所有用到的文件。
此时已经大功告成，你就可以用你的移动设备访问站点啦!
使用jQueryMobile的目标群是移动设备用户，因此你可以考虑为你的网站创建两个版本，一个为桌面用户准备，另一个则为移动用户(准备比如主站为www.xxxx.com，移动站位m.xxxx.com)。
接下来呢?
jQueryMobile当前版本已经做了非常多的工作，如果你想进入移动开发领域那么现在已经无需再等待了，jQueryMobile让一切都来得那么简单。
