無法讓jQuery mobile與PhoneGap一起工作

我知道在堆棧溢出上有關於此主題的類似問題;不過，我還沒有弄清楚我的問題。無法讓jQuery mobile與PhoneGap一起工作

我對應用程序開發非常陌生，現在嘗試使用phonegap和jquery mobile爲iphone創建應用程序。不幸的是，我無法正確加載引用的文件。

編輯：

這裏是一個的工作對我來說是新的結構：

在瀏覽器中加載時

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello World</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 

    <script src="jquery_mobile/jquery-1.8.3.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="cordova-2.2.0.js"></script> 
    <link rel="stylesheet" type="text/css" href="jquery_mobile/jquery.mobile-1.2.0.min.css" /> 
    <script src="jquery_mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
    <script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script> 
    <script type="text/javascript"> 
     var deviceReadyDeferred = $.Deferred(); 
     var jqmReadyDeferred = $.Deferred(); 

     document.addEventListener("deviceReady", deviceReady, false); 

     function deviceReady() { 
      deviceReadyDeferred.resolve(); 
     } 

     $(document).one("mobileinit", function() { 
         jqmReadyDeferred.resolve(); 
         }); 

     $.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded); 

     function doWhenBothFrameworksLoaded() { 
      // TBD 
     } 
</script> 
</head> 
<body> 
    <div class="app"> 
     <div id="deviceready" class="blink"> 
      <p class="event listening">Connecting to Device</p> 
      <p class="event received">Device is Ready</p> 
     </div> 
    </div> 

    <!-- Homepage --> 
    <div data-role="page" id="home"> 
     <div data-role="header"> 
      <h1>Some Title</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" data-theme="e"> 
       <li><a href="#about-us">About US</a></li> 
       <li><a href="#">Audi</a></li> 
      </ul> 
     </div><!-- /content --> 
     <div data-role="footer"> 
      <h4>Pgae Footer</h4> 
     </div> 
    </div><!-- /page --> 

    <!-- About Us --> 
    <div data-role="page" id="about-us" data-title="About Us"> 
     <div data-role="header"> 
      <h1>Some Other Title</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <p>About Us</p> 
     </div><!-- /content --> 
     <div data-role="footer"> 
      <h4>Pgae Footer</h4> 
     </div> 
    </div><!-- /page --> 
</body> 
</html>

來源

2012-11-27 farjam

Phonegap要求您將代碼放置在資產/ www項目目錄（至少在android平臺上），無論代碼必須位於www dir中。讓我們繼續這個假設。

如果你有這樣的目錄結構：

的index.html
的js/index.js
CSS/index.css

那麼你就不能有這樣的HREF ：

<link rel="stylesheet" type="text/css" href="/css/index.css" />

而不是使用這一個：

<link rel="stylesheet" type="text/css" href="css/index.css" />

因此，從所有可用的href-s中刪除每個第一個斜槓（「/」）。此外，從SCR atributes像這樣的：

<script type="text/javascript" src="/js/index.js"></script>

也將其更改爲（與/開始，每隔SRC）：

<script type="text/javascript" src="js/index.js"></script>

來源

2012-11-27 16:20:34 Gajotres

謝謝並且對於遲到的回覆感到抱歉。我根據您的建議修復了路徑，並且我可以確認腳本正在加載;然而，由於某種原因，jquery mobile並沒有發揮它的魔力。 – farjam

你可以編輯你的問題，並將其替換爲新的更改的HTML？我們將爲您的問題找到解決方案。 – Gajotres

是否行得通？當然，deviceready在這種情況下不會觸發，但它應該讓您更好地查看腳本運行情況，以便您可以修復其他錯誤。

一些比較明顯的事情來考慮：

凡定義的應用程序？
爲什麼頁面體中的phonegap腳本？
腳本路徑沒有一致的結構。這些網址都正確嗎？

來源

2012-11-27 00:21:13

感謝湯姆，你能告訴我怎樣才能在查看應用程序瀏覽器嗎？我從這裏借用了這個結構（第二個答案）：http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together – farjam

只需雙擊html文件通常就可以了。這不是您可以從中複製的最佳答案。一個更好的選擇是獲得一個純html的jquery移動應用程序工作，然後添加phonegap位。 –

對不起，遲到的迴應。我正在學習xcode接口，以至於我忘記了我實際上可以在瀏覽器中打開該文件並在其中進行調試。我修復了路徑問題，你能告訴我調用jquery mobile和pgonegap腳本的正確方法是什麼嗎？出於某種原因，即使兩個腳本都正確加載，jm並沒有發揮它的魔力。 – farjam

無法讓jQuery mobile與PhoneGap一起工作

回答

相關問題