Pengantar Sederhana untuk Kerangka Seluler jQuery

Ketika dunia menemukan web, hal-hal menjadi tidak menyenangkan dan tidak bernyawa. Misalnya, membuat aplikasi gerakan mouse gambar sederhana memerlukan beberapa baris kode, dan tidak dapat berfungsi pada beberapa platform.

Tetapi segalanya menjadi lebih baik ketika jQuery diperkenalkan, karena memungkinkan pengembang membuat aplikasi JavaScript yang menakjubkan yang dapat berjalan dengan nyaman di berbagai tempat.

Setelah itu, tim jQuery mengambil langkah lebih tinggi dengan mengembangkan jQuery UI, yang memungkinkan pengembang untuk membuat aplikasi web yang tampak bagus pada inti jQuery yang ada.

Lebih baik lagi, pada tahun 2010 jQuery Mobile diperkenalkan yang membuat pengembangan jauh lebih baik dan lebih efisien.

Dibangun dengan bias pada ponsel, jQuery Mobile adalah kerangka kerja terpadu yang efektif yang menawarkan komponen UI, transisi data, dan fitur menarik lainnya.

jQuery Mobile memanfaatkan fungsionalitas HTML5, CSS3, jQuery, serta jQuery UI menjadi satu kerangka kerja yang memungkinkan pengembang mencapai konsistensi di berbagai platform dan perangkat.

Fitur Dasar jQuery Mobile

1. Kesederhanaan dan kegunaan yang luar biasa

Kerangka kerja jQuery Mobile tidak rumit dan fleksibel. Karena antarmuka konfigurasi kerangka kerja didorong oleh mark-up, pengembang dapat dengan mudah membangun antarmuka aplikasi dasar lengkap mereka dalam HTML, dengan sedikit atau tanpa kode JavaScript.

Tugas kompleks yang membutuhkan beberapa baris kode JavaScript, seperti panggilan Ajax dan manipulasi DOM, dapat dengan mudah direalisasikan dengan beberapa baris kode di jQuery seluler.

Misalnya, jika kita ingin pengguna mengklik dan menyembunyikan beberapa teks setelah halaman dibuat di DOM, tetapi sebelum penyempurnaan selesai, kita cukup menggunakan penangan event pagecreate . Ini adalah sesuatu yang membutuhkan beberapa kode baris untuk diselesaikan tanpa jQuery Mobile.

$(document).on("pagecreate","#mypagetest",function(){ $("span").on("click",function(){ $(this).hide(); }); });

Pada kode di atas, parameter #mypagetest mengacu pada id halaman yang menentukan peristiwa halaman. Juga, metode on () digunakan untuk memasang penangan kejadian.

Selain itu, kesederhanaannya memungkinkan pengembang memecah aplikasi mereka menjadi beberapa halaman. Dengan kerangka kerja, pengembang dapat "menulis lebih sedikit, dan melakukan lebih banyak."

2. Peningkatan progresif dan degradasi anggun

Peningkatan progresif dan degradasi halus adalah fitur utama yang mendorong kelincahan jQuery Mobile. Mereka mengaktifkannya untuk mendukung perangkat kelas atas dan kurang berkemampuan (misalnya, perangkat yang tidak memiliki dukungan JavaScript).

Kerangka kerja ini memungkinkan pengembang membangun aplikasi yang dapat diakses oleh banyak browser dan perangkat, baik itu Internet Explorer 6 atau Android atau iPhone terbaru.

Mobile jQuery juga memberi pengembang kemampuan untuk merender konten dasar (seperti yang dibangun) pada perangkat dasar. Dan platform dan browser yang lebih canggih akan semakin diperkaya dengan menggunakan JavaScript dan CSS tambahan yang ditautkan secara eksternal.

3. Dukungan untuk input yang ramah pengguna

Selama pengembangan seluler jQuery, pengembang dapat menyertakan API yang tidak rumit untuk mendukung fungsi input pengguna berbasis sentuhan, mouse, dan kursor. Beberapa jenis elemen bentuk yang mudah ditata dan ramah sentuhan juga disertakan dalam kerangka.

Contohnya termasuk kotak centang dan set radio, penggeser, pemfilteran pencarian, dan elemen pemilihan menu. Selain itu, setiap elemen formulir menyertakan versi 'mini' alternatif, yang dapat dengan mudah digabungkan ke dalam halaman web seluler.

Misalnya, berikut cara membuat tombol kotak centang menggunakan jQuery Mobile. Perhatikan bahwa atribut data-mini = "true" ditambahkan untuk membuat versi mini tombol.

  Click here to agree 

Di luar semua ini, untuk memastikan pengalaman pengguna dioptimalkan pada perangkat seluler, kerangka kerja memiliki sistem navigasi berbasis Ajax yang kaya yang memungkinkan transisi halaman animasi berlangsung mulus.

Dengan peristiwa transisi Seluler jQuery, Anda dapat menganimasikan transisi dari halaman aktif saat ini ke halaman baru.

Misalnya, Anda dapat menggunakan acara pagebeforeshow (dipicu pada halaman "ke") dan acara pagebeforehide (dipicu pada halaman "dari") saat bertransisi dari satu halaman ke halaman berikutnya. Kedua peristiwa tersebut dipicu sebelum animasi transisi dimulai.

Mari kita lihat bagaimana mereka dapat diterapkan:

$(document).on("pagebeforeshow","#myfirstpage",function(){ // When entering myfirstpage alert("myfirstpage is about to appear"); }); $(document).on("pagebeforehide","#myfirstpage",function(){ // When leaving myfirstpage alert("myfirstpage is about to disappear"); });

4. Aksesibilitas

Selain kemampuan lintas platformnya, jQuery untuk selulerdibuat dengan pertimbangan yang kuat untuk aksesibilitas.

Kerangka kerja ini dilengkapi dengan dukungan untuk Aplikasi Internet Kaya yang Dapat Diakses (WAI-ARIA) untuk membantu penyandang disabilitas yang menggunakan pembaca layar dan teknologi pendukung lainnya dengan mudah mengakses halaman web.

5. Ukuran ringan

Ukuran ringan jQuery seluler (sekitar 40KB saat diminimalkan) menambah kecepatannya. Selain itu, fakta bahwa ia menggunakan dependensi gambar minimal juga sangat mempercepat kemampuannya.

6. Tema dan widget UI

jQuery Mobile memiliki sistem tema built-in yang memungkinkan pengembang menentukan gaya aplikasi mereka sendiri. Dengan jQuery Mobile Themeroller, pengembang dapat secara efektif menyesuaikan aplikasi mereka agar sesuai dengan warna, selera, dan preferensi mereka.

Kerangka kerja ini juga dilengkapi dengan berbagai widget lintas platform inovatif yang memungkinkan pengembang membuat aplikasi yang dapat disesuaikan dengan lebih baik.

Beberapa widget yang tersedia adalah bilah alat persisten, tombol, dialog, dan widget munculan yang umum digunakan.

7. Responsif

Daya tanggap penuh framework memungkinkan basis kode yang sama untuk menyesuaikan dengan nyaman di berbagai jenis layar, dari perangkat seluler hingga layar berukuran desktop.

Struktur Halaman Dasar jQuery Mobile

Struktur jQuery Mobile memiliki semua komponen dan atribut UI yang diperlukan untuk membuat semua jenis aplikasi web seluler yang ramah pengguna dan kaya fitur — baik dasar maupun lanjutan.

Anda dapat menggunakan jQuery seluler untuk membuat halaman web, berbagai jenis tampilan daftar, bilah alat, berbagai elemen dan tombol formulir, dialog, serta fungsi lainnya.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?