JQuery-Mobile / Phonegap'i birlikte kullanmanın doğru yolu?

107

JQuery Mobile ve Phonegap'i birlikte kullanmanın (bu tarihe kadar) doğru yolu nedir?

Her iki çerçevenin de kullanılmadan önce yüklenmesi gerekir. Kullanmadan önce her ikisinin de yüklü olduğundan nasıl emin olabilirim?

jquery  jquery-mobile  cordova 
— Juw
kaynak
11
Lütfen ! bir cevap seçin !!!
— realtebo
hak etse de, bir yanıt seçilene kadar bunu + 1'lemeyeceğim <3
— Don Vaughn
1
Burada çözülen asıl sorun nedir - index.html dosyamda jQuery ve Cordova için gerekli js dosyalarına referanslar sağlasam ve ardından jQuery'nin $ .mobile.changePage'ini kullanarak 3. js dosyasından oturum açma sayfasını yeniden yönlendirirsem ne olur? Demek istediğim, bu tasarımın çalışmasını engelleyen nedir ve aşağıda özetlenen çözümlere neden ihtiyacım var? JQuery ve / veya Cordova içinde eşzamansız yükler olması ve 3. js dosyamın 2 çerçeve yüklenmeden önce bile yüklenebilmesi nedeniyle mi? Lütfen önerin. Teşekkürler
— Mustafa
@Mustafa, örneğin ondeviceReadyolay JQM kodunuzdan tetiklenmeden ÖNCE veritabanına erişmeyi deneyebilirsiniz ...
— Mirko

Yanıtlar:

174

JQuery'nin ertelenmiş özelliğini kullanabilirsiniz.

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
}
— Octavian
kaynak
3
bu cevap daha fazla oy almalı ve doğru cevap olarak işaretlenmelidir.
— memical
4
Biraz daha detaylandırır mısınız lütfen? Dosya referanslarının hiyerarşisi nasıl görünür? Teşekkürler
— farjam
2
Lütfen, en son sürümü kullanarak komut dosyası yükleme sırasını ekleyebilir misiniz?
— realtebo
7
Bunun işe yaramadığını söyleyenler için - senaryoyu beyan etme sırası önemlidir. Önce jquery'yi, SONRA BU KODU bir komut dosyası öğesinin içine ekleyin, ardından jquery mobile js'yi ekleyin.
— Manish
1
Peki ya cordova.js? JQM'den önce mi yoksa sonra mı yüklenmeli?
— Ferdinand.kraft
17

Yukarıdaki örneğe göre benim için şu şekilde çalıştı

<!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>
— Cristian Romanescu
kaynak
Bu benim için de çalıştı ancak html etiketi kapatılmadan önce aynı sayfaya <div id = "test-index-page" data-role = "page"> </div> eklersem, sayfa yüklenmiyor ve hata alıyorum . Her iki çerçeveyi de yüklendiği noktadan itibaren üçüncü bir js dosyası kullanarak kullanmaya başlamak istiyorum. Bunu nasıl yaparım?
— Mustafa
Tabii ki uygulamam için iş mantığı olan 3. js dosyasını doInit () içinde yüklemeyi denedim ama işe yaramadı. Bu dosyanın olay bağlama mantığı ve işlev bildirimleri var, örneğin $ (document) .delegate ('# fakhera-index-page', 'pageinit', function (event) {...}. Bunu nasıl yapabilirim?
— Mustafa
7

Jquery mobile ile birlikte phonegap kullanabilmek için bunu şu şekilde kullanmanız gerekir

<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>
— Coder_sLaY
kaynak
6

Pek çok kişinin, ertelenmiş bir kullanımın önerdiği gibi, hangi sıra devicereadyve ne olduğunu umursamadığınız sürece uygun bir seçenektir mobileinit. Ancak benim durumumda, pageshowuygulama ilk yüklendiğinde ve dolayısıyla mobileinitbu pageshow/ pagebeforeshow/ etc olayları Tamamlanmadan önce tüm ateşler deviceready, bu yüzden ertelenmiş bir kullanarak onları düzgün bir şekilde bağlayamadım. Bu yarış durumu iyi bir şey değildi.

Yapmam gereken şey, 'mobileinit'in' 'çoktan çalıştırılana kadar gerçekleşmediğinden emin olmaktı deviceready. Çünkü mobileinitJQM'yi yüklediğinizde hemen patlıyor , Zaten bittikten jQuery.getScriptSONRA yüklemek için kullanmayı seçtim 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>

Gövdeyi gizlememin nedeni, bu yöntemin bir yan etkisinin, jquery.mobile yüklenmeden önce orijinal HTML belgesinin yarım saniyelik görünürlüğü olmasıdır. Bu durumda, stilsiz belgeyi görmek yerine fazladan yarım saniye boş alan gizlemesi tercih edilir.

— Jeffrey Van Alstine
kaynak
1
Cevabınızdaki +1, sorunumu küçük bir değişiklikle çözmem için bana ilham verdi. İlk olarak, body.hide () kodunu onBodyLoad () öğesinin ilk satırına taşıyın; İkinci olarak, body.show () kodunu getScript (jQM_PATH) sonrasına taşıyın; Çünkü mobileInit (), her JQM sayfası geçişinde çağrılır. Uygun değil. Umarım bu başkalarına yardımcı olur.
— GeorgeW
Eğer sadece geri kalanını içerebilirindex.html
— JGallardo
Bu benim için işe yaramadı çünkü cordova, <script>etiket kullanılarak dahil edilmeyen tüm dosyaları kaldırıyordu .
— Chris Snow
2

Ertelenmiş özelliği kullanmanın gerekli olmadığına inanıyorum. (Belki de daha yeni phonegap sürümlerinde bu gerekli değildir?) Bunu index.html dosyamın başındayım ve her şey yolunda gidiyor. Jquery, phonegap ve jquery mobile dahil etme sırasının önemli olduğunu düşünüyorum.

<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>
— Allie Hoch Janoch
kaynak
1

bu benim için iş. dhaval'a göre, bu örnek sqlite kullanmayı öğrendiğimde

<!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>
— Ztuons Ch
kaynak
0

@ Jeffrey'nin cevabını geliştirmek için, JQM sayfayı işlemeyi bitirene kadar HTML işaretlemesini gizleyen ve ilk Sayfa öğesini oluşturan çok daha temiz bir yol buldum, çünkü JQM render etmeden önce 1/2 saniyelik çıplak işaretlemenin titreştiğini fark ettim.

Tüm işaretlemeyi css ile gizlemeniz yeterlidir ... JQM'den PageShow () sizin için görünürlüğü değiştirir. 




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

— Erik
kaynak
Önerinizi denedim ve benim için işe yaramadı. JQM sayfa gösterisi, gizli ilk sayfayı göstermez. Dahası, standart html hala gizlenmeden önce görünür. Sonunda, zamanlamada küçük bir değişiklikle Jeffrey'nin çözümüne dayanarak çalışmasını sağladım. cevabının altındaki yorumuma bakın.
— GeorgeW
0

Aşağıdakiler benim için PG 2.3 ve JQM 1.2'de çalıştı. Facebook Connect Eklentisi:

<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>
— Jens Peters
kaynak
-1

PhoneGap'in yüklenmesi, jQuery'nin yüklenmesinden biraz farklıdır. jQuery daha çok bir yardımcı program kitaplığı olarak çalışır, böylece onu eklersiniz ve hemen kullanılabilir. Öte yandan PhoneGap, uygun başlatma için yerel koddan destek gerektirir, bu nedenle sayfaya eklendikten hemen sonra kullanıma hazır değildir.

Phonegap, devicereadyherhangi bir yerel özel kodu çalıştıran olay için kaydolmanızı ve beklemenizi önerir .

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

Daha fazla bilgi için belgeye bakın

— dhaval
kaynak
1
Ama sorun şu ki jquery kodumda phonegap öğelerini kullanmak istiyorum. Örneğinizde tüm jquery kodu, phonegap yüklenmeden önce çalıştırılacaktır. Belki tüm kodu onDeviceReady () işlevinin içine koyarsam? Bunun gibi: $ ("# form"). Live ("pageinit", function (olay) {// phonegapp şeyler burada});
— Juw
eğer senin #formilk sayfası daha sonra aldığınız alışkanlık pageinitçok geç olarak geri arama
— dhaval
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.