Quelle est la bonne façon (à ce jour) d'utiliser JQuery Mobile et Phonegap ensemble ?
Les deux frameworks doivent être chargés avant de pouvoir être utilisés. Comment puis-je être sûr que les deux sont chargés avant de pouvoir les utiliser ?
Réponses
Trop de publicités?
Vous pouvez utiliser la fonction différée de JQuery.
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).on("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
// TBD
}
Cristian Romanescu
Points
141
Voici comment cela a fonctionné pour moi, sur la base de l'exemple ci-dessus
<!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" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>InforMEA</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
$(document).bind('mobileinit', function () {
jqd.resolve();
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
dd.resolve();
}
function doInit() {
alert('Ready');
}
</script>
</body>
</html>
Coder_sLaY
Points
3315
Afin d'utiliser phonegap avec jquery mobile, vous devez l'utiliser comme suit
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Adding jQuery scripts -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
$.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
$.ajax to load cross-domain pages. -->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.8.0.js"></script>
<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
</head>
<script type="text/javascript">
// Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener
}
</script>
<body>
<div data-role="page" id="something" data-ajax="false">
<script type="text/javascript">
$("#something").on("pageinit", function(e) {
});
$("#something").on("pageshow", function(e) {
});
$("#something").on("pagebeforeshow", function(e) {
});
</script>
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
</body>
Jeffrey Van Alstine
Points
567
Comme beaucoup de gens l'ont suggéré, utiliser un différé est une bonne option tant que vous ne vous souciez pas de l'ordre. deviceready y mobileinit happe in. Mais dans mon cas, j'avais besoin de quelques pageshow lors du premier chargement de l'application et mobileinit et par extension ceux pageshow / pagebeforeshow Les événements /etc étaient tous déclenchés avant deviceready terminé, donc je ne pouvais pas me lier à eux correctement en utilisant un différé sur eux. Cette condition de course n'était pas une bonne chose.
Ce que je devais faire, c'était de m'assurer que 'mobileinit' n'avait pas lieu avant que 'mobileinit' n'ait eu lieu. deviceready Il a déjà été tiré. Parce que mobileinit se déclenche immédiatement lorsque vous chargez JQM, j'ai choisi d'utiliser jQuery.getScript pour le charger APRÈS deviceready était déjà terminé.
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
document.addEventListener(
'deviceready',
function () {
$('body').css('visibility', 'hidden');
$(document).one("mobileinit", function () {
app.init();
$('body').css('visibility', '');
});
$.getScript('js/jquery.mobile-1.2.0.min.js');
},
false
);
</script>La raison pour laquelle je cache le corps est qu'un effet secondaire de cette méthode est une demi-seconde de visibilité du document HTML original avant le chargement de jquery.mobile. Dans ce cas, cacher une demi-seconde supplémentaire d'espace vide est préférable à voir le document non stylisé.
Allie Hoch Janoch
Points
71
Je pense qu'il n'est pas nécessaire d'utiliser la fonction de report. (Peut-être que ce n'est pas nécessaire avec les nouvelles versions de phonegap ?) J'ai ceci dans l'en-tête de mon fichier index.html et tout fonctionne bien. Je pense que l'ordre d'inclusion de jquery, phonegap et jquery mobile est important.
<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" />
<!-- Adding jQuery -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- Add Phonegap scripts -->
<script type="text/javascript" src="phonegap.js"></script>
<!-- Add jQuery mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<title>MY TITLE</title>
</head>
