2012年7月5日 星期四

jQuery Mobile : 關於 data-prefetch (2)

延續 jQuery Mobile : 關於 data-prefetch (1) 一文
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>

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, 先出現:
image
隨即載入 page2 :
image
然後就顯示myPage1了
image
使用chrome除錯工具檢視,只load page2,沒有load page3
image

2 則留言:

匿名 提到...

想請教個問題:
跳到Page2之後, 加了一個button要切換頁面到Page3, 但Page3的頁面資料都不會自動被載入頁面, 請問該如何做呢??
謝謝.

米米貓學開發 提到...

button加data-ajax=false試看看

總瀏覽量