在jquerymobile中我们可以将多个页面写到同一个html中，只要我们按照jquerymobile的要求加上对应的属性，jquerymobile会为我们将他们转变成几个分开的页面，每次显示的时候默认只会显示第一个。下面先看代码然后再解释：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>data-role="page"</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>
<script src="jqm/jquery-1.8.2.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content" id="homecontent">
this is home content!!
<a href="#ohter">Other page</a><a href="helloJQM.html" data-ajax="false">helloJQM.html</a>
</div>
<div data-role="footer" id="footer">
<h4> Footer</h4>
</div>
</div>
<div data-role="page" id="ohter">
<div data-role="header" id="other_header">
<h1>other_header</h1>
</div>
<div data-role="content" id="other_content">
this is other content!!
<a href="#home">Home page</a>
</div>
<div data-role="footer" id="other_footer">
<h4>Other footer</h4>
</div>
</div>
</body>
</html>
在上面代码中我们总共包含了两个页面，分别使用data-role来表示。在jquerymobile中使用data-role=“page”将会创建一个页面，一般会给它一个id值，在这些页面切换的时候会用到这个id值。
在jquerymobile中使用“data-”开头的属性去指定一些jquerymobile中特有的东西，我们使用的data-role只是其中的一个。这里我们使用的是data-role=“page”，jquerymobile将把它处理成为一个页面。
我们可以使用a标签，然后href使用paga的id就可以切换到其他的页面。这里有一个属性data-ajax，默认为true，表示我们是否使用ajax来加载新的网页，在jquerymobile中默认使用的是ajax方式去加载页面，如果将这个属性设置为false，将不会使用ajax方式加载，直接就是进入这个网页。可能大家感觉没什么不同，但是如果我们将这个属性设置为false后，在helloJQM.html(上一篇文章中的代码)将开始的对jquerymobile的引用去掉，显示的页面将不会被jquerymobile处理，如果设置成为true，则会进行处理。这里的原因就是加载方式，使用ajax加载jquerymobile还起作用，如果使用普通跳转，新跳转的网页中没有jquerymobile文件，将不会起作用。
我也是刚学jquerymobile，所以可能有些地方错误，还请指出。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
