Perbedaan antara jQuery dan jQuery Mobile?

92

Saya baru mengenal pengembangan web seluler, dan saya baru saja membuat aplikasi seluler dengan PhoneGap, yang sering menggunakan jQuery.

Tapi tentu saja ada beberapa gangguan terkait dengan cara saya memformat sesuatu dan cara mereka benar-benar muncul di layar perangkat seluler yang saya uji, dan saat mencoba menyelesaikannya, saya menemukan banyak saran untuk mempermudah diri saya sendiri dengan menggunakan jQuery seluler.

Sekarang ini membingungkan saya - jQuery tidak memiliki gulungan dalam pemformatan. Itu hanya pengetahuan tingkat pemula saya tentang CSS seluler yang menyebabkan masalah.

Jadi apa sebenarnya yang dilakukan jQuery mobile, dan apa bedanya dengan jQuery biasa? Jika saya sudah tahu jQuery, apa yang baru bagi saya?

jquery jquery-mobile temporary_user_name
sumber
2
"Aku tidak percaya tidak ada yang menanyakan ini sebelumnya." Sebenarnya mereka melakukannya: stackoverflow.com/q/6636388/368167
Tamer Shlash
Apa itu css seluler?
Legenda

Jawaban:

94

jQuery murni dirancang untuk menyederhanakan dan membakukan skrip di seluruh browser. Ini berfokus pada hal-hal tingkat rendah: membuat elemen, memanipulasi DOM, mengelola atribut, melakukan permintaan HTTP, dll.

jQueryUI adalah sekumpulan komponen & fitur antarmuka pengguna yang dibangun di atas jQuery (yaitu, perlu jQuery untuk bekerja): tombol, kotak dialog, slider, tab, animasi yang lebih canggih, fungsionalitas seret / lepas.

jQuery dan jQueryUI keduanya dirancang untuk 'ditambahkan' ke situs Anda (desktop atau seluler) - jika Anda ingin menambahkan fitur tertentu, jQuery atau jQueryUI mungkin dapat membantu.

jQuery Mobile , bagaimanapun, adalah kerangka kerja lengkap. Ini dimaksudkan sebagai titik awal Anda untuk situs seluler. Ini membutuhkan jQuery dan memanfaatkan fitur jQuery dan jQueryUI untuk menyediakan komponen UI dan fitur API untuk membangun situs yang ramah seluler. Anda masih dapat menggunakan sebanyak atau sesedikit yang Anda suka, tetapi jQuery Mobile dapat mengontrol seluruh area pandang dengan cara yang ramah seluler jika Anda mengizinkannya.

Perbedaan utama lainnya adalah bahwa jQuery dan jQueryUI bertujuan untuk menjadi lapisan di atas HTML dan CSS Anda. Anda harus bisa membiarkan markup Anda sendiri dan meningkatkannya dengan jQuery. Namun, jQuery Mobile menyediakan cara untuk menentukan di mana Anda ingin komponen muncul hanya menggunakan HTML - misalnya (dari situs jQuery Mobile):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

The data-roleatribut memberitahu jQuery Mobile untuk mengubah daftar ini menjadi komponen UI untuk seluler dan data-insetdan data-filteratribut sifat set yang - tanpa menulis satu baris JavaScript. Komponen jQueryUI, di sisi lain, biasanya dibuat dengan menulis beberapa baris JavaScript untuk membuat instance komponen di DOM.

Stu Cox
sumber
sebagai seseorang yang baru saja 'pindah' ​​dari jQuery + UI di situs web berbasis browser untuk memahami jQuery Mobile untuk perangkat seluler, saya harus mengatakan bahwa saya berjuang untuk melihat bagaimana jawaban khusus ini telah menerima 41 suara positif tetapi TIDAK ADA komentar. Ini secara khusus menunjukkan dalam dorongan utamanya bahwa tidak seperti jQueryUI yang "dibangun di atas jQuery", jQuery Mobile adalah "bagaimanapun, kerangka kerja penuh". Ini benar-benar bertentangan dengan jawaban lain di bawah ini, yang menyatakan (cukup akurat - menurut saya!) Bahwa jQuery Mobile juga membutuhkan jQuery untuk dijalankan, dan menambah kebingungan pribadi saya tentang apa .js dan .css yang saya butuhkan.
Andy Lorenz
3
Maaf, Anda benar Saya tidak menjelaskan bahwa jQuery Mobile membutuhkan jQuery juga - Saya akan memperbaruinya. Meskipun perhatikan, jawaban saya tidak benar-benar dirancang untuk memberi tahu Anda cara memulai dan menjalankan jQuery Mobile (bukan itu pertanyaan aslinya), hanya untuk memberikan gambaran umum yang luas tentang perbedaan konseptual.
Stu Cox
hal-hal hebat Stu, terima kasih telah mengubah jawaban Anda yang sekarang jauh lebih masuk akal. Anda mungkin terkejut betapa sulitnya bagi 'pemula seluler jquery' untuk memulai - bahkan situs web jquerymobile tidak membuatnya jelas! Itu dengan sendirinya mengarah ke hal lain yang membingungkan - versi jquery apa yang dibutuhkan jquerymobile? Pada saat penulisan jquerymobile.com hanya menyiratkan bahwa 1.4.2 kompatibel dengan jQuery 1.8 - 1.10 / 2.0 - tetapi saya tidak dapat menemukan di mana pun di mana versi & dependensi js / css secara khusus dinyatakan!
Andy Lorenz
28

Apa itu jQuery mobile

JQM (jQuery mobile) adalah sistem antarmuka pengguna untuk ponsel yang dibangun di atas jQuery. jQuery diperlukan agar JQM berfungsi. Tidak seperti framework ponsel serupa lainnya, JQM menargetkan dukungan untuk semua platform seluler, tablet, e-reader, dan desktop utama dan bukan hanya browser webkit seluler. Salah satu fitur kerangka kerja yang paling menonjol adalah sistem navigasi Ajax yang menggunakan transisi halaman animasi (sangat keren).

Apa yang mungkin baru bagi Anda

Satu hal tentang JQM yang melempar bola kurva ke pengguna baru adalah navigasi ajax. Berasal dari jquery Anda mungkin terbiasa memasukkan javascript Anda di setiap halaman dan kemudian menggunakan dom ready ( $(function(){ ... }atau $(document).ready(function(){ .... }) untuk menjalankan semua aktivitas javascript Anda yang menyenangkan. Tetapi karena JQM menggunakan navigasi ajax, sistem akan menarik halaman lain ke dom yang sama dengan halaman pertama dan tidak memuat skrip Anda yang terdapat di file <head>. Ketika halaman berikutnya dimuat melalui ajax Anda akan melihat bahwa barang-barang Anda di dalamnya $(function(){ ...}tidak akan berfungsi di halaman kedua. Solusi untuk ini mengikat ke acara pageinit. Contoh-contoh berikut ini akan membantu Anda di awal perjalanan Anda:

$(document).on('pageinit', function(){ // this fires for each new page

});

Untuk menargetkan halaman tertentu Anda menambahkan id halaman:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Memahami acara halaman baru akan banyak membantu Anda saat memulai dengan JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Semoga beruntung!

codaniel
sumber
5

jQuery adalah kerangka manipulasi / traversing DOM dan AJAX JavaScript. Ini mengabstraksi banyak kerumitan antara browser yang berbeda secara otomatis. Ada banyak plugin jQuery yang menyederhanakan banyak tugas.

jQuery Mobile adalah kerangka kerja UI yang ditujukan untuk aplikasi seluler yang dibangun di atas jQuery. Ini memiliki komponen tema dan UI.

Secara keseluruhan, mereka gratis. Anda tidak harus menggunakan jQuery Mobile untuk menggunakan jQuery. Tetapi untuk menggunakan jQuery Mobile, Anda harus menggunakan jQuery.

Daniel A. White
sumber
Jadi bisakah Anda mengatakan itu jQuery Mobileadalah versi seluler jQuery UI?
Jeff Hines
@JeffHines - agak. mereka adalah basis kode yang berbeda, tetapi mereka mencapai tujuan yang sama dengan cara yang berbeda.
Daniel A. White
Komentar yang sangat baik, Daniel A. White. Anda tidak harus menggunakan jQuery Mobile untuk menggunakan jQuery. Tetapi untuk menggunakan jQuery Mobile, Anda harus menggunakan jQuery.
pengguna3174782
Versi alfa sekarang dalam pengerjaan. jquerymobile.com/changelog/1.5.0-alpha1
Jackson Ng
2

Tidak memiliki cukup poin untuk dikomentari di atas jadi tambahkan ke utas untuk menjawab pertanyaan kedua tentang dependensi Andy.

Saya yakin apa yang Anda cari ada di sini: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>
TransitDataHead
sumber