Jaki jest poprawny sposób (do tej daty) używania JQuery Mobile i Phonegap?Prawidłowy sposób korzystania z JQuery-Mobile/Phonegap razem?
Obie ramki muszą zostać wczytane, zanim zostaną użyte. Jak mogę się upewnić, że oba są ładowane, zanim będę mógł ich użyć?
Można użyć odroczony funkcję jQuery.
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
}
ta odpowiedź powinna uzyskać więcej głosów i być oznaczona jako poprawna. – memical
Tak, to powinna być poprawna odpowiedź. +1 ode mnie. – smanandhar
Czy mógłbyś rozwinąć jeszcze trochę, proszę? Jak wygląda hierarchia plików referencyjnych? Dzięki – farjam
Ładowanie z PhoneGap różni się nieco od ładowania jQuery. jQuery działa bardziej jako biblioteka narzędziowa, więc możesz to uwzględnić i jest ona dostępna do natychmiastowego użycia. Z drugiej strony PhoneGap wymaga obsługi z natywnego kodu dla prawidłowej inicjalizacji, więc nie jest gotowy do użycia wkrótce po uwzględnieniu na stronie.
Phonegap sugeruje rejestrację i oczekiwanie na zdarzenie deviceready podczas wykonywania dowolnego natywnego kodu.
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Example</title>
<script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
<script type="text/javascript">
// jquery code here
</script>
<script type="text/javascript" charset="utf-8" src="lib/android/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
function onDeviceReady() {
// write code related to phonegap here
}
</script>
</head>
<body onload="onLoad()">
<h1>Phonegap Example</h1>
</body>
</html>
Aby uzyskać więcej informacji sprawdź
Ale problem polega na tym, że chcę używać rzeczy phonegap w moim kodzie jquery. W twoim przykładzie cały kod jquery byłby uruchamiany przed załadowaniem nawet phonegapa. Może jeśli umieściłbym cały kod w funkcji onDeviceReady()? . Jak to: $ ("# forma") ("pageinit żyć", function (event) { // phonegapp rzeczy tutaj }); – Juw
jeśli twój '# formularz' jest pierwszą stroną to nie otrzymasz oddzwonienia' pageinit' ponieważ jest za późno – dhaval
Aby korzystać PhoneGap wraz z jQuery komórkowego, trzeba używać go tak jak to
<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>
Nie działa ... – JGallardo
Oto jak to działa na mnie, na podstawie powyższego przykładu
<!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>
To działało również dla mnie, ale jeśli dodaję
Oczywiście próbowałem załadować plik 3 js, który ma logikę biznesową dla mojej aplikacji w doInit(), ale to nie zadziałało. Ten plik zawiera logikę i deklaracje funkcji związane z wydarzeniem, np. $ (document) .delegate ('# fakhera-index-page', 'pageinit', function (event) {...} .Jak mogę to zrobić? – Mustafa
Jak wielu ludzi zasugerował przy użyciu odroczony jest dobra opcja, tak długo jak nie obchodzi mnie, co zamówienie deviceready i mobileinit Ale w moim przypadku potrzebowałem kilku zdarzeń: pageshow, gdy aplikacja została najpierw załadowana i mobileinit i przez to wszystkie zdarzenia pageshow/pagebeforeshow/wszystkie były uruchamiane przed zakończeniem deviceready, więc nie mogłem się do nich poprawnie połączyć za pomocą de napadł na nich. Ten wyścigowy stan nie był dobry.
To, co musiałem zrobić, to upewnić się, że "mobileinit" nie miało miejsca, dopóki "deviceready" nie zostało już wyrzucone. Ponieważ mobileinit uruchamia się natychmiast po załadowaniu JQM, wybrałem użycie jQuery.getScript do załadowania go PO deviceready został już zakończony.
<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>
Powodem Chowam ciała jest to, że efektem ubocznym tej metody jest pół sekundy widoczności oryginalnego dokumentu HTML przed jquery.mobile obciążeń. W tym przypadku ukrywanie go o dodatkowe pół sekundy pustej przestrzeni jest preferowane, aby zobaczyć dokument niezaszyfrowany.
+1 za odpowiedź na to pytanie zainspirowało mnie do rozwiązania mojego problemu z niewielkimi zmianami: najpierw przenieś kod body.hide() do pierwszej linii onBodyLoad(); po drugie przenieś kod body.show() na getScript (jQM_PATH), ponieważ mobileInit() jest wywoływany na każdym JQM Zmiana strony nie jest idealna. Mam nadzieję, że to pomoże innym. – GeorgeW
Czy możesz po prostu dołączyć resztę pliku 'index.html'? – JGallardo
Nie działa to dla mnie, ponieważ cordova usuwa wszystkie pliki, których nie zawierało w znaczniku'
Następujące pracował dla mnie na PG 2.3 i 1.2, wraz JQM. Wtyczka Facebook Connect:
<head>
<script src="./js/jquery-1.8.2.min.js"></script>
<script>
$.ajaxSetup({
dataType : 'html'
});
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(function() {
FB.init({ appId: auth.fbId, nativeInterface: CDV.FB, useCachedDialogs: false });
});
$(document).bind('mobileinit', function() {
jqd.resolve();
});
</script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
<script>
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
$.mobile.ajaxEnabled = false;
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
$('[data-role=page]').live('pagecreate', function(event) {
tpl.renderReplace('login', {}, '#content-inner', function() {
auth.init();
});
});
</script>
<script src="./js/cordova-2.3.0.js"></script>
<script src="./js/cdv-plugin-fb-connect.js"></script>
<script src="./js/facebook_js_sdk.js"></script>
<!--some more scripts -->
<script>
document.addEventListener('deviceready', function() {
dd.resolve();
}, false);
</script>
<head>
Uważam, że nie jest konieczne korzystanie z funkcji odroczonej. (Może nie jest to konieczne w przypadku nowszych wersji phonegap?) Mam to na czele mojego pliku index.html i wszystko działa dobrze. Myślę, że kolejność dołączania jquery, phonegapa i jquery mobile jest ważna.
<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>
, proszę! wybierz odpowiedź !!! – realtebo
mimo że na to zasługuje, nie mam zamiaru dawać +1, dopóki nie zostanie wybrana odpowiedź <3 – Donamite
Jaki problem rozwiązuje się tutaj - co jeśli po prostu podałem referencje do wymaganych plików js dla jQuery i Cordova w moim index.html, a następnie przekierować do strony logowania z trzeciego pliku js, używając jQuery $ .mobile.changePage? Chodzi mi o to, co powstrzymuje ten projekt od pracy i dlaczego potrzebuję rozwiązań opisanych poniżej? Czy to dlatego, że wewnątrz jQuery i/lub Cordova występują obciążenia asynchroniczne, a mój trzeci plik js może zostać załadowany, zanim jeszcze załadowane zostaną 2 frameworki? Proszę zasugeruj. Dzięki – Mustafa