Pengenalan Jquery Mobile

Pengenalan Jquery Mobile

Bagi yang belum mengenal apa itu jQuery Mobile, maka di artikel ini sedikit mengulas tentang jQuery Mobile, adapun jQuery Mobile merupakan kerangka kerja UI HTML5 yang dioptimalkan untuk sentuhan yang dirancang untuk membuat situs web dan aplikasi responsif atau compatibly yang dapat diakses di semua perangkat smartphone, tablet, dan desktop serta perangkat keras lainnya (komputer), yang sudah dilengkapi kelas (class) berupa Js dan css.

Halaman dan Dialog

Halaman maupun Dialog Halaman pada jQuery Mobile terdiri dari elemen dengan atribut data-role="page". Di dalam tempat yakni; "halaman", markup HTML apa pun yang valid dapat digunakan, tetapi untuk halaman biasa di jQuery Mobile, turunan langsung dari "halaman" adalah div dengan data-role="header", class="ui-content", dan data-peran="footer". Persyaratan dasar untuk sebuah halaman hanyalah pembungkus halaman untuk mendukung sistem navigasi, selebihnya adalah opsional (pilihan). Halaman dapat ditata atau diatur sebagai dialog yang membuat halaman terlihat seperti overlay gaya modal yang berfungsi untuk memberikan tampilan dialog modal pada halaman standar, tambahkan atribut data-rel="dialog" ke tautan. Transisi juga dapat diatur pada tautan dialog.

Beberapa widgets pun disediakan salah satunya tabel yang terdapat pada contoh dibawah ini ;

Navigasi & Transisi Ajax jQuery Mobile

Navigasi & Transisi Ajax jQuery Mobile Menyertakan sistem navigasi Ajax untuk mendukung serangkaian transisi halaman animasi dengan secara otomatis 'membajak (hijacking)' tautan standar dan pengiriman formulir dan mengubahnya menjadi permintaan Ajax. Tombol kembali didukung penuh dan ada fitur untuk prefetch & cache, injeksi dinamis, dan halaman skrip untuk kasus penggunaan lanjutan. Setiap kali tautan diklik atau formulir dikirimkan, peristiwa itu secara otomatis dicegat oleh sistem nav Ajax dan digunakan untuk mengeluarkan permintaan Ajax berdasarkan tindakan href atau formulir alih-alih memuat ulang halaman. Sementara kerangka kerja menunggu respons Ajax, overlay loader ditampilkan.

Skrip Snippets Expert Advisors (EA) Robot Forex.

Skrip Bullish dan Bearish Expert Advisors (EA) Robot Forex.

CRUD Data Karyawan AutoNumber dengan Javascript Ajax.

Saat halaman yang diminta dimuat, jQuery Mobile mem-parsing dokumen untuk elemen dengan atribut data-role="page" dan menyisipkan kode tersebut ke dalam DOM halaman asli. Selanjutnya, semua widget di halaman masuk ditingkatkan untuk menerapkan semua gaya dan perilaku. Halaman masuk lainnya akan dibuang sehingga skrip, stylesheet, atau informasi lainnya tidak akan disertakan. Framework juga akan mencatat judul halaman yang masuk untuk memperbarui judul saat halaman baru dialihkan ke tampilan. Sekarang setelah halaman yang diminta ada di DOM dan disempurnakan, halaman tersebut dianimasikan menjadi tampilan dengan transisi. Secara default, framework menerapkan transisi pudar yang berfungsi untuk menyetel efek transisi khusus, tambahkan atribut transisi data ke tautan.

Bentuk elemen Framework ini berisi rangkaian lengkap elemen formulir yang secara otomatis disempurnakan menjadi widget bergaya ramah sentuhan. Berikut adalah penggeser yang dibuat dengan rentang jenis input HTML5 baru, tidak diperlukan peran data. Pastikan untuk membungkusnya dalam elemen formulir dan selalu kaitkan label dengan benar dengan setiap elemen formulir.

Aplikasi monitoring Traksi-Workshop-Aset dan Bahan Bakar Minyak

Dalam penulisan atau penggunaan kelas jika lebih dari satu, maka cukup dipisahkan dengan spasi, berapapun nama kelas yang dibutuhkan untuk digunakan, adapun Plugin-Plugin yang disediakan oleh jQuery Foundation,Inc. cukup lengkap diantaranya seperti di bawah ini;

Adapun file yang diperlukan untuk projek pembuatan suatu aplikasi yang berbasis web baik online maupun offline dapat di download disitus resminya untuk melihat juga unduhannya pada halaman di situs web yang disediakan, silahkan unduh atau download

Apabila ingin langsung digunakan secara online maka copy dan paste skrip dibawah ini ke halaman yang sudah disiapkan untuk pembuatan suatu projek.

<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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Catatan : jika tidak automatis download silahkan direfresh atau direload ulang halaman.

 

Konten dan Widget jQuery Mobile

Konten dan Widget pada konten, pengguna dapat menambahkan elemen HTML standar apa pun - judul, daftar, paragraf, dll, tentu pengguna sendiri dapat menulis gaya khusus untuk membuat tata letak khusus dengan menambahkan lembar gaya tambahan ke head setelah lembar gaya jQuery Mobile.

jQuery Mobile mencakup berbagai macam widget UI yang ramah sentuhan: elemen bentuk, yang dapat dilipat, kumpulan yang dapat dilipat (akordeon), sembulan, dialog, tabel responsif, dan banyak lagi. Untuk kinerja terbaik, gunakan pembuat unduhan untuk memilih komponen yang pengguna perlukan.

Tampilan daftar (Listview) jQuery Mobile

Tampilan daftar jQuery Mobile menyertakan beragam kumpulan tampilan daftar umum yang dikodekan sebagai daftar dengan tambahan data-role="listview". Berikut adalah daftar tertaut sederhana yang memiliki peran tampilan daftar. Kita akan membuatnya terlihat seperti modul inset dengan menambahkan atribut data-inset="true" dan menambahkan filter pencarian dinamis dengan data-filter="true" dan bidang teks.

Adapun untuk melihat hasil dari skrip plugin yang ada seperti : Popup dan Tooltip serta lainnya silahkan melanjutkannya ke artikel ini :Skrip Popup-Tooltip Mobile Responsif.

Catatan: Navigasi mungkin tidak berfungsi jika dilihat secara lokal Navigasi berbasis Ajax yang digunakan di seluruh dokumen jQuery Mobile mungkin perlu dilihat di server web agar berfungsi di browser tertentu. Jika Anda melihat pesan kesalahan saat mengeklik tautan, coba browser lain.

Silahkan baca juga : Tentang atau Mengenal Pupuk organik atau baca juga : Cara Pembuatan Pupuk Organik

• Cara memperbanyak Bakteri EM
• Membuat Pupuk Kandang dengan Stardec dan Orgadec
• Cara membuat pupuk hijau padat dan cair
• Bagaimana cara membuat pupuk kompos lubang dan kompos skala dapur
• Cara membuat Robot Trading (EA) dengan Mudah & Profitable
• "Cara membuat Pupuk Organik Cair" dan juga artikel : "Cara membuat Pupuk Cair Suplemen hewan ternak dan ikan, udang tambak"