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, qui utilise fréquemment jQuery.

Mais il y avait naturellement quelques problèmes liés à la manière dont je formais les choses et à la façon dont elles apparaissaient sur les écrans des appareils mobiles que je testais et en essayant de résoudre ces problèmes. jQuery mobile.

Maintenant, cela m’embrouille – jQuery n’avait aucun rôle dans le formatage. C’était juste la connaissance de niveau débutant du CSS mobile qui causait 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, que va-t-il y avoir de nouveau pour moi?

jQuery est uniquement conçu pour simplifier et standardiser les scripts sur tous les navigateurs. Il se concentre sur les éléments de bas niveau: création d’éléments, manipulation du DOM, gestion des atsortingbuts, 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.-à-d. jQuery pour fonctionner): boutons, boîtes de dialog, curseurs, tabs, 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 append une fonctionnalité particulière, jQuery ou jQueryUI peuvent vous aider.

jQuery Mobile , cependant, est un framework complet. Il est destiné à être votre sharepoint 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 compatibles avec les mobiles. Vous pouvez toujours en utiliser autant ou aussi peu que vous le souhaitez, mais jQuery Mobile peut contrôler toute la fenêtre d’affichage de manière mobile 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 fournit des moyens de définir où vous souhaitez que les composants apparaissent à l’aide de HTML uniquement – par exemple (à partir du site jQuery Mobile):

 

L’atsortingbut data-role indique à jQuery Mobile de transformer cette liste en un composant d’interface utilisateur compatible avec les appareils mobiles et les atsortingbuts de data-inset et data-filter définissent ces propriétés 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.

Quel est le mobile jQuery?

JQM (jQuery mobile) est un système d’interface utilisateur conçu pour les téléphones mobiles, construit sur jQuery. jQuery est requirejs pour que JQM fonctionne. Contrairement à d’autres systèmes de téléphonie mobile similaires, JQM cible la prise en charge de toutes les principales plates-formes mobiles, tablettes, lecteurs électroniques et ordinateurs de bureau, et pas seulement les navigateurs Webkit mobiles. L’une des caractéristiques les plus remarquables du framework est le système de navigation Ajax qui utilise des transitions de pages animées (très cool).

Que 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(){ .... } ) à tirer toutes vos activités javascript amusantes, mais parce que JQM utilise la navigation ajax, le système extraira les autres pages dans le même dom que la première page et ne chargera pas vos scripts contenus dans . notez que votre contenu à l’intérieur de $(function(){ ...} ne fonctionnera pas sur la deuxième page. La solution à ce problème est liée à l’événement pageinit. Ces exemples suivants vous aideront au début de votre parcours:

 $(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 nouveaux événements de page vous aidera beaucoup au démarrage avec JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Bonne chance!

jQuery est un framework de manipulation / traversée DOM et JavaScript AJAX. Il élimine automatiquement une grande partie de la complexité entre les différents navigateurs. Il existe d’innombrables plugins jQuery qui simplifient beaucoup de tâches.

jQuery Mobile est un framework d’interface utilisateur destiné aux applications mobiles basées sur jQuery. Il a des composants de thème et d’interface utilisateur.

En tout, ils sont gratuits. Vous n’avez pas besoin d’utiliser jQuery Mobile pour utiliser jQuery. Mais pour utiliser jQuery Mobile, vous devez utiliser jQuery.

Ne pas avoir suffisamment de points pour commenter ci-dessus, ajoutant ainsi au thread pour répondre à la deuxième question d’Andy sur les dépendances.

Je crois que ce que vous cherchez est ici: Demo Mobile jQuery

 < !DOCTYPE html>   Page Title       ...content goes here...