8
votes

JQuery Mobile ne fonctionne pas dans PhoneGap Windows Phone 8

Je développe une application utilisant PhoneGap & jquery Mobile.

J'ai terminé la version Android de l'application. J'utilise Adobe PhoneGap Build pour construire mon application. La version Android fonctionne parfaitement. Mais maintenant, j'essaie de tester la version Windows Phone 8 de l'application.

J'ai testé la version de PhoneGap app.xap dans l'émulateur Visual Studio 2012. Il semble que le mobile JQuery ne fonctionne pas. Pour des tests, j'ai créé une application exemple. Avec deux jquery mobile page. Que aussi ne fonctionne pas.

S'il vous plaît aidez-moi à sortir. Toute aide un peu serait profondément appréciée. Merci, =) S'il vous plaît dites-moi où ça va mal.

coller mon code d'échantillon: xxx

C'est ce que j'ai eu la sortie:

Entrez la description de l'image ici

C'est ce dont j'ai besoin:

Entrez la description de l'image ici


0 commentaires

6 Réponses :


5
votes

JQuery Mobile ne prend pas officiellement que Windows Phone 8. Voir les plates-formes prises en charge: http://jquerymobile.com/gbs/


5 commentaires

Merci pour votre réponse. Pourriez-vous me dire un autre cadre similaire JQuery Mobile, c'est compatible avec iOS, Android, BB & Win


Y a-t-il un cadre auquel je peux migrer facilement mon application? S'il vous plaît aider


Même si JQuery Mobile ne prend pas en charge Windows Phone 8, il devrait fonctionner avec des modifications mineures. Il semble que quelque chose bloque JQm de courir. Êtes-vous sûr qu'il n'y a pas de problèmes dans Index.js?


I a quelques problèmes avec la version 1.0, mais en cas de remplacement mobile jquery par la version 1.3.1, il fonctionne maintenant comme un charme.


En attendant, il est soutenu par 1.3



0
votes

Modifiez votre page ci-dessous et assurez-vous que l'émulateur a accès à Internet

<!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>


1 commentaires

me semble que si le style ne s'applique pas. Cela signifie que les fichiers de bibliothèque mobile JQuery ne sont pas importés pour une raison quelconque. Vous feriez mieux d'essayer sur un véritable appareil à voir pour de vrai



0
votes

Mettez le fichier Cordova la tête et assurez-vous qu'il est le premier fichier JS de la page:

JQM fonctionne bien sur Windows Phone ... J'avais des problèmes similaires à ceux de la vôtres et cela résolue.


0 commentaires

0
votes

En fait, JQuery Mobile Travail bien avec Windows Phone 8.

L'ordre correct de charger des fichiers JS est le suivant:

charge jQuery lui-même; Charger les fichiers de JQuery Mobile CSS uniquement; Chargez vos scripts personnalisés et CSS; Charger PhoneGap (Cordoue) si nécessaire; Chargez JQuery Mobile comme dernier.

Cette commande fonctionne bien pour moi sur n'importe quel appareil, y compris Windows Phone 8 (périphérique ou émulateur VS2012) Habituellement, je charge tout ce genre de choses dans la section de la tête de mon index.html. Si vous avez des doutes, vous pouvez tester votre projet directement dans VS2012 à l'aide du modèle Cordova comme décrit ici

J'espère que cette aide.


0 commentaires

0
votes

Je vois le même problème dans l'émulateur WP8 à VS2012 sur Windows8. Si je fais une copie locale des fichiers jQuery, cela fonctionne. Si j'essaie de les charger de CDN, ils ne le font pas.

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


0 commentaires

0
votes

j'ai suivi ceci link et installer des modèles téléphonesGap dans VS 2013. Ensuite, je crée un projet à l'aide de fichiers de téléphonesGap et téléchargés des fichiers jQuery et les incluent dans mon fichier HTML et fonctionne comme un charme :) pour une raison quelconque CDN Référence à JQuery ne fonctionne pas avec Windows Phone Simulator.

Voici l'ordre que vous pouvez faire référence à JQuery, P>

<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>


0 commentaires