jQuery Mobile Framework - Form Tutorial

Indonesian (Bahasa Indonesia) translation by Fajar Bahri (you can also view the original English article)

jQuery Mobile adalah Framework mobile web yang relatif baru, dengan rilis pertama yang dibuat pada bulan Oktober 2010. Framework memiliki banyak fitur yang menarik untuk mendukung pengembangan aplikasi mobile berbasis web. Dalam tutorial ini, kita akan fokus pada beberapa elemen dasar jQuery Mobile: struktur halaman, form dan Ajax submit. Tutorial ini didasarkan pada versi 1.0 alpha release 2 dari jQuery Mobile Framework.

Sebagai bagian dari tutorial kita akan menulis aplikasi B2C kecil. Paket pengiriman perusahaan memiliki form di situs web mereka untuk pelanggan memasukkan informasi pada paket yang hilang atau rusak selama pengiriman. Menggunakan perangkat genggam (misalnya web memungkinkan telepon) pelanggan input informasi ke form tentang klaim mereka: nomor pengiriman dari penerimaan asli, nama/alamat dan deskripsi kerugian/kerusakan. Ketika kustomer submit form, situs web merespon dengan id klaim untuk melacak lebih jauh. Skenario ditunjukkan pada diagram berikut:

Gambar 1. Tutorial aplikasi konteks diagram.

jQuery Mobile Framework mendukung berbagai macam browser termasuk perangkat iOS, perangkat Android , Blackberry OS 6, dan webOS (untuk matriks dukungan, lihat http://jquerymobile.com/gbs/). Aplikasi dalam tutorial ini telah diuji terhadap perangkat Android 2.2 dan perangkat iOS 4.1.

Pertimbangan desain

Sebelum masuk ke rincian teknis, mari kita bicara tentang pertimbangan utama desain aplikasi.

waktu respon pendek: sangat disukai untuk aplikasi web yang berisi halaman html tunggal dengan antarmuka pengguna yang sederhana. Semua konstruksi antarmuka pengguna, seperti halaman error dialog dan konfirmasi, akan menjadi bagian dari halaman html. Setelah halaman download ke browser, Bagian yang berbeda dari halaman yang akan ditampilkan kepada pengguna tergantung pada konteks tertentu. Akan ada tidak perlu membuka beberapa sambungan jaringan untuk men-download halaman beberapa kali.
Penanganan Kesalahan: jika pengguna lupa untuk memasukkan bidang yang dibutuhkan, pengajuan harus gagal dengan dialog peringatan. Bidang yang hilang harus mudah bagi pengguna untuk menemukan.
Dukungan untuk beberapa perangkat/browser: aplikasi harus konsisten tampilan dan nuansa dan perilaku di perangkat yang didukung dan browser.

Tentu saja, real-life aplikasi yang khas akan memiliki keinginan tambahan atau yang desain yang berbeda. Untuk tujuan dari tutorial ini, lingkup kami akan terbatas pada pertimbangan-pertimbangan di atas.

Pengenalan jQuery Mobile

Sebagian besar diskusi dalam bagian ini yang telah dipinjam dari dokumentasi di http://jquerymobile.com. Lihat referensi asli untuk rincian lebih lanjut.

jQuery Mobile adalah sistem antarmuka pengguna yang dibangun di atas framework JavaScript populer jQuery. Terdiri dari elemen antarmuka pengguna dan pemrograman konstruksi yang menyediakan fungsionalitas yang konsisten di seluruh berbagai macam browser web ponsel dan komputer. Prinsip-prinsip 'Peningkatan progresif' dan 'Degradasi yang Anggun' berada di balik desain. Fungsionalitas inti dari framework mendukung serangkaian luas platform sedangkan platform baru manfaat dari fitur-fitur yang lebih ditingkatkan.

jQuery Mobile memiliki footprint yang relatif kecil. Sejak konfigurasi dasar dari halaman Mobile jQuery dilakukan murni dengan markup, mungkin untuk mencapai siklus perkembangan cepat, terutama jika aplikasi Anda tidak memerlukan fungsi pemrograman yang rumit. Meskipun dibangun di atas jQuery core, sistem tema jQuery Mobile didasarkan pada framework CSS baru yang bertujuan untuk memisahkan warna dan tekstur dari style struktural yang mendefinisikan sesuatu seperti padding dan dimensi. event handling API menangani sentuhan, mouse, dan kursor pengguna berbasis fokus metode masukan dengan cara bersatu.

jQuery Mobile datang dengan out the box dengan banyak elemen antarmuka pengguna seperti header dan footer Toolbar, tombol dengan ikon, element form (termasuk slider sensitif sentuhan dan toggle switch) dan daftar. style HTML dasar, dua atau tiga kolom grid dan dilipat elemen juga disediakan.

Dimasukkannya jQuery Mobile Perpustakaan

Pada rilis alpha 2 jQuery Mobile 1.0, berikut stylesheet dan perpustakaan JavaScript harus dimasukkan dalam halaman HTML Anda. Anda dapat referensi mereka sebagai berikut atau melayani mereka dari server Anda sendiri:

1
2	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
3	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
4	<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

Wadah dan halaman konten

Mari kita memperkenalkan struktur dasar dari sebuah halaman dalam jQuery Mobile. Halaman dalam jQuery Mobile framework dapat satu halaman atau lokal terkait 'Halaman internal' dalam halaman. Halaman 'wadah' yang akan mencakup satu atau lebih halaman 'isi'. Batas halaman wadah didefinisikan sebagai berikut:

1
2	<div data-role="page">
3	...
4	</div>

Perhatikan bahwa nilai dari atribut data-role adalah page. Di sisi lain, batas halaman konten didefinisikan sebagai berikut:

1
2	<div data-role="content">
3	...
4	</div>

Perhatikan bahwa nilai dari atribut data-role adalah content.

Halaman konten mungkin memiliki terkait header dan footer. Sebagai contoh, sebuah halaman wadah dengan beberapa konten halaman dapat memiliki struktur sebagai berikut:


<div data-role="page">
 
  <div data-role="header">...</div> 
  <div id="contentWithHeaderAndFooter1" data-role="content">...</div> 
  <div data-role="footer">...</div>
  
  <div data-role="header">...</div>
  <div id="contentWithHeaderAndFooter2" data-role="content">...</div> 
  <div data-role="footer">...</div>
	
  <div id="contentWithNoHeaderAndFooter" data-role="content">...</div> 
  
</div>

Ketika sebuah wadah halaman dimuat, semua halaman konten di dalamnya akan terlihat. Dalam aplikasi kita, kita perlu untuk menampilkan konten hanya satu pada satu waktu. Oleh karena itu, kita perlu pemrograman mengendalikan konten yang akan ditampilkan tergantung pada konteks.

Menyembunyikan/menampilkan konten halaman

Untuk menyembunyikan elemen, menggunakan jQuery Mobile API hide() fungsi:

1
2	$('#hdrMain').hide();

akan menyembunyikan header dengan id hdrMain. Di sini, kami menggunakan jQuery ID selector denga memasukan id dari elemen yang kami ingin pilih didahului dengan tanda #. Sebaliknya, fungsi show() menunjukkan sebuah elemen tersembunyi:

1
2	$('#hdrMain').show();

Fungsi hide() dan show() yang berlaku untuk elemen dari berbagai jenis, khususnya,<div>Tag dan anchor (<a> tag). Dalam tutorial ini, kita akan menggunakan fungsi hide() dan show() secara ekstensif untuk menampilkan hanya konteks relevan kepada pengguna aplikasi. Selengkapnya diberikan di bawah ini.

Langkah 1: Struktur halaman aplikasi Demo

Aplikasi demo kami terdiri dari halaman html tunggal, index.html, yang terdiri dari sebuah halaman wadah seperti yang ditunjukkan di bawah ini:


<div data-role="page" data-theme="b" id="page1">

  <!-- ====== main content starts here ===== -->
  <div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">...</div>
  <div data-role="content" id="contentMain" name="contentMain">
    ...
  </div>
  <div data-role="footer" id="ftrMain" name="ftrMain"></div>
  <!-- ====== main content ends here ===== -->
  
  <!-- ====== dialog content starts here ===== -->  
  <div align="CENTER" data-role="content" id="contentDialog" name="contentDialog">
    ...
  </div>
  <!-- ====== dialog content ends here ===== -->  
  
  <!-- ====== transition content page starts here ===== --> 
  <div data-role="content" id="contentTransition" name="contentTransition">
    ...
  </div>
  <!-- ====== transition content ends here ===== --> 
  
  <!-- ====== confirmation content starts here ===== --> 
  <div data-role="header"  id="hdrConfirmation" name="hdrConfirmation" data-nobackbtn="true">...</div>
  <div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">
    ...
  </div>
  <div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div>   
  <!-- ====== confirmation content ends here ===== --> 
    ...
</div><!-- page1 -->

Konten utama berisi form diisi oleh pengguna dan memiliki header dan footer.
Dialog konten yang ditampilkan hanya jika bidang diperlukan form hilang ketika form dikirimkan. Terdiri dari peringatan dan tombol OK untuk menutup dialog. Perhatikan bahwa tidak ada header atau footer.
Transisi isi ditampilkan setelah form dikirimkan sampai respon yang diterima dari server. Ini terdiri dari sebuah gambar "spinner" dengan teks singkat yang menginformasikan pengguna bahwa form mereka sedang disampaikan. Transisi isi juga tidak memiliki header atau footer.
Konfirmasi konten yang ditampilkan setelah response yang diterima dari server. Ini akan menampilkan nomor konfirmasi ke pengguna. Isi konfirmasi memiliki header dan footer.

Transisi konten yang ditampilkan dalam diagram di bawah ini:

Gambar 2. Konten transisi.

Tambahan pengamatan pada kode kode di atas:

Atribut data-theme memungkinkan kita untuk memilih dari style yang tersedia dalam jQuery Mobile Framewpork:<div data-role="page" data-theme="b" id="page1">. Tema default memiliki berbagai warna Swatch bernama a, b, c, d, e, masing-masing menyediakan seperangkat konsisten warna untuk elemen yang berbeda di halaman. Untuk aplikasi kami kami memilih warna sesuai dengan b.
Header dilengkapi dengan tombol kembali. jika tidak perlu tombol kembali dan oleh karena itu memilih untuk menyembunyikan mereka melalui data-nobackbtn = "true".
Hal ini dimungkinkan untuk menyediakan beberapa teks yang akan ditampilkan di footer antara<div>Tag. Di aplikasi kita kita dihilangkan teks di footer.</div> Sebagai hasilnya, pengguna akan melihat di footer hanya bar tipis berwarna yang sama sebagai header. Dengan teks, footer akan memiliki ketinggian serupa sebagai footer dengan teks di dalamnya.

Elemen form

Form klaim terdiri dari bidang-bidang berikut:

Beberapa input field jenis teks: pengiriman nomor, nama pertama, nama akhir, Email, telepon, alamat jalan, kode pos dan kota. Semua kolom yang harus diisi kecuali telepon.
Sebuah select elemen untuk state. Ini adalah bidang yang diperlukan.
Elemen textarea bagi pengguna untuk memasukkan informasi mengenai pengiriman hilang atau rusak. Ini adalah bidang yang diperlukan.

Sebagai contoh, mari kita lihat pada bidang teks untuk pengiriman nomor:


<div id="shipDiv" data-role="fieldcontain">
  <label for="shipNo">Shipping number*</label>	
  <input id="shipNo" name="shipNo_r" type="text" />
</div>

Kami menggunakan label dengan for atribut yang nilainya adalah sama dengan id dari elemen input label yang melekat. Selain itu, kami bungkus label dan input dalam div dengan atribut data-role dihargai sebagai fieldcontain. jQuery Mobile Framework akan menggunakan nilai atribut fieldcontain untuk styling khusus. Selain itu, lihatlah name="shipNo_r". Untuk aplikasi khusus ini, kami memutuskan untuk menentukan nilai atribut name dari setiap elemen bentuk diperlukan untuk nilai dari id atribut ditambahkan oleh _r. Jika elemen tidak diperlukan, nilai atribut name akan sama dengan nilai dari atribut id. Misalnya, karena telepon tidak diisi, didefinisikan sebagai berikut:


<div id="phoneDiv" data-role="fieldcontain">
  <label for="phone">Phone</label>		
  <input id="phone" name="phone" type="text"/>
</div>

Seperti yang kita akan lihat nanti, konvensi penamaan ini khusus akan membantu kita mendeteksi bidang hilang selama pengiriman form.

Elemen penting fprm lain adalah elemen select. Serupa dengan yang di atas, nilai for atribut adalah sama dengan id dari elemen select label yang melekat. Juga, label dan select yang dibungkus dalam sebuah div dengan nilai atribut data-role sebagai fieldcontain. Dengan daftar panjang pilihan yang kita miliki dalam aplikasi ini, jQuery Mobile Framework akan membuka daftar di halaman baru ketika pengguna berfokus pada select elemen.


  <div id="stateDiv" data-role="fieldcontain">
    <label id="stateLabel" for="state">State*</label>		
    <select id="state" name="state_r" tabindex="2">
      <option value="ZZ">Please select a state</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      ...
    </select>
  </div>

Halaman form yang tampil pada telepon Android 2.2 yang ditunjukkan di bawah. Pengguna akan menggulir halaman untuk mengakses elemen dalam form:

Gambar 3. Form halaman di ponsel Android.

Form yang sama ditampilkan dalam iPod touch menjalankan iOS 4.1:

Gambar 4. Formulir halaman pada sebuah iPod touch.

Langkah 2: Definisi Variable

Kita akan referensi berbagai elemen dalam halaman html seluruh kode kita. Masuk akal untuk menentukan referensi tersebut hanya sekali dan menggunakan kembali yang diperlukan. Untuk alasan ini, kita mendeklarasikan variabel global digunakan serta konstanta di bagian head Halaman:

 
<script>	 
  // Global declarations - assignments made in $(document).ready() below
  var hdrMainvar = null;
  var contentMainVar = null;
  var ftrMainVar = null;
  var contentTransitionVar = null;
  var stateLabelVar = null;
  var whatLabelVar = null;
  var stateVar = null;
  var whatVar = null;
  var form1var = null;
  var confirmationVar = null;
  var contentDialogVar = null;
  var hdrConfirmationVar = null; 
  var contentConfirmationVar = null;
  var ftrConfirmationVar = null;
  var inputMapVar = null;
  
  // Constants
  var MISSING = "missing";
  var EMPTY = "";
  var NO_STATE = "ZZ";
</script>

assingmen dari variabel-variabel yang dilakukan di jQuery $(document).ready() fungsi menggunakan ID selector, seperti ditunjukkan di bawah. (Ingat bahwa jQuery $(document).ready() fungsi yang dipanggil ketika DOM seluruh hirarki halaman dimuat. Fungsi adalah lokasi terbaik untuk menginisialisasi variabel kami.) Kita juga mendefinisikan inputMapVar sebagai sebuah koleksi yang terdiri dari semua input elemen dengan _r dalam atribut name mereka (fungsi ini memanggil $('input[name*="_r"]') memilih semua elemen tersebut).


<script>	 
  $(document).ready(function() {
    // Assign global variables
    hdrMainVar = $('#hdrMain');
    contentMainVar = $('#contentMain');
    ftrMainVar = $('#ftrMain');
    contentTransitionVar = $('#contentTransition');
    stateLabelVar = $('#stateLabel');
    whatLabelVar = $('#whatLabel');
    stateVar = $('#state');
    whatVar = $('#what');
    form1Var = $('#form1');
    confirmationVar = $('#confirmation');
    contentDialogVar = $('#contentDialog');
    hdrConfirmationVar = $('#hdrConfirmation');
    contentConfirmationVar = $('#contentConfirmation');
    ftrConfirmationVar = $('#ftrConfirmation'); 
    inputMapVar = $('input[name*="_r"]');
    ...
  });
  ...
</script>

Langkah 3: Pemilihan konten fungsi

Sekarang mari kita perhatikan fungsi-fungsi pemilihan konten yang akan dipanggil oleh event handler.

Untuk menyembunyikan dan menampilkan isi utama dan dengan header/footer, kita menggunakan hideMain() dan showMain() fungsi:


function hideMain(){
  hdrMainVar.hide();
  contentMainVar.hide();
  ftrMainVar.hide();   
}

function showMain(){
  hdrMainVar.show();
  contentMainVar.show();
  ftrMainVar.show();
}

Untuk menyembunyikan dan menampilkan isi transisi, kita menggunakan hideContentTransition() dan showContentTransition() fungsi:

   
function hideContentTransition(){
  contentTransitionVar.hide();
}      

function showContentTransition(){
  contentTransitionVar.show();
}

Untuk menyembunyikan dan menampilkan isi Dialog, kita menggunakan hideContentDialog() dan showContentDialog() fungsi:

   
function hideContentDialog(){
  contentDialogVar.hide();
}   

function showContentDialog(){
  contentDialogVar.show();
}

Akhirnya, untuk menyembunyikan dan menampilkan isi konfirmasi dan dengan header/footer, kita menggunakan hideConfirmation() dan showConfirmation() fungsi:

   
function hideConfirmation(){
  hdrConfirmationVar.hide();
  contentConfirmationVar.hide();
  ftrConfirmationVar.hide();
}  

function showConfirmation(){
  hdrConfirmationVar.show();
  contentConfirmationVar.show();
  ftrConfirmationVar.show();
}

Ketika halaman dimuat, hanya konten utama harus ditampilkan. Untuk alasan ini, halaman konten lain disembunyikan:


<script>	 
  $(document).ready(function() {
    // Assign global variables     
    ...
    hideContentDialog();
    hideContentTransition();
    hideConfirmation(); 
  });
  ...
</script>

Kita akan membahas bagaimana untuk mengikat bersama-sama mereka fungsi pilihan konten dengan event handler di bawah ini.

Langkah 4: Pengiriman Form

Ketika user menekan tombol Kirim kita perlu untuk memvalidasi data form sebelum benar-benar mengirimkan form. Untuk menjaga hal-hal sederhana, kami hanya akan memeriksa jika semua yang diperlukan telah diberikan. Jika validasi form berhasil, kami menampilkan konten transisi yang terdiri dari gambar spinner dengan teks pendek menginformasikan pengguna bahwa form mereka sedang dikirimkan. Jika validasi gagal, kami menampilkan konten dialog yang terdiri dari peringatan dan tombol OK untuk menutup dialog.

Validasi form

Label daro form elemen dengan data yang hilang akan disorot dalam warna merah. Untuk tujuan ini, kami menambahkan class stye baru bernama missing dan memperluas jQuery Mobile label class.


label.missing  {
  color:#FF0000;
  font-weight:bold;
}

Dibawah ini adalah event handler untuk pengiriman form. Dalam notasi khas jQuery, pengidentifikasi untuk form1 dimasukan ke panggilan objek jQuery untuk menangani submit event:


$('#form1').submit(function() {
  var err = false;
  // Hide the Main content
  hideMain();
  
  // Reset the previously highlighted form elements
  stateLabelVar.removeClass(MISSING); 
  whatLabelVar.removeClass(MISSING);              
  inputMapVar.each(function(index){              
    $(this).prev().removeClass(MISSING); 
  });
  
  // Perform form validation
  inputMapVar.each(function(index){  
    if($(this).val()==null || $(this).val()==EMPTY){            
      $(this).prev().addClass(MISSING);            
      err = true;
    }          
  });   
  if(stateVar.val()==NO_STATE){           
    stateLabelVar.addClass(MISSING);                     
    err = true;
  }            
  if(whatVar.val()==null||whatVar.val()==EMPTY){   
    whatLabelVar.addClass(MISSING);   
    err = true;
  }
  
  // If validation fails, show Dialog content
  if(err == true){            
    showContentDialog();
    return false;
  }        

  // If validation passes, show Transition content
  showContentTransition();

  // Submit the form
  $.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
    confirmationVar.text(data);
    hideContentTransition();
    showConfirmation();
  });        
  return false;      
});

Kami mengatur sebuah error flag false dan menyembunyikan konten utama yang berisi form. Kami kemudian reset ulang label sebelumnya yang telah disorot pada masing-masing anggota inputMapVar koleksi. Untuk melakukan itu, kami memasukan sebuah fungsi inline sebagai argumen untuk each() yang hanya berisi $(this).prev().removeClass(MISSING);. Perhatikan bahwa this adalah elemen input dipilih dan prev() mengembalikan simbling sebelumnya yang langsung yang adalah label terkait dengan itu.

state untuk pilihan stae dan untuk apa klaim Deskripsi bukan text Field. Karenanya, label yang sesuai memiliki style reset secara terpisah.

Setelah semua label sebelumnya telah disorot ulang kita kembali elemen-elemen input yang diperlukan untuk memeriksa jika salah satu dari mereka memiliki nilai yang hilang. Jika itu adalah kasus kita tambahkan class hilang dengan label yang terkait dengan input field:


  // Perform form validation
  inputMapVar.each(function(index){  
    if($(this).val()==null || $(this).val()==EMPTY){            
      $(this).prev().addClass(MISSING);            
      err = true;
    }          
  });   
  if(stateVar.val()==NO_STATE){           
    stateLabelVar.addClass(MISSING);                     
    err = true;
  }            
  if(whatVar.val()==null||whatVar.val()==EMPTY){   
    whatLabelVar.addClass(MISSING);   
    err = true;
  }

Selain itu, error flag diatur ke true dan dialog kesalahan ditampilkan. Gambar di bawah menunjukkan kesalahan dialog dalam ponsel Android 2.2 kami:

Gambar 5. Kesalahan dialog.

Setelah pengguna menekan tombol OK, pengguna ditampilkan halaman form dengan bidang hilang yang disorot, seperti yang ditunjukkan di bawah ini. Dalam gambar itu, orientasi layar telepon horisontal. Mengamati bahwa tiap label dan field teks sibling yang ditampilkan dalam satu baris bertentangan dengan orientasi vertikal pada gambar 3 mana label ini di atas bidang teks.

Gambar 6. Form halaman dengan bidang hilang disorot.

Di sisi lain, jika validasi berhasil kami menampilkan konten transisi dan mengirimkan form seperti yang dibahas di bawah ini.

Submit Form melalui Ajax

Pada form submit jQuery Mobile post fungsi yang menerima tiga argumen:

1
2	$.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){...});

Argumen pertama adalah server URL untuk submit form.
Yang kedua adalah form konten untuk di submit. Untuk mendapatkan form konten, kita cukup memanggil serialize() pada objek jQuery memasukan pengidentifikasi untuk form.
Argumen ketiga adalah fungsi in-line untuk memproses respon, data dikirim kembali dari server.

Dicatat bahwa fungsi post melakukan panggilan Ajax yang asynchronous secara alami. Segera setelah memanggil post, pelaksanaan program akan terus dengan mengembalikan false dari fungsi submit dan pengguna akan mulai melihat konten transisi.

Gambar 7. Transisi Halaman ditampilkan selama pengolahan form.

Fungsi in-line untuk memproses respon hanya dijalankan ketika server mengembalikan respon. Untuk Kesederhanaan, aplikasi server pengolahan data form, requestProcessor.php, mengembalikan klaim hard-code id untuk pengguna yang menggunakan untuk referensi di masa mendatang. Sebelum mengirimkan klaim id requestProcessor.php, itu sleep selama 4 detik untuk meniru waktu pengolahan server. Hal ini di periode ini bahwa aplikasi akan menampilkan konten transisi.


<?php
usleep(4000000);

echo('FTREIK12345678');
?>

Ketika menerima respon server, event handler kode dijalankan. Langkah pertama adalah untuk mengisi tag span bernama confirmation dengan nilai kembali dari server. Hal ini dilakukan dengan:

1
2	confirmationVar.text(data);

Kemudian, kita menyembunyikan konten transisi dan menampilkan konten konfirmasi yang berisi tag span bernama confirmation:


<div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">	
    <p>A new claim has been created based on data you have submitted.</p>
    <p>Your confirmation number is: <span id="confirmation" name="confirmation"></span>  </p>
</div>

Halaman konfirmasi yang ditampilkan di ponsel Android 2.2 kami ditampilkan di bawah (telepon orientasi horisontal):

Gambar 8. Halaman konfirmasi di Android 2.2.

Halaman konfirmasi yang sama ditampilkan pada iPod touch sebagai berikut (orientasi vertikal):

Gambar 9. Halaman konfirmasi di iPod touch.

Deploy kode sumber

Kode sumber untuk tutorial memiliki struktur folder yang sederhana. Semua resource yang disimpan dalam folder bernama forms. Dalam folder itu, ada dua sub folder, css dan img. css folder berisi colors.css, yang memiliki v;sdd label.missing, dan img menyimpan wait.gif, gambar spinner. File index.html dan requestProcessor.php berada langsung di bawah folder forms. Dalam pengujian kami, kami menggunakan Apache web server dengan versi 2.2.11 menjalankan PHP versi 5.3.0. Jika Anda menempatkan folder forms langsung di bawah DocumentRoot web server, Anda dapat mengakses aplikasi melalui http://[your_host_name]/folder/index.html.

Kesimpulan

Dalam tutorial ini kami memperkenalkan konsep dasar dari jQuery Mobile Framework dengan fokus pada struktur halaman, dasar styling, elemen form dan pengiriman form Ajax. Sampel klaim pengolahan aplikasi diperkenalkan untuk menunjukkan konsep-konsep tersebut. Kami menyediakan screenshot dari berbagai halaman melaksanakan aplikasi di ponsel Android 2.2 dan iPod touch perangkat dengan iOS 4.1. Beberapa pengamatan dan pidato penutupan diberikan di bawah ini:

Framework jQuery Mobile dibangun pada jQuery core, mereka yang memiliki pengetahuan sebelumnya dari jQuery Framework bisa mendapatkan sampai dengan kecepatan dengan jQuery Mobile Framework dengan mudah.
Kemampuan framework untuk mewakili beberapa konten halaman dalam halaman html tunggal dengan built-in fungsi untuk menampilkan/menyembunyikan halaman konten tersebut muncul sangat nyaman untuk menciptakan sebuah form aplikasi dengan view yang berbeda tergantung pada state. Misalnya, teknik ini dapat diterapkan untuk menerapkan 'wizard' style panduan pengguna atau form multi-halaman survei.
Diuji pada desktop, Android 2.2, dan iOS 4.1 platform, baik tampilan dan nuansa dan fungsional aspek contoh aplikasi yang konsisten. Selama pengembangan, itu harus mungkin untuk cepat menguji dan debug aspek utama dari jQuery Mobile Application platform desktop. Kemudian, lebih banyak pengujian dapat dilakukan pada perangkat individu dan browser yang aplikasi diharapkan untuk didukung.