Différence entre jQuery et jQuery Mobile?


92

Je suis nouveau dans le développement Web mobile et je viens de créer une application mobile avec PhoneGap, en utilisant fréquemment jQuery.

Mais il y avait naturellement quelques problèmes liés à la façon dont je formatais les choses et à la façon dont ils apparaissaient sur les écrans des appareils mobiles avec lesquels je testais, et en essayant de les résoudre, je suis tombé sur de nombreuses suggestions pour me faciliter les choses en utilisant jQuery mobile.

Maintenant, cela me confond - jQuery n'avait aucun rôle dans le formatage. Ce n'était que ma connaissance de niveau débutant du CSS mobile qui a causé les problèmes.

Alors, que fait exactement jQuery mobile et en quoi est-il différent de jQuery ordinaire? Si je connais déjà jQuery, qu'est-ce qui va être nouveau pour moi?


2
"Je ne pouvais pas croire que personne n'avait demandé ça avant." En fait, ils l'ont fait: stackoverflow.com/q/6636388/368167
Tamer Shlash

Qu'est-ce que le CSS mobile?
Legends

Réponses:


94

jQuery est purement conçu pour simplifier et normaliser les scripts entre les navigateurs. Il se concentre sur les choses de bas niveau: créer des éléments, manipuler le DOM, gérer les attributs, effectuer des requêtes HTTP, etc.

jQueryUI est un ensemble de composants et de fonctionnalités d'interface utilisateur construits sur jQuery (c'est-à-dire qu'il a besoin de jQuery pour fonctionner): boutons, boîtes de dialogue, curseurs, onglets, animations plus avancées, fonctionnalité glisser / déposer.

jQuery et jQueryUI sont tous deux conçus pour être `` ajoutés '' à votre site (bureau ou mobile) - si vous souhaitez ajouter une fonctionnalité particulière, jQuery ou jQueryUI peut vous aider.

jQuery Mobile , cependant, est un framework complet. Il est destiné à être votre point de départ pour un site mobile. Il nécessite jQuery et utilise les fonctionnalités de jQuery et jQueryUI pour fournir à la fois des composants d'interface utilisateur et des fonctionnalités API pour la création de sites adaptés aux mobiles. Vous pouvez toujours en utiliser autant ou aussi peu que vous le souhaitez, mais jQuery Mobile peut contrôler l'ensemble de la fenêtre d'affichage d'une manière adaptée aux mobiles si vous le permettez.

Une autre différence majeure est que jQuery et jQueryUI visent à être une couche au-dessus de votre HTML et CSS. Vous devriez pouvoir laisser votre balisage seul et l'améliorer avec jQuery. Cependant, jQuery Mobile fournit des moyens de définir où vous voulez que les composants apparaissent en utilisant uniquement HTML - par exemple (à partir du site 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>

L' data-roleattribut indique à jQuery Mobile de transformer cette liste en un composant d'interface utilisateur adapté aux mobiles et les attributs data-insetet data-filterdéfinissent les propriétés de celui-ci - sans écrire une seule ligne de JavaScript. Les composants jQueryUI, par contre, sont normalement créés en écrivant quelques lignes de JavaScript pour instancier le composant dans le DOM.


Alors que quelqu'un vient de passer de jQuery + UI sur des sites Web basés sur un navigateur à la compréhension de jQuery Mobile pour les appareils mobiles, je dois dire que j'ai du mal à voir comment cette réponse particulière a reçu 41 votes positifs mais AUCUN commentaire. Il souligne spécifiquement dans son objectif principal que contrairement à jQueryUI qui est "construit sur jQuery", jQuery Mobile est "cependant un framework complet". Ceci est totalement en contradiction avec les autres réponses ci-dessous, qui indiquent (assez précisément - je pense!) Que jQuery Mobile nécessite également jQuery pour s'exécuter, et ajoute à ma confusion personnelle sur ce dont j'ai besoin .js et .css.
Andy Lorenz

3
Désolé, vous avez raison, je n'ai pas précisé que jQuery Mobile nécessite également jQuery - je vais le mettre à jour. Bien que notez que ma réponse n'est pas vraiment conçue pour vous dire comment être opérationnel avec jQuery Mobile (ce n'est pas la question d'origine), juste pour donner un large aperçu des différences conceptuelles.
Stu Cox

super truc Stu, merci d'avoir peaufiné votre réponse qui a maintenant beaucoup plus de sens. Vous pourriez être surpris de voir à quel point il est difficile pour les `` débutants jquery mobiles '' de se lancer - même le site Web jquerymobile ne le rend pas évident! Cela en soi conduit à un autre point déroutant - quelle version de jquery jquerymobile a-t-il besoin? Au moment de la rédaction de cet article, jquerymobile.com implique seulement que la version 1.4.2 est compatible avec jQuery 1.8 - 1.10 / 2.0 - mais je ne trouve nulle part où les versions et les dépendances js / css sont spécifiquement indiquées!
Andy Lorenz

28

Qu'est-ce que jQuery mobile

JQM (jQuery mobile) est un système d'interface utilisateur pour les téléphones mobiles qui repose sur jQuery. jQuery est requis pour que JQM fonctionne. Contrairement à d'autres cadres de téléphonie mobile similaires, JQM cible la prise en charge de toutes les principales plates-formes mobiles, tablettes, liseuses et ordinateurs de bureau, et pas seulement les navigateurs de kits Web mobiles. L'une des fonctionnalités les plus notables du framework est le système de navigation Ajax qui utilise des transitions de pages animées (très cool).

Ce qui peut être nouveau pour vous

Une chose à propos de JQM qui lance une balle courbe aux nouveaux utilisateurs est la navigation ajax. Venant de jquery, vous êtes probablement habitué à inclure votre javascript dans chaque page, puis à utiliser dom ready ( $(function(){ ... }ou $(document).ready(function(){ .... }) pour lancer toutes vos activités javascript amusantes. Mais comme JQM utilise la navigation ajax, le système attirera d'autres pages dans le même dom que la première page et ne chargera pas vos scripts contenus dans le fichier <head>. Lorsque la page suivante est chargée via ajax, vous remarquerez que votre contenu $(function(){ ...}ne fonctionnera pas sur la deuxième page. La solution à cela est liée à l'événement pageinit. Les exemples suivants vous aideront au début de votre voyage:

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

});

Afin de cibler une certaine page, vous ajoutez l'id de la page:

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

});

Comprendre les événements de la nouvelle page vous aidera beaucoup lorsque vous débuterez avec JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Bonne chance!


5

jQuery est un cadre de manipulation / traversée DOM et JavaScript AJAX. Il résume automatiquement une grande partie de la complexité entre les différents navigateurs. Il existe d'innombrables plugins jQuery qui simplifient de nombreuses tâches.

jQuery Mobile est une infrastructure d'interface utilisateur conçue pour les applications mobiles qui repose sur jQuery. Il a des composants de thème et d'interface utilisateur.

Dans l'ensemble, ils sont complémentaires. Vous n'avez pas besoin d'utiliser jQuery Mobile pour utiliser jQuery. Mais pour utiliser jQuery Mobile, vous devez utiliser jQuery.


Alors, pouvez-vous dire que jQuery Mobilec'est la version mobile de jQuery UI?
Jeff Hines

@JeffHines - un peu. ce sont des bases de code différentes, mais elles atteignent des objectifs similaires de différentes manières.
Daniel A. White

Excellents commentaires, Daniel A. White. Vous n'avez pas besoin d'utiliser jQuery Mobile pour utiliser jQuery. Mais pour utiliser jQuery Mobile, vous devez utiliser jQuery.
user3174782

Une version alpha est maintenant en préparation. jquerymobile.com/changelog/1.5.0-alpha1
Jackson Ng

2

Vous n'avez pas assez de points à commenter ci-dessus, alors ajoutez au fil pour répondre à la deuxième question d'Andy sur les dépendances.

Je crois que ce que vous recherchez est ici: 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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.