jQuery手機多個HTML文件

這很煩人，但我正在構建一個jQuery手機網站。但是如果我有一個名爲about的頁面，我希望在一個名爲about.html的文件中使用。我設法讓這個工作，但突然間我無法獲得一個鏈接打開一個單獨的頁面。我嘗試了各種各樣的東西，現在我得到一個白頁。jQuery手機多個HTML文件

下面是測試代碼我一直在搞亂：

指數：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Notification Example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
      // Wait for PhoneGap to load 
      // 
      function onLoad() { 
       document.addEventListener("deviceready", onDeviceReady, false); 
      } 

      // PhoneGap is ready 
      // 
      function onDeviceReady() { 
       // Empty 
      } 

      $('#about').live('pagecreate',function(event){ AboutTest(); }); 
      $('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); }); 

      function AboutTest(){ 
       var element = document.getElementById('deviceProperties'); 

       element.innerHTML = 'Device Name: '  + device.name  + '<br />' + 
            'Device PhoneGap: ' + device.phonegap + '<br />' + 
            'Device Platform: ' + device.platform + '<br />' + 
            'Device UUID: '  + device.uuid  + '<br />' + 
            'Device Version: ' + device.version + '<br />'; 
      } 
     </script> 
    </head> 
    <body onload="onLoad()"> 
     <div data-role="page" id="home"> 
      <div data-role="header"><h2>Page 1</h2></div> 
      <div data-role="content"> 
       <a href="about.html" data-url="about.html">testing</a> 
      </div><!-- /content --> 
      <div data-role="footer"><h4>Footer</h4></div> 
     </div><!-- /page --> 
    </body> 
</html>

這裏是我的測試頁面鏈接，about.html：

<div data-role="page" id="about" data-title="about"> 
    <div data-role="header"><h1>Page 2</h1></div> 
    <div data-role="content"><p id="deviceProperties">Loading device properties...</p></div> 
    <div data-role="footer"><h4>Footer</h4></div> 
</div>

現在，這一切都工作正常，JavaScript代碼運行等，然後我改變了一些東西。我不知道是什麼，但我已經打破了它，併爲我的生活我看不到它。一頁內的所有頁面的整個想法看起來很愚蠢，沒有感覺。

來源

2011-05-23 davethecoder

它適用於我，如果您從內容中的鏈接中刪除"data-url='about.html'"。這個屬性是用於頁面div的。

你的第二頁（about.html）可以是一個完整的HTML頁面，只要它包含正文中的當前文本。 jQuery Mobile的工作方式很好，因爲它會加載整個文件，然後提取頁面div。如果這看起來更明智，你可以把多個頁面當作在DOM中緩存東西的一種方式！

來源

2011-05-24 08:36:02

您必須在主索引頁面中將'about'頁面的代碼作爲單獨的div來包含。除非你有一個特殊的理由要有多個頁面？這也會使你的頁面加載速度更快（將所有內容都保存在同一頁面上）。

所以指數目前將有：

<div data-role="page" id="home"> 

    <div data-role="header"><h2>Page 1</h2></div> 

    <div data-role="content"></div> 

    <div data-role="footer"></div> 

</div> 

<div data-role="page" id="about" data-title="about"> 

    <div data-role="header"><h1>Page 2</h1></div> 

    <div data-role="content"><p id="deviceProperties">Loading device properties...</p>  </div> 

    <div data-role="footer"><h4>Footer</h4></div> 

</div>

這是否有意義？另外，您正在經歷加載jQuery的過程，所以您應該真的使用jQuery的內置DOM導航來更新div內容 - 它要容易得多！然後你可以刪除所有的onLoad（）事件等。

如果你想加載頁面在真實外部頁面（如你所說的），你也可以添加rel =「external」到'about '鏈接。

來源

2011-05-23 18:10:51 tatlar

不，如果你閱讀我的文章，我已經說過，我已經使用單獨的文件工作，這是沒有意義的在一個文件不是爲我在做什麼，但我會嘗試額外的rel標籤，看看是否有一個效果，但在它剛剛工作之前，設置了nid網址和數據網址以及繁榮和流動，然後在我的頁面上做了一些更改並且不再有效。 – davethecoder 2011-05-23 18:25:42

您清空了緩存並*然後*重試加載頁面，對不對？如果你做了一些改變，你將需要先清空瀏覽器緩存.... – tatlar 2011-05-23 18:33:42

是啊完成緩存的事情，實際上已經得到所有的HTML現在顯示，只是失去了造型和掛鉤？ bizzare，因爲我defo有這個運行，因此AboutTest（）函數，它實際上填充一個單獨的文件，一旦它已經加載，就像手冊說，它應該加載所有頁面使用Ajax或Hijax？它剛剛停止？ – davethecoder 2011-05-23 18:53:04

你的鏈接，鏈接到「外部網頁」必須具備以下屬性：

rel="external"

您可以選擇添加data-ajax="false"

讓你的鏈接看起來像：

<a href="about.html" data-url="about.html" rel="external">testing</a>

或

<a href="about.html" data-url="about.html" rel="external" data-ajax="false">testing</a>

來源

2012-07-26 13:40:52

爲什麼我們需要禁用數據ajax並將其設爲false？另外，當我使用rel時，過渡效果消失了，任何線索爲什麼？ – Morano88 2012-08-29 11:27:05

jQuery手機多個HTML文件

回答

相關問題