此示例使用 jQMchangePage()通过 Ajax 页面请求发送数据。仅当 'to' 参数为changePage()是一个网址。检查jQM 文档了解更多信息。
测试示例的说明：
- 创建文件夹
- 在文件夹内创建一个名为 cars.js 的文件
- 在文件夹内创建一个名为 cars.html 的文件
- 在文件夹内创建一个名为 car-details.html 的文件
- 在每个文件中填写相应的代码，您可以在下面找到
- 打开第一页的 cars.html 并导航
在 car.js 文件中添加以下代码：
$(document).on( "pageinit", "#car-page", function( e ) {
$('#car-list a').on('click', function(e) {
e.preventDefault();
$.mobile.changePage('car-details.html', {
data: {
id: this.id
}
});
});
});
$(document).on( "pageinit", "#car-details-page", function( e ) {
var passedId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*id=/, "" );
$("#details").html(["Selected id is: '", passedId, "'"].join(""));
});
在 cars.html 页面中添加以下代码。
<!doctype html>
<html lang="en">
<head>
<title>Cars example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="./cars.js"></script>
</head>
<body>
<div id="car-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car list</a></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="car-list">
<li><a href="#" data-transition="flip" id="acura">Acura</a></li>
<li><a href="#" data-transition="flip" id="audi">Audi</a></li>
<li><a href="#" data-transition="flip" id="bmw">BMW</a></li>
</ul>
</div>
</div>
</body>
</html>
在 car-details.html 页面中添加以下代码。
<!doctype html>
<html lang="en">
<head>
<title>Car Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="./cars.js"></script>
</head>
<body>
<div id="car-details-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car details</a></h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div id="details"></div>
</div>
</div>
</body>
</html>
实施例2
使用共享 JS 对象的解决方案：
在第二页上，选定的 id 显示在 div 上。此外，URL 包含 id，因此可以将其添加为书签。如果用户通过第一页导航到第二页，则 id 通过共享 JS 变量传递到第二页。如果用户打开带有书签的页面，则从 window.location.href 中提取 id。
请注意，您可以传递 id 或任何其他有助于识别用户选择的值，而不是在共享变量中传递 href 值。
测试示例的说明：
- 创建文件夹
- 在文件夹内创建一个名为 cars.js 的文件
- 在文件夹内创建一个名为 cars.html 的文件
- 在文件夹内创建一个名为 car-details.html 的文件
- 在每个文件中填写相应的代码，您可以在下面找到
- 打开第一页的 cars.html 并导航
在 car.js 文件中添加以下代码：
var passDataObject = { selectedHref: null }
$(document).on( "pageinit", "#car-page", function( e ) {
$(this).find('a').unbind('click').click(function() {
passDataObject.selectedHref = this.href;
});
});
$(document).on( "pageinit", "#car-details-page", function( e ) {
var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace( /.*id=/, "" );
$("#details").html(["Selected id is: '", passedId, "'"].join(""));
});
在 cars.html 页面中添加以下代码：
<!doctype html>
<html lang="en">
<head>
<title>Cars example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="./cars.js"></script>
</head>
<body>
<div id="car-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car list</a></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="car-list">
<li><a href="./car-details.html?id=1" data-transition="flip" id="acura">Acura</a></li>
<li><a href="./car-details.html?id=2" data-transition="flip" id="audi">Audi</a></li>
<li><a href="./car-details.html?id=3" data-transition="flip" id="bmw">BMW</a></li>
</ul>
</div>
</div>
</body>
</html>
在 car-details.html 中添加以下代码：
<!doctype html>
<html lang="en">
<head>
<title>Car Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="./cars.js"></script>
</head>
<body>
<div id="car-details-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car details</a></h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div id="details"></div>
</div>
</div>
</body>
</html>
实施例3
多页示例（地址栏 URL 不会根据汽车选择而改变）
<!doctype html>
<html lang="en">
<head>
<title>Cars example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
var passDataObject = { selectedId: null }
$(document).on( "pageinit", "#car-page", function( e ) {
$(this).find('a').unbind('click').click(function(e) {
e.preventDefault();
passDataObject.selectedId = this.id;
$.mobile.changePage('#car-details-page', { transition: 'flip'} );
});
});
$(document).on( "pagebeforeshow", "#car-details-page", function( e ) {
$("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join(""));
});
</script>
</head>
<body>
<div id="car-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car list</a></h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<ul data-role="listview" id="car-list">
<li><a href="#" id="acura">Acura</a></li>
<li><a href="#" id="audi">Audi</a></li>
<li><a href="#" id="bmw">BMW</a></li>
</ul>
</div>
</div>
<div id="car-details-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Car details</a></h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div id="details"></div>
</div>
</div>
</body>
</html>
我希望这有帮助。
