jQueryMobile

♠ Posted by Unknown at 17.05

jQueryMobile


     jQuery Mobile adalah kerangka web untuk menciptakan aplikasi web mobile. jQuery Mobile bekerja pada semua smartphone yang populer dan tablet. jQuery Mobile menggunakan HTML5 & CSS3 untuk meletakkan halaman dengan scripting yang minimal.

Pengetahuan dasar sebelum belajar jQuery Mobile yaitu : 
  • HTML 
  • CSS 
  • jQuery

jQuery Mobile bekerja pada semua smartphone yang populer dan tablet:


     jQuery Mobile dibangun di atas perpustakaan jQuery, yang membuatnya mudah untuk belajar jika Anda sudah tahu jQuery.

     Menggunakan HTML5, CSS3, JavaScript dan AJAX untuk menyelesaikan pekerjaan untuk meletakkan halaman dengan scripting yang minimal.

     jQuery Mobile memecahkan masalah ini, karena hanya menggunakan HTML, CSS dan JavaScript, yang merupakan standar untuk semua browser web mobile.

Menambahkan jQuery Mobile untuk Halaman Web Anda

Ada dua cara untuk menambahkan jQuery Mobile ke situs web Anda. Kamu bisa: 
  • Link ke perpustakaan jQuery Mobile disimpan pada CDN (dianjurkan) 
  • Link ke perpustakaan jQuery Mobile disimpan pada komputer Anda 
   

  1. Viewport tag <meta> di dalam <head> elemen menentukan bagaimana browser harus mengontrol tingkat zoom halaman dan dimensi. 
  2. Width = device-width set lebar halaman untuk mengikuti lebar-layar perangkat (yang akan bervariasi tergantung pada perangkat)
  3. Awal skala = 1 set tingkat zoom awal saat halaman pertama dimuat oleh browser.
     Jika Anda ingin menjadi tuan rumah perpustakaan jQuery Mobile sendiri, Anda harus terlebih dahulu men-download dari jQuery mobile.com.
Kemudian tambahkan kode berikut ke halaman Anda:
  
Tip: Tempatkan file yang didownload dalam direktori yang sama seperti halaman di mana Anda ingin menggunakannya. 
Catatan: Apakah Anda bertanya-tanya mengapa kita tidak memiliki type = "text / javascript" dalam <script> tag?

Hal ini tidak diperlukan dalam HTML5. JavaScript adalah bahasa scripting default pada HTML5 dan di semua browser modern.
Create a Page (Buat Halaman)
Catatan: Meskipun jQuery Mobile bekerja pada semua perangkat mobile, mungkin memiliki beberapa masalah kompatibilitas pada komputer desktop (karena dukungan CSS3 terbatas).  
Di bawah ini, adalah standar halaman jQuery Mobile: 

Contoh menjelaskan:
The data-role="page" adalah halaman yang ditampilkan dalam browser.
The data-role="header" menciptakan toolbar di bagian atas halaman (sering digunakan untuk tombol judul atau pencarian).
The data-role="main" mendefinisikan isi halaman, seperti teks, gambar, tombol, bentuk, dll
The "ui-content" class menambahkan padding tambahan dan marjin dalam konten halaman.
The data-role="footer" menciptakan toolbar di bagian bawah halaman.
Di dalam wadah ini, Anda dapat menambahkan elemen HTML - paragraf, gambar, judul, daftar, dll
Menambahkan Artikel dalam jQuery Mobile
Dalam jQuery Mobile, Anda dapat membuat beberapa halaman dalam satu file HTML. Pisahkan setiap halaman dengan id yang unik dan menggunakan atribut href untuk menghubungkan antara mereka:       
Tip: waktu membuka akan terpengaruh oleh aplikasi web dengan banyak konten (yaitu teks, link, gambar, script dll). Gunakan file eksternal jika Anda tidak ingin link halaman internal:

Menggunakan Pages sebagai Dialog
 
      Sebuah kotak dialog adalah jenis jendela yang digunakan untuk menampilkan informasi khusus atau masukan permintaan.
Untuk membuat kotak dialog yang terbuka ketika pengguna mengetuk link, menambahkan data-dialog = "true" untuk halaman yang ingin ditampilkan sebagai dialog: 
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Mentransformasi 3D.

Efek transisi dapat diterapkan untuk setiap link atau formulir pengajuan dengan menggunakan data atribut-transisi:
 

Efek memudar adalah default pada semua link di jQuery Mobile (jika dukungan browser itu).

Tip: Semua efek di atas juga mendukung tindakan terbalik / mundur, misalnya jika Anda ingin halaman untuk geser dari kiri ke kanan, bukan kanan ke kiri, menggunakan data atribut-arah dengan nilai "reverse".

Membuat Tombol di jQuery Mobile

Sebuah tombol di jQuery Mobile dapat dibuat dalam tiga cara:
  • Menggunakan <input> elemen
  • Menggunakan <button> elemen dengan class = "ui-btn"
  • Menggunakan elemen <a> dengan class = "ui-btn" 
<input>

 


<button>


 <a>
Catatan: Tombol di jQuery Mobile secara otomatis bergaya, membuat mereka menarik dan dapat digunakan pada kedua perangkat mobile dan komputer desktop. Lebih baik menggunakan elemen <a> dengan class = "ui-btn" untuk menghubungkan antara halaman, dan <input> atau <button> elemen untuk pengiriman formulir. 
Tombol navigasi 
Untuk menghubungkan antara halaman dengan tombol, menggunakan elemen <a> dengan class = "ui-btn":
  
Grouped Buttons (Tombol dikelompokkan)
jQuery Mobile menyediakan cara mudah untuk mengelompokkan tombol bersama-sama.

Menggunakan data-role = "controlgroup" atribut bersama-sama dengan data-type = "horisontal | vertikal" dalam elemen kontainer, untuk menentukan apakah tombol kelompok horizontal atau vertikal:
     Secara default, tombol dikelompokkan secara vertikal tanpa margin dan ruang antara mereka. Dan hanya yang pertama dan tombol terakhir telah sudut bulat, yang menciptakan tampilan yang bagus ketika dikelompokkan bersama. 
  
Back Buttons (Tombol Kembali)

Untuk membuat tombol Kembali, menggunakan data-rel = "kembali" atribut (Catatan: ini akan mengabaikan nilai href jangkar ini):
  
Inline Buttons (Tombol Dalam Barisan)

Secara default, tombol mengambil lebar penuh layar. Jika Anda ingin sebuah tombol yang hanya selebar isinya, atau jika Anda ingin dua atau lebih tombol untuk muncul berdampingan, tambahkan kelas "ui-btn-inline" :







Catatan: Jika Anda ingin menggunakan lebih dari satu kelas, memisahkan masing-masing kelas dengan ruang, seperti: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"


Secara default, <input> tombol memiliki bayangan dan sudut bulat. <a> Dan <button> elemen tidak.


Sumber : http://www.w3schools.com/

0 komentar:

Posting Komentar