onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.
Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.
In my index.html
<script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>
Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.
In my "js/index.js"
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
var resourcesReady = false;
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
//load scripts
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
$LAB.script("cordova.js").wait(
function(){
document.addEventListener('deviceready', this.onDeviceReady, false);
console.log('We are on Device');
}
);
}else
{
console.log('We are on Browser');
var _this = this;
setTimeout(function(){
_this.onDeviceReady();
}, 1);
}
console.log('app.initialize() Called');
$.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
},
// deviceready Event Handler
onDeviceReady: function() {
console.log("onDeviceReady");
deviceReadyDeferred.resolve();
},
doWhenBothFrameworksReady: function()
{
console.log("doWhenBothFrameworksReady");
resourcesReady = true;
}
};
$(document).one("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
console.log('MobileInit');
jqmReadyDeferred.resolve();
});
function PageShowFunction(e)
{
// we are sure that both frameworks are ready here
}
function CallPageEvent(funcToCall,e)
{
if(resourcesReady)
{
return funcToCall(e);
}else
{
setTimeout(function() {
CallPageEvent(funcToCall,e);
}, 200);
}
}
$(document).ready(function () {
console.log("document ready");
// ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late
// example:
// I use the CallPageEvent beacause this event could be called before the device ready
/*
$("#page").on("pageshow", function(e) {
CallPageEvent(PageShowFunction,e);
}
*/
});
app.initialize();
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
