Fatal编程技术网
  • jquery/
  • 一起使用JQuery Mobile/Phonegap的正确方法？

一起使用JQuery Mobile/Phonegap的正确方法？

jquery jquery-mobile cordova

一起使用JQuery Mobile/Phonegap的正确方法？,jquery,jquery-mobile,cordova,Jquery,Jquery Mobile,Cordova,到目前为止，联合使用JQuery Mobile和Phonegap的正确方法是什么 两个框架都需要先加载才能使用。在使用它们之前，我如何确保这两个都已加载？PhoneGap的加载与jQuery的加载略有不同。jQuery更像是一个实用程序库，因此您可以将其包括在内，并且它可以立即使用。另一方面，PhoneGap需要本机代码的支持才能进行正确的初始化，因此在包含在页面中后不久就无法使用 Phonegap建议注册并等待执行任何本机特定代码的deviceready事件 <!DOCTYPE html

到目前为止，联合使用JQuery Mobile和Phonegap的正确方法是什么

两个框架都需要先加载才能使用。在使用它们之前，我如何确保这两个都已加载？

PhoneGap的加载与jQuery的加载略有不同。jQuery更像是一个实用程序库，因此您可以将其包括在内，并且它可以立即使用。另一方面，PhoneGap需要本机代码的支持才能进行正确的初始化，因此在包含在页面中后不久就无法使用

Phonegap建议注册并等待执行任何本机特定代码的
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>


PhoneGap示例
//这里是jquery代码
函数onLoad（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}
//科尔多瓦准备好了
函数ondevicerady（）{
//在此处编写与phonegap相关的代码
}
Phonegap示例
要了解更多信息，请检查

为了将phonegap与jquery mobile一起使用，您需要像这样使用它

<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>  


索引页
$（document）.bind（“mobileinit”，function（）{
$.support.cors=true；
$.mobile.allowCrossDomainPages=true；
});
//在phonegap正确加载后立即调用onDeviceReady（）函数的侦听器
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
函数ondevicerady（）{
navigator.splashscreen.hide（）；
document.addEventListener（“backbutton”，onBackClickEvent，false）；//添加后退按钮侦听器
}
$（“#某物”）。关于（“pageinit”，函数（e）{
});
$（“#某物”）。在（“pageshow”上，函数（e）{
});
$（“#某物”）。在（“pagebeforeshow”，函数（e）{
});
您可以使用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
}
根据上面的例子，下面是它对我的作用

<!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>


InforMEA
var dd=$.Deferred（）；
var jqd=$.Deferred（）；
$.when（dd，jqd）.done（doInit）；
$（文档）.bind（'mobileinit'，函数（）{
jqd.resolve（）；
});
文件。添加的监听器（'DeviceRady'，DeviceRady，false）；
函数devicerady（）{
dd.解决（）；
}
函数doInit（）{
警报（“准备就绪”）；
}
正如许多人所建议的那样，只要你不在乎发生了什么顺序
devicerady
和
mobileinit
，使用延迟是一个不错的选择。但是在我的例子中，当应用程序第一次加载和
mobileinit
时，我需要一些
pageshow
事件，并且扩展到那些
pageshow
/
pagebeforeshow
/etc事件都是在
devicerady
完成之前触发的，因此我无法使用延迟的延迟命令正确绑定到它们。这种比赛状态不是一件好事

我需要做的是确保“mobileinit”在“
deviceready
”被触发之前不会发生。因为加载JQM时，
mobileinit
会立即触发，所以我选择在
devicerady
完成后使用
jQuery.getScript
加载它


document.addEventListener(
“魔兽世界”，
函数（）{
$（'body'）.css（'visibility'，'hidden'）；
$（文档）.1（“mobileinit”，函数（）{
app.init（）；
$（'body'）.css（'visibility'，''）；
});
$.getScript（'js/jquery.mobile-1.2.0.min.js'）；
},
假的
);
我隐藏主体的原因是，该方法的一个副作用是在jquery.mobile加载之前，原始HTML文档的可视性只有半秒。在这种情况下，与查看未设置样式的文档相比，最好多隐藏半秒钟的空白空间。

这对我来说很有用。基于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>


Cordova Sqlite+Jquery
`
//加载Cordova后调用onDeviceReady。
//
//此时，文档已加载，但cordova-1.8.0.js尚未加载。
//加载Cordova并与本机设备通话时，
//它将调用事件“DeviceRady”。
//
函数onLoad（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}
//填充数据库
//
函数填充B（tx）{
tx.executeSql（'DROP TABLE IF EXISTS DEMO'）；
tx.executeSql（'CREATE TABLE IF NOT EXISTS DEMO（id unique，data））；
tx.executeSql（'插入演示（id，数据）值（1，“第一行”）；
tx.executeSql（'插入演示（id，数据）值（2，“第二行”）；
}
//查询数据库
//
函数queryDB（tx）{
tx.executeSql（'SELECT*FROM DEMO'，[]，querySuccess，errorCB）；
}
//查询成功回调
//
函数查询成功（发送，结果）{
var len=results.rows.length；
//log（“演示表：“+len+”找到行”）；
$（'#result'）.html（“演示表：“+len+”找到行”）；
var listval=''；

为了（var i=0；i以@Jeffrey的答案为基础，我找到了一种更干净的方法，在JQM处理完页面并呈现第一个页面元素之前隐藏HTML标记，因为我注意到在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>





//snip
.隐藏{
显示：无；
}
//snip-现在标记注意隐藏类
//所有常规JQM/html表单标记
//剪断--一直剪到/身体的末端
document.addEventListener(
“魔兽世界”，
函数（）{
$（文档）.1（“mobileinit”，函数（）{
//任何JQM init方法
});
$.getScript（'js/jque

<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>



<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>