一起使用JQuery-Mobile / Phonegap的正确方法？
到目前为止，使用JQuery Mobile和Phonegap的正确方法是什么？
这两个框架在使用前都需要加载。 我怎样才能确保两个都加载之前，我可以使用它们？
您可以使用JQuery的延期function。
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 }
基于上面的例子，以下是它的工作原理
<!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>
为了使用jquery mobile phonegap，你需要像这样使用它
<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>
许多人build议使用延迟是一个好的select，只要你不关心deviceready和mobileinit发生什么命令。但在我的情况下，我需要一些pageshow事件，当应用程序第一次加载和mobileinit和扩展名的pageshow / pagebeforeshow / etc事件都是在deviceready完成之前deviceready ，所以我不能使用延迟绑定到它们。 这种竞争条件不是一件好事。
我需要做的是确保'mobileinit'没有发生，直到' deviceready '已经被解雇。 由于mobileinit在加载JQM时立即触发，我select使用jQuery.getScript在deviceready已经完成后加载它。
<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>
我隐藏身体的原因是这种方法的副作用是在jquery.mobile加载之前原始HTML文档的可见性的半秒。 在这种情况下，隐藏一个额外的半空的空间比看到无格式的文档更受欢迎。
我相信没有必要使用延迟function。 （也许这是没有必要更新版本的phonegap？）我有这在我的index.html文件的头，一切工作正常。 我认为包括jquery，phonegap和jquery mobile的顺序很重要。
<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>
这是我的工作。 基于dhaval，这个示例，当我学习使用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>
为了build立@Jeffrey的答案，我发现了一个更加简洁的方法，它隐藏了HTML标记，直到JQM完成处理页面并呈现第一个页面元素，因为我已经注意到在JQM呈现之前1/2秒的裸露标记闪烁。
你只需要用CSS隐藏所有的标记… JQM的PageShow（）将切换你的可见性。
//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>
以下工作在我的PG 2.3和JQM 1.2，包括。 Facebook连接插件：
<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>
加载PhoneGap与加载jQuery稍有不同。 jQuery更像一个实用程序库，所以你可以直接使用它。 另一方面，PhoneGap需要本地代码的支持才能进行正确的初始化，因此在包含在页面中之后，PhoneGap不会很快就可以使用。
Phonegapbuild议注册并等待deviceready事件执行任何本地特定的代码。
<!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>
欲了解更多信息检查文档
