Différence entre jQuery et jQuery Mobile?

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?

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.

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!

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.

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>