tutorial - ¿Forma correcta de usar JQuery-Mobile/Phonegap juntos?
jquery mobile online (9)
Así es como funcionó para mí, basado en el ejemplo anterior
<!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>
¿Cuál es la forma correcta (hasta la fecha) de usar JQuery Mobile y Phonegap juntos?
Ambos marcos deben cargar antes de que puedan ser utilizados. ¿Cómo puedo estar seguro de que ambos están cargados antes de que pueda usarlos?
Como muchas personas sugirieron usar un diferido es una opción aceptable siempre y cuando no le importe en qué orden se deviceready y los mobileinit . Pero en mi caso, necesité algunos eventos de pageshow cuando la aplicación se cargó por primera vez y mobileinit en esas pageshow / pagebeforeshow / etc. Todos los eventos se deviceready antes de que el deviceready terminara, por lo que no pude deviceready apropiadamente usando un diferido en ellos. Esta condición de carrera no fue algo bueno.
Lo que tenía que hacer era asegurarme de que ''mobileinit'' no se llevara a cabo hasta después de que '' deviceready '' ya se deviceready disparado. Debido a que mobileinit dispara inmediatamente cuando carga JQM, elegí usar jQuery.getScript para cargarlo DESPUÉS de que el deviceready ya estuviera terminado.
<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 razón por la que estoy ocultando el cuerpo es que un efecto secundario de este método es medio segundo de visibilidad del documento HTML original antes de que se cargue jquery.mobile. En este caso, es preferible esconderlo un medio segundo adicional de espacio vacío para ver el documento sin estilo.
Creo que no es necesario usar la función diferida. (Tal vez esto no es necesario con las versiones más nuevas de phonegap?) Tengo esto en la cabeza de mi archivo index.html y todo funciona bien. Creo que el orden de incluir jquery, phonegap y jquery mobile es importante.
<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>
La carga de PhoneGap es ligeramente diferente a la carga de jQuery. jQuery funciona más como una biblioteca de utilidad, por lo que la incluye y está disponible para su uso inmediato. Por otro lado, PhoneGap requiere soporte del código nativo para una inicialización adecuada, por lo que no está listo para ser utilizado luego de ser incluido en la página.
Phonegap sugiere registrarse y esperar que el deviceready evento ejecute cualquier código específico nativo.
<!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>
Para obtener más información, consulte el doc
Lo siguiente funcionó para mí en PG 2.3 y JQM 1.2, incl. Facebook Connect Plugin:
<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>
Para construir sobre @ la respuesta de Jeffrey, encontré una manera mucho más limpia que oculta el marcado HTML hasta que JQM ha terminado de procesar la página y representa el primer elemento de página, ya que noté ese parpadeo de 1/2 segundo de marcado desnudo antes de que se renderice JQM.
Solo necesita ocultar todo el marcado con css ... PageShow () de JQM le alternará la visibilidad.
//snip
<style type="text/css">
.hide {
display:none;
}
</style>
//snip - now the markup notice the hide class
<div id="page1" data-role="page" class="hide">
//all your regular JQM / html form markup
</div>
//snip -- down to the end of /body
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
document.addEventListener(
''deviceready'',
function () {
$(document).one("mobileinit", function () {
//any JQM init methods
});
$.getScript(''js/jquery.mobile-1.2.0.min.js'');
},
false);
</script>
Para usar phonegap junto con jquery mobile, debes usarlo así
<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>
Puede usar la función diferida de 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
}
esto es trabajo para mi base en dhaval, esta muestra cuando aprendo usando sqlite
<!DOCTYPE html>
<html>
<head>
<title>Cordova Sqlite+Jquery</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">`
// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-1.8.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Populate the database
//
function populateDB(tx) {
tx.executeSql(''DROP TABLE IF EXISTS DEMO'');
tx.executeSql(''CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'');
tx.executeSql(''INSERT INTO DEMO (id, data) VALUES (1, "First row")'');
tx.executeSql(''INSERT INTO DEMO (id, data) VALUES (2, "Second row")'');
}
// Query the database
//
function queryDB(tx) {
tx.executeSql(''SELECT * FROM DEMO'', [], querySuccess, errorCB);
}
// Query the success callback
//
function querySuccess(tx, results) {
var len = results.rows.length;
//console.log("DEMO table: " + len + " rows found.");
$(''#result'').html("DEMO table: " + len + " rows found.");
var listval = '''';
for (var i=0; i<len; i++){
//console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data);
listval += ''<li>''+ results.rows.item(i).data + ''['' + results.rows.item(i).id + ''] </li>'';
}
$(''#listItem'').html(listval);
}
// Transaction error callback
//
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
// Transaction success callback
//
function successCB() {
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(queryDB, errorCB);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
// Now safe to use the Cordova API
//alert(''ready'');
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
//$(''#result'').html(''hello'');
}
</script>
</head>
<body onload="onLoad()">
<div>result:</div><div id="result"></div>
<ul id="listItem">
</ul>
</body>
</html>