data-prefetch 適用於 single page template,一個HTML檔案中只有一個Page,例如修改code如下:
myPage1.html完整CODE,註冊了 Page3 init event
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Scripts/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on('pageinit', '#Page1', function (event) {
alert('myPage1 init');
});
$(document).on('pageinit', '#Page2', function (event) {
alert('myPage2 init');
});
$(document).on('pageinit', '#Page3', function (event) {
alert('myPage3 init');
});
</script>
</head>
<body>
<div data-role="page" id="Page1">
<div data-role="header" data-position="fixed">
<h1>myPage1</h1>
</div>
<div data-role="content">
<a href="myPage2.html" data-prefetch="true">Goto Page2</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Scripts/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on('pageinit', '#Page1', function (event) {
alert('myPage1 init');
});
$(document).on('pageinit', '#Page2', function (event) {
alert('myPage2 init');
});
$(document).on('pageinit', '#Page3', function (event) {
alert('myPage3 init');
});
</script>
</head>
<body>
<div data-role="page" id="Page1">
<div data-role="header" data-position="fixed">
<h1>myPage1</h1>
</div>
<div data-role="content">
<a href="myPage2.html" data-prefetch="true">Goto Page2</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
</body>
</html>
myPage2.html完整CODE,含兩個page, Page2、Page3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Scripts/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="Page2" data-position="fixed">
<div data-role="header">
<h1>myPage2</h1>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
<div data-role="page" id="Page3" data-position="fixed">
<div data-role="header">
<h1>myPage2</h1>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
</body>
</html>
執行mypage1.html, 先出現:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Scripts/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="Page2" data-position="fixed">
<div data-role="header">
<h1>myPage2</h1>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
<div data-role="page" id="Page3" data-position="fixed">
<div data-role="header">
<h1>myPage2</h1>
</div>
<div data-role="content">
<p>Page2</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>@Copyright 米米貓</h1>
</div>
</div>
</body>
</html>
隨即載入 page2 :
然後就顯示myPage1了
使用chrome除錯工具檢視,只load page2,沒有load page3
2 則留言:
想請教個問題:
跳到Page2之後, 加了一個button要切換頁面到Page3, 但Page3的頁面資料都不會自動被載入頁面, 請問該如何做呢??
謝謝.
button加data-ajax=false試看看
張貼留言