jQuery Mobile - Panduan Cepat

JQuery Mobile adalah kerangka kerja antarmuka pengguna, yang dibangun di atas jQuery Core dan digunakan untuk mengembangkan situs web atau aplikasi responsif yang dapat diakses di perangkat seluler, tablet, dan desktop. Ini menggunakan fitur jQuery dan jQuery UI untuk menyediakan fitur API untuk aplikasi web seluler.

Ini dikembangkan oleh tim proyek jQuery pada tahun 2010 dan ditulis dalam JavaScript.

Mengapa Menggunakan jQuery Mobile?

  • Ini menciptakan aplikasi web yang akan bekerja dengan cara yang sama di perangkat seluler, tablet, dan desktop.

  • Ini kompatibel dengan kerangka kerja lain seperti PhoneGap, Whitelight, dll.

  • Ini menyediakan satu set input formulir yang ramah sentuhan dan widget UI.

  • Peningkatan progresif menghadirkan fungsionalitas unik ke semua platform seluler, tablet, dan desktop serta menambahkan pemuatan halaman yang efisien dan dukungan perangkat yang lebih luas.

Fitur jQuery Mobile

  • Itu dibangun di atas jQuery Core dan kerangka UI "tulis lebih sedikit, lakukan lebih banyak".

  • Ini adalah kerangka kerja sumber terbuka, dan kompatibel lintas platform serta lintas-browser.

  • Itu ditulis dalam JavaScript dan menggunakan fitur jQuery dan jQuery UI untuk membangun situs yang ramah seluler.

  • Ini mengintegrasikan HTML5, CCS3, jQuery dan jQuery UI menjadi satu kerangka kerja untuk membuat halaman dengan skrip minimal.

  • Ini termasuk sistem navigasi Ajax yang menggunakan transisi halaman animasi.

Keuntungan dari jQuery Mobile

  • Sangat mudah untuk mempelajari dan mengembangkan aplikasi jika Anda memiliki pengetahuan tentang HTML5, fitur CSS3.

  • Ini kompatibel lintas platform dan lintas browser sehingga Anda tidak perlu khawatir tentang menulis kode yang berbeda untuk setiap resolusi perangkat.

  • Anda dapat membuat tema khusus menggunakan ThemeRoller tanpa menulis baris kode. Ini mendukung semua browser HTML5.

  • Ia menggunakan HTML5 bersama dengan JavaScript untuk memudahkan pengembangan aplikasi web.

  • Itu dibangun dengan cara yang memungkinkan kode yang sama untuk secara otomatis menskalakan dari layar ponsel ke layar desktop.

Kekurangan jQuery Mobile

  • Ada pilihan terbatas untuk tema CSS, sehingga situs dapat terlihat serupa yang dibangun oleh tema ini.

  • Aplikasi yang dikembangkan menggunakan jQuery Mobile lebih lambat di ponsel.

  • Ini menjadi lebih memakan waktu ketika Anda menggabungkan jQuery seluler dengan kerangka kerja seluler lainnya.

  • Sulit untuk menyediakan desain visual khusus yang lengkap.

  • Semua fitur di perangkat tidak dapat diakses oleh JavaScript di browser.

Pada bab ini, kita akan membahas cara menginstal dan mengatur jQuery Mobile.

Unduh jQuery Mobile

Saat Anda membuka tautan jquerymobile.com/ , Anda akan melihat ada dua opsi untuk mengunduh perpustakaan seluler jQuery.

  • Custom Download - Klik tombol ini untuk mengunduh versi pustaka yang disesuaikan.

  • Latest Stable - Klik tombol ini untuk mendapatkan pustaka seluler jQuery versi terbaru dan stabil.

Download Kustom dengan Download Builder

Menggunakan Download Builder, Anda bisa membuat build kustom yang hanya menyertakan bagian library yang Anda butuhkan. Saat Anda mengunduh versi baru jQuery Mobile yang disesuaikan ini, Anda akan melihat layar berikut.

Anda dapat memilih perpustakaan sesuai dengan kebutuhan Anda dan klik Build My Download tombol.

Unduhan stabil

Klik tombol Stabil , yang mengarah langsung ke file ZIP yang berisi file CSS dan JQuery, untuk versi terbaru pustaka seluler jQuery. Ekstrak konten file ZIP ke direktori seluler jQuery.

Versi ini berisi semua file termasuk semua dependensi, banyak koleksi demo, dan bahkan rangkaian pengujian unit perpustakaan. Versi ini berguna untuk memulai.

Unduh jQuery Library dari CDN

CDN (Content Delivery Network) adalah jaringan server yang dirancang untuk menyajikan file kepada pengguna. Jika Anda menggunakan tautan CDN di halaman web Anda, ini memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal. Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan jQuery seluler dari CDN yang sama, itu tidak perlu diunduh ulang. Anda dapat menyertakan file CDN berikut ke dalam dokumen HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Kami menggunakan versi CDN pustaka sepanjang tutorial ini. Kami menggunakan AMPPS (AMPPS adalah tumpukan WAMP, MAMP, dan LAMP dari server Apache, MySQL, MongoDB, PHP, Perl & Python) untuk menjalankan semua contoh kami.

Contoh

Berikut ini adalah contoh sederhana jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Rincian kode di atas adalah -

  • Kode ini ditentukan di dalam elemen head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
    • Area pandang digunakan untuk menentukan (oleh browser) untuk menampilkan tingkat dan dimensi zoom halaman.

    • content = "width = device-width" digunakan untuk mengatur lebar piksel halaman atau perangkat layar.

    • initial-scale = 1 menyetel tingkat zoom awal, saat halaman dimuat untuk pertama kalinya.

  • Sertakan CDN berikut

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  • Konten di dalam tag <body> adalah halaman yang ditampilkan di browser.

<div data-role = "page">
   ...
</div>
  • data-role = "header" membuat header di bagian atas halaman.

  • data-role = "main" digunakan untuk menentukan konten halaman.

  • data-role = "footer" membuat footer di bagian bawah halaman.

  • class = "ui-content" menyertakan padding dan margin di dalam konten halaman.

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

  • Simpan kode html di atas sebagai simple_example.html file di folder root server Anda.

  • Buka file HTML ini sebagai http: //localhost/simple_example.html dan keluaran berikut akan ditampilkan.

Pengguna dapat berinteraksi dengan halaman Mobile jQuery, yang mengelompokkan konten menjadi tampilan logis dan tampilan halaman. Tampilan halaman dapat dianimasikan menggunakan transisi halaman. Beberapa halaman dapat dibuat menggunakan dokumen HTML dan oleh karena itu, tidak perlu meminta konten dari server.

Tabel berikut menunjukkan tipe halaman secara detail.

Sr.No. Jenis & Deskripsi
1 Halaman tunggal

Satu halaman dibuat dalam dokumen HTML menggunakan cara standar penulisan template.

2 Template Multi-Halaman

Beberapa halaman dapat disertakan dalam satu dokumen HTML, yang dimuat bersama dengan menambahkan beberapa div dengan data-role = "page" .

3 Halaman Dialog

Dialog Modal membuka konten dalam overlay interaktif di atas halaman.

Konvensi, bukan persyaratan

  • Elemen atribut peran data seperti header, footer, halaman, dan konten digunakan untuk memberikan format dan struktur dasar halaman.

  • Untuk dokumen satu halaman, pembungkus halaman diperlukan untuk inisialisasi otomatis disetel sebagai opsional.

  • Elemen struktural dapat dikecualikan untuk halaman web dengan tata letak khusus.

  • Untuk mengelola halaman, pembungkus halaman dimasukkan oleh kerangka kerja jika tidak disertakan oleh markup.

Mengambil halaman lebih dulu

Dengan menyertakan atribut data-prefetch , kita dapat mengambil lebih dulu halaman-halaman ke dalam DOM dalam template halaman tunggal. Untuk informasi lebih lanjut klik di sini .

Cache DOM

Ketika memori browser penuh di DOM, maka itu memperlambat browser seluler atau mungkin macet karena memuat banyak halaman. Ada metode sederhana untuk menjaga kerapian DOM -

  • Saat halaman dimuat melalui ajax, ini menunjukkan untuk menghapus halaman dari DOM saat Anda mengarahkan ke halaman lain.

  • Halaman sebelumnya yang telah Anda kunjungi dapat diambil kembali dari cache saat Anda mengunjunginya kembali.

  • Daripada menghapus halaman, Anda dapat memberi tahu jQuery mobile untuk menyimpannya di DOM dengan menggunakan baris berikut -

$.mobile.page.prototype.options.domCache = true;
  • Setel opsi domCache sebagai benar pada plugin halaman untuk menyimpan semua halaman di DOM, yang telah dikunjungi sebelumnya.

pageContainerElement.page({ domCache: true });

jQuery Mobile menyediakan satu set ikon built-in, yang dapat digunakan dengan tombol, tombol listview yang akan membuat tombol lebih menarik.

Tabel berikut mencantumkan beberapa ikon yang digunakan dalam kerangka kerja jQuery Mobile.

Sr.No. Area Ikon & Deskripsi
1 Set Ikon

Ini mengatur ikon di tombol.

2 Ikon Penempatan

Ini menentukan posisi ikon di tombol.

3 Ikon saja

Ini hanya menampilkan ikon di tombol.

4 Bayangan ikon

Ini menambahkan bayangan ikon di tombol Anda.

5 Menghapus Lingkaran

Ini menghilangkan lingkaran abu-abu di sekitar ikon.

6 Ikon Hitam atau Putih

Ini mengubah warna ikon menjadi hitam atau putih.

7 Menggabungkan alt dan nodisc

Ini menggabungkan kelas alt dan nodisc ke ikon.

Ini memungkinkan untuk mengubah nilai properti yang terjadi selama durasi yang ditentukan dan mengubah perilaku elemen dari satu keadaan ke keadaan lain dengan menerapkan gaya berbeda untuk setiap keadaan.

Tabel berikut mencantumkan beberapa transisi halaman yang digunakan dalam kerangka kerja jQuery Mobile -

Sr.No. Transisi & Deskripsi Untuk Halaman Untuk Dialog
1

fade

Anda dapat membuat elemen memudar masuk dan keluar dari visibilitas.

Fade Page Fade Dialog
2

flip

Balik elemen dari belakang ke depan ke halaman berikutnya.

Balik Halaman Balik Dialog
3

pop

Anda dapat membuat jendela popup.

Halaman Pop Dialog Pop
4

flow

Tampilkan halaman berikutnya dengan menjauhkan halaman saat ini.

Flow Page Flow Dialog
5

slide

Anda dapat menggeser halaman dari kanan ke kiri.

Halaman Slide Dialog Geser
6

slidefade

Menggeser halaman dari kanan ke kiri dan memudar di halaman berikutnya.

Halaman Slidefade Dialog Slidefade
7

slideup

Menggeser halaman dari bawah ke atas.

Halaman Slideup Dialog Slideup
8

slidedown

Geser halaman dari atas ke bawah.

Halaman Slidedown Dialog Slidedown
9

turn

Anda dapat beralih ke halaman berikutnya.

Balikkan Halaman Putar Dialog
10

none

Anda tidak dapat menggunakan efek transisi apa pun dengan menggunakan atribut ini.

Tidak Ada Halaman Tidak Ada Dialog

Mengatur Transisi dan Konfigurasi Global

Secara default, halaman akan memiliki fadetransisi dalam kerangka. Anda dapat menggunakan transisi khusus dengan menambahkandata-transitionatribut ke tautan. Anda dapat menggunakan efek transisi default yang berbeda untuk halaman yang menggunakandefaultPageTransitionopsi secara global. Untuk dialog, Anda dapat memanfaatkandefaultDialogTransition pilihan.

Transisi Fallback

Semua transisi mendukung transformasi 3D kecuali transisi fade. Perangkat yang tidak mendukung transformasi 3D, mereka harus menggunakan transisi fade. Beberapa browser tidak mendukung transformasi 3D untuk setiap jenis transisi, jadi Anda dapat menggunakanfade sebagai fallback transisi default.

Max Scroll untuk Transisi

Transisi disetel ke none saat Anda menggulir dari atau ke halaman dan posisi gulir akan menjadi tiga kali tinggi layar perangkat. Terkadang, Anda mungkin lambat dalam merespons atau browser mungkin macet saat Anda mengklik elemen navigasi apa pun; jadi untuk menghindari ini kami menggunakan posisi gulir untuk transisi dengan menggunakangetMaxScrollForTransition fungsi.

Lebar Maks untuk Transisi

Anda dapat menonaktifkan transisi ketika lebar jendela lebih tinggi dari lebar piksel. Anda dapat mengonfigurasi lebar maksimal untuk transisi menggunakan$.mobile.maxTransitionWidthopsi global, yang disetel ke false secara default. Dibutuhkan nilai seperti lebar piksel atau nilai salah, dan transisi akan disetel ke tidak ada jika bukan nilai salah saat jendela lebih tinggi dari nilai yang ditentukan.

Transisi Halaman yang Sama

Anda dapat menambahkan transisi ke halaman saat ini menggunakan allowSamePageTransition pilihan widget penampung halaman change() metode.

Membuat Transisi Kustom

Anda dapat membuat transisi kustom di halaman menggunakan $.mobile.transitionHandlers opsi yang memperluas pemilihan transisi di situs web atau aplikasi.

Sistem kisi digunakan untuk membuat tata letak halaman melalui serangkaian baris dan kolom yang menampung konten Anda.

Tabel di bawah ini menunjukkan jenis kisi secara mendetail.

Sr.No. Jenis & Deskripsi
1 Kotak

Sistem jaringan seluler jQuery membuat tata letak halaman melalui serangkaian baris dan kolom.

2 Tombol dalam kisi

Kumpulan tombol dalam format grid di jQuery mobile.

3 Kisi responsif khusus

Gaya kisi dasar dapat dengan mudah diperluas ke tata letak responsif khusus menggunakan kueri media di CSS.

Widget adalah gadget kecil atau kontrol aplikasi seluler jQuery Anda. Widget bisa sangat berguna karena memungkinkan Anda meletakkan aplikasi favorit di layar beranda untuk mengaksesnya dengan cepat.

Tabel berikut menunjukkan jenis-jenis Widget secara detail.

Sr.No. Jenis & Deskripsi
1 Tombol

Ini menentukan tombol yang dapat diklik yang menyertakan konten seperti teks atau gambar.

2 Kotak centang

Kotak centang digunakan ketika lebih dari satu opsi diperlukan untuk dipilih.

3 Kotak radio

Tombol radio digunakan ketika dari banyak pilihan, hanya satu pilihan yang diperlukan untuk dipilih.

4 Datepicker

Ini difokuskan pada masukan untuk membuka kalender interaktif dalam hamparan kecil.

5 Bisa dilipat

Dapat diciutkan memungkinkan Anda untuk memperluas atau menciutkan konten setiap kali diklik. Ini sangat membantu untuk perangkat seluler yang menyajikan konten singkat.

6 Controlgroup

Controlgroups menyediakan sekumpulan tombol untuk menentukan satu blok yang terlihat seperti komponen navigasi.

7 Dapat disaring

Dengan menggunakan atribut data-filter = "true" , Anda dapat memfilter turunan dari setiap elemen.

8 Flipswitch

Flip Switch memungkinkan Anda untuk mematikan / mengaktifkan atau true / false dengan mengkliknya untuk input gaya boolean.

9 Listview

Tujuan dari komponen listview adalah untuk membuat konten yang kompleks dan disesuaikan dalam daftar.

10 Pemuat

JQuery Mobile menyediakan berbagai cara memuat status ke suatu elemen.

11 Navbar

Widget navbar adalah sekumpulan tombol yang menghubungkan Anda ke halaman web atau bagian lain.

12 Panel

Panel digunakan untuk menampilkan komponen DOM di dalam kotak.

13 Muncul tiba-tiba

Popup adalah antarmuka pengguna yang muncul dalam jendela kecil untuk menampilkan teks, gambar, dan konten lainnya.

14 Rangeslider

Widget Rangeslider memberi Anda sepasang pegangan yang memungkinkan Anda memilih rentang nilai numerik.

15 Pilih menu

Menu pilih menyediakan berbagai opsi dalam bentuk daftar turun bawah, dari mana pengguna dapat memilih satu atau lebih opsi.

16 Slider

Penggeser memungkinkan Anda memilih nilai dengan menggeser pegangan penggeser.

17 Meja

jQuery Mobile menggunakan tabel untuk merepresentasikan data dalam bentuk baris dan kolom, yaitu menampilkan data dalam format tabel.

18 Tab

Widget tab adalah ekstensi widget tab jQuery ui, yang menerima semua metode dan opsi.

19 Textinput

Tag <input> digunakan untuk mendeklarasikan elemen masukan, sebuah kontrol yang memungkinkan pengguna untuk memasukkan data.

20 Toolbar

Widget toolbar seluler jQuery memungkinkan Anda membuat header dan footer.

jQuery Mobile memungkinkan untuk membuat halaman web dinamis. Dengan menggunakan event, Anda dapat mengatur proses event-driven pada elemen, yang dipicu oleh interaksi pengguna seperti klik mouse, mouse hover pada sebuah elemen, penekanan tombol pada keyboard, dll.

Tabel berikut mencantumkan beberapa acara untuk perangkat seluler, yang didukung oleh jQuery Mobile.

Sr.No. Deskripsi acara
1 Acara Seluler jQuery

Ini menanggapi interaksi pengguna ketika pengguna mengklik pada halaman tertentu atau mengarahkan mouse ke elemen, dll.

2 Acara Sentuh jQuery

Ini menyediakan acara sentuh saat pengguna menyentuh layar.

3 Acara jQuery Scroll

Ini mengaktifkan peristiwa gulir saat pengguna menggulir ke atas dan ke bawah.

4 Acara Orientasi jQuery

Ini memicu peristiwa orientasi saat pengguna memutar perangkat secara vertikal atau horizontal.

5 Acara Halaman jQuery

Ini menyediakan peristiwa halaman ketika pengguna menyembunyikan, membuat, memuat, atau membongkar halaman.

Pembuatan formulir mudah dan sangat fleksibel, yang dibangun dengan kombinasi elemen formulir dan tombol standar.

Tabel berikut menunjukkan tipe formulir secara detail.

Sr.No. Jenis & Deskripsi
1 Bentuk Dasar

jQuery Mobile menyediakan sistem tata letak yang kuat, mudah, dan serbaguna untuk Formulir, yang menggabungkan gaya formulir, tombol masukan, dan dukungan penggeser.

2 Masukan Formulir

Tag <input> adalah kontrol yang memungkinkan pengguna untuk memasukkan data.

3 Pilih Formulir

Dalam bentuk opsi, tersedia daftar dropdown untuk menu pilih.

4 Bentuk Sliders

Penggeser memungkinkan Anda memilih nilai dengan menggeser pegangan penggeser.

5 Menyegarkan dan inisialisasi otomatis elemen formulir

Metode refresh digunakan untuk memperbarui status baru kontrol formulir dengan sendirinya dan memperbarui kontrol formulir dengan JavaScript.

Ini menetapkan berbagai jenis tema pada tombol, bilah navigasi, blok, tautan, dan sebagainya. Anda dapat mengatur tema menggunakan atribut data-theme .

Tabel berikut menjelaskan penggunaan fungsionalitas tema di berbagai area yang didukung oleh jQuery Mobile.

Sr.No. Fungsi & Deskripsi
1 Tema

Ini menyediakan dua jenis tema yang berbeda seperti tema "a" dan tema "b" untuk menyesuaikan tampilan aplikasi.

2 Header dan Footer Tema dalam Dialog

Set tema untuk header dan footer di kotak dialog.

3 Tombol Tema, Ikon dan Popup

Menentukan tema untuk tombol, ikon dan popup.

4 Tombol Tema di Header dan Footer

Menampilkan tema untuk tombol di header dan footer.

5 Bar Navigasi Tema

Menerapkan tema untuk bilah navigasi di header atau footer.

6 Panel Tema

Anda dapat menerapkan tema untuk panel.

7 Tema Tombol yang Dapat Dilipat dan Tombol Pisah

Menampilkan tema untuk tombol yang bisa dilipat dan dipisahkan.

8 Daftar Tema dan Daftar yang Dapat Diciutkan

Menampilkan tema untuk daftar dan daftar yang bisa diciutkan.

9 Formulir yang Dapat Dilipat

Anda dapat menerapkan tema untuk formulir.

Kelas CSS jQuery

Anda dapat menggunakan berbagai jenis kelas CSS untuk mengatur gaya elemen seperti yang dijelaskan di bagian bawah.

Kelas Global

Kelas-kelas berikut dapat digunakan sebagai kelas global pada widget jQuery Mobile -

Sr.No. Kelas & Deskripsi
1

ui-corner-all

Ini menampilkan elemen dengan sudut membulat.

2

ui-shadow

Ini menampilkan bayangan untuk elemen.

3

ui-overlay-shadow

Ini menampilkan bayangan overlay untuk elemen.

4

ui-mini

Ini menampilkan elemen yang lebih kecil.

Kelas Tombol

Tabel berikut mencantumkan kelas tombol yang digunakan dengan elemen jangkar atau tombol -

Sr.No. Kelas & Deskripsi
1

ui-btn

Ini menentukan bahwa elemen akan diberi gaya sebagai tombol.

2

ui-btn-inline

Ini menunjukkan tombol sebagai elemen inline yang menghemat ruang yang diperlukan untuk label.

3

ui-btn-icon-top

Ini menempatkan ikon di atas teks.

4

ui-btn-icon-right

Ini menempatkan ikon di kanan teks.

5

ui-btn-icon-bottom

Ini menempatkan ikon di bawah teks.

6

ui-btn-icon-left

Ini menempatkan ikon di kiri teks.

7

ui-btn-icon-notext

Ini menunjukkan satu-satunya ikon.

8

ui-btn-a|b

Ini menampilkan warna tombol ("a" akan menjadi warna latar belakang default yaitu abu-abu dan "b" akan mengubah warna latar belakang menjadi hitam).

Kelas Ikon

Tabel berikut mencantumkan kelas ikon yang digunakan dengan elemen jangkar atau tombol -

Sr.No. Kelas & Deskripsi
1

ui-icon-action

Ini menunjukkan ikon tindakan.

2

ui-icon-alert

Ini menampilkan tanda seru di dalam segitiga.

3

ui-icon-arrow-d-l

Ini menentukan bawah dengan panah kiri.

4

ui-icon-arrow-d-r

Ini menentukan bawah dengan panah kanan.

5

ui-icon-arrow-u-l

Ini menentukan dengan panah kiri.

6

ui-icon-arrow-u-r

Ini menentukan dengan panah kanan.

7

ui-icon-arrow-l

Ini menentukan panah kiri.

8

ui-icon-arrow-r

Ini menentukan panah kanan.

9

ui-icon-arrow-u

Ini menentukan panah atas.

10

ui-icon-arrow-d

Ini menentukan panah bawah.

11

ui-icon-bars

Ini menunjukkan 3 batang horizontal satu di atas yang lain.

12

ui-icon-bullets

Ini menunjukkan 3 peluru horizontal satu di atas yang lain.

13

ui-icon-carat-d

Ini menampilkan karat ke bawah.

14

ui-icon-carat-l

Ini menampilkan karat ke kiri.

15

ui-icon-carat-r

Ini menampilkan karat ke kanan.

16

ui-icon-carat-u

Ini menampilkan karat ke atas.

17

ui-icon-check

Ini menunjukkan ikon tanda centang.

18

ui-icon-comment

Ini menentukan komentar atau pesan.

19

ui-icon-forbidden

Ini menampilkan ikon terlarang.

20

ui-icon-forward

Ini menentukan ikon maju.

21

ui-icon-navigation

Ini menentukan ikon navigasi.

22

ui-icon-recycle

Ini menampilkan ikon daur ulang.

23

ui-icon-refresh

Ini menunjukkan ikon segarkan.

24

ui-icon-tag

Ini menunjukkan ikon tag.

25

ui-icon-video

Ini menunjukkan ikon video atau kamera.

Kelas Tema

Ini menyediakan dua jenis tema yang berbeda seperti tema "a" dan tema "b" untuk menyesuaikan tampilan aplikasi. Anda dapat membuat kelas tema Anda sendiri dengan menambahkan surat contoh (az). Tabel berikut mencantumkan kelas tema yang ditentukan dari huruf a hingga z.

Sr.No. Kelas & Deskripsi
1

ui-bar-(a-z)

Ini menampilkan warna untuk bar termasuk header, footer, dan bar lainnya di halaman.

2

ui-body-(a-z)

Ini menampilkan warna untuk blok konten termasuk listview, popup, slider, panel, loader, dll.

3

ui-btn-(a-z)

Ini menampilkan warna untuk tombol.

4

ui-group-theme-(a-z)

Ini menampilkan warna untuk grup kontrol, tampilan daftar, dan kumpulan yang bisa diciutkan.

5

ui-overlay-(a-z)

Ini menampilkan warna latar belakang untuk popup, dialog, dan penampung halaman.

6

ui-page-theme-(a-z)

Ini menampilkan warna untuk halaman.

Kelas Grid

Tabel berikut mencantumkan kelas kisi yang digunakan dengan lebar yang sama, tanpa batas, latar belakang, margin, atau padding.

Sr.No. Kelas Grid Kolom Lebar Kolom Sesuai dengan
1 ui-grid-solo 1 100% ui-block-a
2 ui-grid-a 2 50% / 50% ui-block-a | b
3 ui-grid-b 3 33% / 33% / 33% ui-blok-a | b | c
4 ui-grid-c 4 25% / 25% / 25% / 25% ui-blok-a | b | c | d
5 ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-blok-a | b | c | d | e

Tombol

Ini menentukan tombol yang dapat diklik yang menyertakan konten seperti teks atau gambar menggunakan kelas ui-btn . Ini tidak digunakan lagi dalam versi 1.4. Gunakan atribut ui-btn daripada menggunakan atribut data-role = "button" .

Tabel berikut mencantumkan elemen tombol yang digunakan dengan atribut data.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-corners

Ini menentukan apakah tombol harus berisi sudut membulat atau tidak.

benar | Salah
2

data-icon

Ini mendefinisikan ikon tombol.

Default tidak ada ikon
3

data-iconpos

Ini menentukan posisi ikon.

kiri | benar | atas | bawah
4

data-iconshadow

Ini menentukan apakah ikon tombol harus berisi bayangan atau tidak.

benar | Salah
5

data-inline

Ini menentukan apakah tombol harus sebaris atau tidak.

benar | Salah
6

data-mini

Ini menentukan apakah tombol harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
7

data-shadow

Ini menentukan apakah tombol harus berisi bayangan atau tidak.

benar | Salah
8

data-theme

Ini menampilkan warna tema untuk tombol.

huruf (az)

Kotak centang

Tabel berikut mencantumkan elemen kotak centang yang digunakan dengan type = "checkbox".

Sr.No. Data-atribut & Deskripsi Nilai
1

data-mini

Ini menentukan apakah kotak centang harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
2

data-role

Ini menghentikan gaya kotak centang sebagai tombol.

tidak ada
3

data-theme

Ini menampilkan warna tema untuk kotak centang.

huruf (az)

Bisa dilipat

Tabel berikut mencantumkan elemen yang dapat diciutkan yang digunakan dengan data-role = "collapsible" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-collapsed

Ini menunjukkan apakah konten harus ditutup atau diperluas.

benar | Salah
2

data-collapsed-cue-text

Ini menampilkan umpan balik untuk pengguna dengan perangkat lunak pembaca layar.

Defaultnya adalah menciutkan konten
3

data-collapsed-icon

Ini mendefinisikan ikon tombol yang bisa dilipat.

Ikon default adalah "plus"
4

data-content-theme

Ini menampilkan warna tema untuk konten yang bisa dilipat.

huruf (az)
5

data-expanded-cue-text

Ini menampilkan umpan balik untuk pengguna dengan perangkat lunak pembaca layar.

Default adalah memperluas konten
6

data-expanded-icon

Ini menampilkan tombol yang bisa diciutkan saat Anda memperluas konten.

Ikon default adalah "minus"
7

data-iconpos

Ini menentukan posisi ikon.

kiri | benar | atas | bawah
8

data-inset

Ini menentukan apakah tombol yang dapat dilipat harus ditampilkan dengan sudut membulat dan margin atau tidak.

benar | Salah
9

data-mini

Ini menentukan apakah tombol yang bisa dilipat harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
10

data-theme

Ini menampilkan warna tema untuk tombol yang bisa dilipat.

huruf (az)

Set yang Dapat Dilipat

Tabel berikut mencantumkan elemen kumpulan yang dapat diciutkan yang digunakan dengan data-role = "collapsibleset" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-collapsed-icon

Ini mendefinisikan ikon tombol yang bisa dilipat.

Ikon default adalah "plus"
2

data-content-theme

Ini menampilkan warna tema untuk konten yang bisa dilipat.

huruf (az)
3

data-expanded-icon

Ini menampilkan tombol yang bisa diciutkan saat Anda memperluas konten.

Ikon default adalah "minus"
4

data-iconpos

Ini menentukan posisi ikon.

kiri | benar | atas | bawah
5

data-inset

Ini menentukan apakah tombol yang dapat dilipat harus ditampilkan dengan sudut membulat dan margin atau tidak.

benar | Salah
6

data-mini

Ini menentukan apakah tombol yang bisa dilipat harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
7

data-theme

Ini menampilkan warna tema untuk tombol yang bisa dilipat.

huruf (az)

Controlgroup

Tabel berikut mencantumkan elemen Controlgroup yang digunakan dengan data-role = "controlgroup" atribut -

Sr.No. Data-atribut & Deskripsi Nilai
1

data-exclude-invisible

Ini menentukan apakah akan mengecualikan anak-anak tak terlihat dalam tugas sudut membulat.

benar | Salah
2

data-mini

Ini menentukan apakah grup harus menampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
3

data-theme

Ini menampilkan warna tema untuk controlgroup.

huruf (az)
4

data-type

Ini menunjukkan apakah grup harus ditampilkan dalam format horizontal atau vertikal.

horizontal | vertikal

Dialog

Tabel berikut mencantumkan elemen dialog yang digunakan dengan data-dialog="true" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-close-btn

Ini menentukan posisi tombol tutup.

kiri | benar | tidak ada
2

data-close-btn-text

Ini mendefinisikan teks untuk tombol tutup.

teks
3

data-corners

Ini menentukan apakah dialog harus ditampilkan dengan sudut membulat atau tidak.

benar | Salah
4

data-dom-cache

Ini menunjukkan apakah cache DOM harus dihapus atau tidak untuk setiap halaman.

benar | Salah
5

data-overlay-theme

Ini mendefinisikan warna overlay dari halaman dialog.

huruf (az)
6

data-theme

Ini menentukan warna tema halaman dialog.

huruf (az)
7

data-title

Ini mendefinisikan judul halaman dialog.

teks

Peningkatan

Tabel berikut mencantumkan elemen penyempurnaan yang digunakan dengan data-enhance="false" or data-ajax = "false" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-enhance

Anda dapat mengatur gaya halaman dengan menyetel atribut ini ke "true". Anda tidak dapat mengatur gaya halaman jika disetel ke "false".

benar | Salah
2

data-ajax

Ini menunjukkan apakah halaman harus dimuat dari Ajax atau tidak.

benar | Salah

Toolbar tetap

Tabel berikut mencantumkan elemen toolbar yang digunakan dengan data-position = "fixed" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-disable-page-zoom

Ini menentukan apakah pengguna dapat menskalakan / memperbesar halaman atau tidak.

benar | Salah
2

data-fullscreen

Ini mendefinisikan toolbar harus diposisikan di atas dan / atau bawah.

benar | Salah
3

data-tap-toggle

Ini menunjukkan apakah pengguna dapat mengalihkan visibilitas bilah alat pada keran atau tidak.

benar | Salah
4

data-transition

Ini menunjukkan efek transisi ketika Anda mengetuk atau mengklik elemen.

geser | memudar | tidak ada
5

data-update-page-padding

Ini memperbarui padding halaman dengan menggunakan acara pengubahan ukuran, transisi, dan pembaruan tata letak.

benar | Salah
6

data-visible-on-page-show

Ini mendefinisikan toolbar-visibilitas ketika halaman induk ditampilkan.

benar | Salah

Balikkan Sakelar Toggle

Tabel berikut mencantumkan elemen sakelar balik yang digunakan dengan data-role = "flipswitch" atribut -

Sr.No. Data-atribut & Deskripsi Nilai
1

data-mini

Ini menentukan apakah sakelar harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
2

data-on-text

Ini mendefinisikan teks "on" pada tombol flip.

Default-nya adalah "aktif"
3

data-off-text

Ini mendefinisikan teks "off" pada tombol flip.

Default-nya adalah "off"

Footer

Tabel berikut mencantumkan elemen footer yang digunakan dengan atribut data-role = "footer" -

Sr.No. Data-atribut & Deskripsi Nilai
1

data-id

Ini mendefinisikan ID unik.

teks
2

data-position

Ini menentukan apakah footer harus diposisikan di bagian bawah atau sejajar dengan konten halaman.

sebaris | tetap
3

data-fullscreen

Ini menentukan apakah footer harus diposisikan di bagian bawah dan di atas konten halaman atau tidak.

benar | Salah
4

data-theme

Ini menentukan warna tema footer.

huruf (az)

Header

Tabel berikut mencantumkan elemen header yang digunakan dengan data-role = "header" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-id

Ini mendefinisikan ID unik.

teks
2

data-position

Ini menentukan apakah header harus diposisikan di bagian bawah atau sejajar dengan konten halaman.

sebaris | tetap
3

data-fullscreen

Ini menentukan apakah header harus diposisikan di bagian bawah dan di atas konten halaman atau tidak.

benar | Salah
4

data-theme

Ini mendefinisikan warna tema tajuk.

huruf (az)

Masukan

Tabel berikut mencantumkan elemen input yang digunakan dengan type = "text|search|etc" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-clear-btn

Ini menentukan apakah elemen input harus berisi tombol hapus atau tidak.

benar | Salah
2

data-clear-btn-text

Ini mendefinisikan teks untuk tombol hapus.

teks
3

data-mini

Ini menentukan apakah masukan harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
4

data-role

Ini berhenti memasukkan input atau area teks sebagai tombol.

tidak ada
5

data-theme

Ini mendefinisikan warna tema dari elemen input.

huruf (az)

Tautan

Tabel berikut mencantumkan elemen tautan yang digunakan dengan jQuery Mobile.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-ajax

Ini menunjukkan apakah halaman harus dimuat melalui Ajax atau tidak.

benar | Salah
2

data-direction

Ini digunakan untuk transisi terbalik.

balik
3

data-dom-cache

Ini menunjukkan apakah cache jQuery DOM harus bersih atau tidak untuk halaman.

benar | Salah
4

data-prefetch

Ini digunakan untuk mengambil halaman ke dalam DOM.

benar | Salah
5

data-rel

Ini menentukan perilaku tautan.

kembali | dialog | eksternal | muncul
6

data-transition

Ini mendefinisikan transisi dari satu halaman ke halaman lain.

memudar | membalik | aliran | pop | geser | slidedown | slidefade | slideup | putar | tidak ada
7

data-position-to

Ini menentukan posisi kotak popup.

asal | jQuery selector | jendela

Daftar

Tabel berikut menunjukkan elemen daftar yang digunakan dengan data-role = "listview" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-autodividers

Ini membagi daftar secara otomatis.

benar | Salah
2

data-count-theme

Ini menentukan warna tema dari elemen hitungan.

huruf (az)
3

data-divider-theme

Ini menentukan warna tema untuk pembagi daftar.

huruf (az)
4

data-filter

Ini digunakan untuk memfilter nilai daftar di kotak pencarian.

benar | Salah
5

data-filter-placeholder

Ini mendefinisikan beberapa teks di dalam kotak pencarian.

teks
6

data-filter-theme

Ini menentukan warna tema untuk filter pencarian.

huruf (az)
7

data-icon

Ini memberikan ikon untuk daftar.

Default tidak ada ikon
8

data-inset

Ini menentukan apakah daftar harus ditampilkan dengan sudut membulat dan margin atau tidak.

benar | Salah
9

data-split-icon

Ini mendefinisikan ikon untuk tombol split.

Ikon default adalah "panah-r"
10

data-split-theme

Ini menentukan warna tema untuk tombol split.

huruf (az)
11

data-theme

Ini menentukan warna tema untuk daftar.

huruf (az)

Daftar barang

Tabel berikut menunjukkan elemen item daftar yang digunakan dengan data-role = "listview" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-filtertext

Ini digunakan untuk memfilter nilai daftar menggunakan teks di kotak pencarian.

teks
2

data-icon

Ini memberikan ikon untuk item daftar.

Default tidak ada ikon
3

data-role

Ini mendefinisikan pemisah untuk item daftar.

pembagi daftar
4

data-theme

Ini menentukan warna tema untuk item daftar.

huruf (az)

Navbar

Tabel berikut mencantumkan elemen navbar yang digunakan dengan data-role = "navbar" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-icon

Ini memberikan ikon untuk item daftar.

Default tidak ada ikon
2

data-iconpos

Ini menentukan posisi ikon.

kiri | benar | atas | bawah | notext

Halaman

Tabel berikut mencantumkan elemen halaman yang digunakan dengan data-role = "page" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-dom-cache

Ini menunjukkan apakah cache DOM harus dihapus atau tidak untuk setiap halaman.

benar | Salah
2

data-overlay-theme

Ini mendefinisikan warna overlay dari halaman dialog.

huruf (az)
3

data-theme

Ini menentukan warna tema untuk halaman.

huruf (az)
4

data-title

Ini memberikan judul untuk halaman tersebut.

Default tidak ada ikon
5

data-url

Ini digunakan untuk memperbarui URL.

url

Muncul

Tabel berikut mencantumkan elemen popup yang digunakan dengan data-role = "popup" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-corners

Ini menentukan apakah popup harus ditampilkan dengan sudut dan margin membulat atau tidak.

benar | Salah
2

data-dismissible

Ini menentukan apakah popup harus ditutup dengan mengklik di luar atau tidak.

benar | Salah
3

data-history

Ini menentukan apakah popup harus menampilkan sejarah item saat dibuka.

benar | Salah
4

data-overlay-theme

Ini menentukan warna overlay dari kotak popup.

huruf (az)
5

data-shadow

Ini menampilkan bayangan untuk kotak popup.

benar | Salah
6

data-theme

Ini menentukan warna tema untuk kotak popup.

huruf (az)
7

data-tolerance

Ini mendefinisikan tepi jendela.

30, 15, 30, 15

Tombol radio

Tabel berikut mencantumkan elemen tombol radio yang digunakan dengan type = "radio" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-mini

Ini menentukan apakah tombol harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
2

data-role

Ini menghentikan gaya tombol radio sebagai tombol yang disempurnakan.

tidak ada
3

data-theme

Ini menentukan warna tema untuk tombol radio.

huruf (az)

Pilih

Tabel berikut mencantumkan elemen terpilih yang digunakan dengan jQuery Mobile.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-icon

Ini memberikan ikon untuk elemen pilih.

Default-nya adalah "panah-d"
2

data-iconpos

Ini menentukan posisi ikon.

kiri | benar | atas | bawah
3

data-inline

Ini menentukan apakah tombol harus sebaris atau tidak.

benar | Salah
4

data-mini

Ini menentukan apakah pemilihan harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
5

data-native-menu

Ini menggunakan menu kustom ketika telah disetel ke false.

benar | Salah
6

data-overlay-theme

Ini menentukan warna overlay untuk menu pilih kustom.

huruf (az)
7

data-placeholder

Ini digunakan untuk menyetel elemen opsi dari pemilihan non-native.

benar | Salah
8

data-role

Ini menghentikan gaya elemen pilih sebagai tombol.

tidak ada
9

data-theme

Ini menampilkan warna tema untuk elemen pilih.

huruf (az)

Slider

Tabel berikut mencantumkan elemen slider yang digunakan dengan type = "range" atribut.

Sr.No. Data-atribut & Deskripsi Nilai
1

data-highlight

Ini menyoroti slider.

benar | Salah
2

data-mini

Ini menentukan apakah slider harus ditampilkan dalam ukuran yang lebih kecil atau ukuran biasa.

benar | Salah
3

data-role

Ini menghentikan gaya kontrol slider sebagai tombol.

tidak ada
4

data-theme

Ini menampilkan warna tema untuk kontrol slider.

huruf (az)
5

data-track-theme

Ini menampilkan warna tema untuk trek slider.

huruf (az)