jQuery Mobile無法在PhoneGap中工作Windows Phone 8

我正在開發一個使用PhoneGap的應用程序& jQuery Mobile。jQuery Mobile無法在PhoneGap中工作Windows Phone 8

我已經完成了應用程序的android版本。我正在使用Adobe PhoneGap構建來構建我的應用程序。 Android版本正在運行完美。但是現在我試圖測試Windows Phone 8版本的應用程序。

我在Visual Studio 2012模擬器中測試了PhoneGap build app.xap。這似乎是jQuery手機不工作。爲了測試目的，我創建了一個示例應用程序。有兩個jQuery mobile頁面。這也不起作用。

請幫我一把。任何幫助將深表感謝。謝謝，=）請告訴我哪裏出了問題。

粘貼我的示例代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <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" /> 
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]--> 
    <link rel="stylesheet" href="css/index.css" /> 
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 

    <title>Hello World</title> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
<div data-theme="a" data-role="header"> 
    <h3> 
     Header 
    </h3> 
</div> 
<div data-role="content"> 
    <a data-role="button" href="#page2"> 
     Button 
    </a> 
</div> 
<div data-theme="a" data-role="footer" data-position="fixed"> 
    <h3> 
     Footer 
    </h3> 
</div> 
</div> 

    <div data-role="page" id="page2"> 
<div data-role="content"> 
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" 
    width="288" height="200"> 
    <a data-role="button" href="#page1"> 
     Button 
    </a> 
    <div data-role="navbar" data-iconpos="top"> 
     <ul> 
      <li> 
       <a href="#page1" data-transition="fade" data-theme="" data-icon=""> 
        Button 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
    <script type="text/javascript" src="cordova-2.5.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html>

這是我得到的輸出：

enter image description here

這就是我需要：

enter image description here

來源

2013-03-06 Rahmathullah M

jQuery Mobile的不支持Windows Phone 8的ficially。請參見支持的平臺：http://jquerymobile.com/gbs/

來源

2013-03-06 05:26:47 Whizkid747

謝謝大家的響應。你能告訴我一些類似jQuery Mobile的其他框架，這與IOS，Android，BB＆Win兼容嗎？ – 2013-03-06 08:45:20

有沒有我可以輕鬆遷移我的應用程序的任何框架？請幫助 – 2013-03-06 08:59:45

儘管jQuery Mobile不支持Windows Phone 8，但它應該稍作調整。似乎有些東西阻止jQM運行。你確定index.js沒有問題嗎？ – Whizkid747 2013-03-06 16:06:49

改變你的頁面下方，並確保仿真器訪問互聯網

<!DOCTYPE html> 
<html> 
<head> 
    <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" /> 
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]--> 
    <link rel="stylesheet" href="css/index.css" /> 
    <link rel="stylesheet" href="http://jquery.mobile/jquery.mobile-1.1.0.css" /> 
    <script type="text/javascript" src="http://jquery.mobile/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="http://jquery.mobile/jquery.mobile-1.2.0.js"></script> 
    <script type="text/javascript" src="cordova-2.5.0.js"></script> 

    <title>Hello World</title> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
<div data-theme="a" data-role="header"> 
    <h3> 
     Header 
    </h3> 
</div> 
<div data-role="content"> 
    <a data-role="button" href="#page2"> 
     Button 
    </a> 
</div> 
<div data-theme="a" data-role="footer" data-position="fixed"> 
    <h3> 
     Footer 
    </h3> 
</div> 
</div> 

    <div data-role="page" id="page2"> 
<div data-role="content"> 
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" 
    width="288" height="200"> 
    <a data-role="button" href="#page1"> 
     Button 
    </a> 
    <div data-role="navbar" data-iconpos="top"> 
     <ul> 
      <li> 
       <a href="#page1" data-transition="fade" data-theme="" data-icon=""> 
        Button 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 

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

    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html>

來源

2013-03-06 05:52:14

謝謝你的答覆。但仍然沒有工作.. :( – 2013-03-06 08:42:34

在我看來，如果風格沒有被應用。這意味着jQuery Mobile庫文件不會被導入某些原因。你最好在真實的設備上試試看看 – 2013-03-06 08:43:45

感謝兄弟， leme檢查它:) – 2013-03-06 12:02:05

把科爾多瓦文件頭，確保它是在頁面的第一個JS文件：

JQM在Windows Phone上運行良好......我遇到了類似於您的問題，並解決了此問題。

來源

2013-04-02 07:26:51 weblivz

事實上jQuery Mobile的做工精細隨着Windows Phone 8

正確的順序加載js文件是：

負載JQuery的本身;僅加載JQuery Mobile css文件;加載你的自定義腳本和CSS;根據需要加載phonegap（cordova）;加載JQuery Mobile作爲最後一個。

這個順序在任何設備上都能正常工作，包括windows phone 8（設備或VS2012模擬器）通常我在我的index.html的HEAD部分加載所有這些東西。如果您有任何疑問，您可以使用描述的科爾多瓦模板直接在VS2012中測試您的項目here

希望得到這個幫助。

來源

2013-04-25 08:52:40 jspassov

我在Windows8上的VS2012中的WP8仿真器中看到了同樣的問題。如果我製作了jQuery文件的本地副本，它可以工作。如果我嘗試從CDN加載它們，它們不會。

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>

WORKS。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

不工作，看起來沒有風格。

我製作了所有Jquery和Jquery mobile js和CSS文件的本地副本，而且我的JQM UI看起來和我期望的完全一樣。

雖然，我仍然好奇，如果有一些模擬器的白名單功能不能正常工作。或者是否存在無法正常使用的hyper-v開關管理器配置。

來源

2013-06-16 05:35:44

我跟着這個link並在VS 2013中安裝phonegap模板。然後我使用phonegap模板創建一個項目並下載了jquery文件並將它們包含在我的html文件中，它的作用就像一個魅力:)由於某種原因CDN引用Jquery不適用於Windows Phone模擬器。

這裏是訂單，你可以參考jQuery的，

<head> 
    <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" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" /> 
    <!--<script type="text/javascript" src="cordova.js"></script>--> 
    <script src="js/jquery-1.11.1.js"></script> 
    <script src="js/jquery.mobile-1.4.2.js"></script> 
    <title>Hello World</title> 
</head>

來源

2014-05-03 09:04:00 Dilanka

jQuery Mobile無法在PhoneGap中工作Windows Phone 8

回答

相關問題