Cara menggunakan JQUERMOBILE pada JavaScript

Saya memiliki kode berikut:

HTML:

JS:

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

Saya menggunakan Jquery Mobile 1.3.1 dan menguji kode ini di mozilla firefox dan google chrome saat ini. Saya akan menggunakannya dalam aplikasi phonegap nanti.

Saya memuat JSON dan menampilkannya di layar dalam tampilan daftar. Sementara itu dimuat, saya ingin program menampilkan "loading spinner". Log konsol menunjukkan bahwa ajaxStart sedang diaktifkan tetapi tidak ada pemintal visual di mana pun di layar.

Apa yang saya lakukan salah? Tolong bantu!

Terima kasih sebelumnya.

Dokumentasi jQuery Mobile apa yang kurang informasi mengenai keberhasilan eksekusi:

$.mobile.loading('show');

dan

$.mobile.loading('hide');

Mereka akan menampilkanHANYAselamapageshowacara. Dalam kasus lain, Anda perlu memasukkannya kesetinterval, seperti ini:

Jika Anda tidak tahu apa-apa tentangpageshowdan acara jQuery Mobile lainnya lihatlah iniARTIKEL, ini adalah blog pribadi saya. Atau temukanDI SINI.

Pertama, Anda tidak akan dapat menampilkan/menyembunyikanAJAXloader tanpa interval yang ditentukan. Hanya ada satu situasi di mana ini dimungkinkan tanpa dan itu adalah selamapageshowacara. Dalam kasus lainsetintervaldiperlukan untuk memulai start loader.

Berikut ini contoh yang berfungsi: http://jsfiddle.net/Gajotres/Zr7Gf/

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);      

Membungkusnya dalam setTimeout karya. Saya hanya memiliki fungsi sederhana untuk melakukannya:

function loading(showOrHide) {
    setTimeout(function(){
        $.mobile.loading(showOrHide);
    }, 1); 
}

Kemudian panggil saja ketika Anda ingin menunjukkan atau menyembunyikan pemintal:

loading('show');

atau

loading('hide');

Ini jsfiddle konyol: http://jsfiddle.net/7UpW5/

Di dalam AJAX panggilan? (tetapi akan bekerja di mana saja)

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

Dan fungsinya sendiri:

function fSpinner( strShowOrHide ) {
    setTimeout( function(){
        $.mobile.loading( strShowOrHide );
    }, 1); 
}

kode untuk jawaban lain tidak bekerja untuk saya dan tidak lengkap (misalnya jika Anda ingin melewatkan parameter akhirnya atau cukup gunakan true/false boolean untuk beralih. Berikut ini memberikan cara yang bagus untuk melakukan ini:

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */
function showLoading( on, params ) {  // on: true|false
    setTimeout( function() {
      if ( on )
        $.mobile.loading( "show", params );
      else {
        //$.mobile.loading( "hide" );  // does not seem to work (e.g. using with GWT and jQM 1.4.3)
        $('.ui-loader').remove();  // removes the loader div from the body
      }       
    }, 1);
}

gunakan seperti ini:

showLoading( true );  // show loader
showLoading( false );  // hide loader

jQuery Mobile 1.0 final sudah habis

Penting: Banyak tutorial sudah tua dan tidak boleh diikuti. Versi jQuery Mobile saat ini adalah 1.0! Harap berhati-hati saat melihat melalui tautan

Saya telah memperbarui jawaban saya untuk menunjukkan sumber yang tepat untuk rilis final

Saya bertanya-tanya apakah ada tutorial untuk orang yang berpengalaman dengan jQuery - untuk mengetahui beberapa konvensi untuk mobile barujQuerykarena akan segera dirilis. Saya terutama menyukai yang menunjukkan cara membuat contoh aplikasi, tapi tolong posting apa yang Anda anggap terbaik. Satu-satunya hal yang diperlukan adalah menunjukkan beberapa penggunaan JS dan acara baru yang diperkenalkan jQueryMobile. Jadi itu bukan pertanyaan tentang tutorial dasar.

Tutorial Dasar TUA:

Saya jelas telah meng-google-nya dan mendapatkan ini: http://blogfreakz.com/mobile-development/jquery-mobile-tutorials/[<- tautan ini ke halaman yang terhubung ke 5 tutorial] yang menunjukkan ide, tetapi tidak terlalu menarik untuk pengembang jQuery.

Ini di sini memiliki beberapa kode jQuery aktual di dalamnya, tetapi tidak banyak: http://thoughtsunlimited.net/intro-to-jquery-mobile/

Jadi pertanyaan ini sebagian besar untuk orang-orang yang sudah mencoba beberapa tutorial dan tahu apa yang akan mereka rekomendasikan. Saya pikir pertanyaan ini mungkin berguna bagi orang-orang di masa depan.

Bounty akan diberikan kepada jawaban yang menautkan ke tutorial yang mencakup sejumlah besar metode yang tersedia dari jQueryMobile.