Différence entre jQuery et jQuery Mobile ?

Question

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

Mais il y a naturellement eu quelques problèmes liés à la façon dont j'ai formaté les choses et à la façon dont elles apparaissaient sur les écrans des appareils mobiles avec lesquels je testais. En essayant de résoudre ces problèmes, je suis tombé sur de nombreuses suggestions pour me faciliter la tâche en utilisant jQuery mobile.

Maintenant, cela m'embrouille - jQuery n'a aucun rôle dans le formatage. Ce sont mes connaissances de débutant en matière de CSS mobile qui ont 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 ?

Answer 1

jQuery est purement conçu pour simplifier et normaliser les scripts dans les différents navigateurs. Il se concentre sur les éléments de bas niveau : création d'éléments, manipulation du DOM, gestion des attributs, exécution de requêtes HTTP, etc.

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

jQuery et jQueryUI sont tous deux conçus pour être "ajoutés" à votre site (de bureau ou mobile). Si vous souhaitez ajouter une fonctionnalité particulière, jQuery ou jQueryUI peuvent vous aider.

jQuery Mobile Cependant, l'entreprise est un cadre 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 de jQueryUI pour fournir des composants d'interface utilisateur et des fonctionnalités d'API permettant de créer des sites adaptés aux mobiles. Vous pouvez utiliser autant ou aussi peu de composants 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 laissez faire.

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 permet de définir l'endroit où vous voulez que les composants apparaissent en utilisant uniquement le HTML - par exemple (d'après le site de 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>

El data-role indique à jQuery Mobile de transformer cette liste en un composant d'interface utilisateur adapté aux mobiles et l'attribut data-inset y data-filter Les composants jQueryUI, quant à eux, sont normalement créés en écrivant quelques lignes de JavaScript pour instancier le composant dans le DOM.

Answer 2

Ce qu'est jQuery mobile

JQM (jQuery mobile) est un système d'interface utilisateur pour les téléphones mobiles qui est construit au-dessus de jQuery . jQuery est nécessaire pour que JQM fonctionne. Contrairement à d'autres frameworks similaires pour téléphones mobiles, JQM vise à prendre en charge toutes les principales plateformes de mobiles, tablettes, lecteurs électroniques et ordinateurs de bureau, et pas seulement les navigateurs Webkit pour mobiles. L'une des caractéristiques les plus remarquables de ce framework est le système de navigation Ajax qui utilise des transitions de page animées (très cool).

Ce qui peut être nouveau pour vous

Un aspect de JQM qui surprend les nouveaux utilisateurs est la navigation par ajax. Venant de jquery, vous êtes probablement habitué à inclure votre javascript dans chaque page et à utiliser dom ready( $(function(){ ... } o $(document).ready(function(){ .... } ) pour lancer toutes vos activités javascript amusantes. Mais parce que JQM utilise la navigation par ajax, le système tirera 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 à l'intérieur $(function(){ ...} ne fonctionnera pas sur la deuxième page. La solution à ce problème est de lier 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, il faut ajouter l'identifiant de la page :

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

});

Comprendre les nouveaux événements de la page vous aidera beaucoup lorsque vous commencerez à utiliser JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Bonne chance !

Answer 3

Je suis tombé sur ça sur ma machine Google : http://www.raymondcamden.com/index.cfm/2011/4/29/How-do-jQuery-jQuery-UI-and-jQuery-Mobile-fit-together

Answer 4

JQuery est un cadre JavaScript de manipulation/traversée du DOM et AJAX. Il fait automatiquement abstraction d'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 un cadre d'interface utilisateur conçu pour les applications mobiles et basé sur jQuery. Il comporte des composants de thématisation et d'interface utilisateur.

En somme, 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.

Answer 5

Je n'ai pas assez de points pour commenter ce qui précède et j'ajoute donc au fil de discussion pour répondre à la deuxième question d'Andy sur les dépendances.

Je crois que ce que vous cherchez est ici : Démonstration de jQuery Mobile

<!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>