web-dev-qa-db-fra.com

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 façon dont j'avais formaté les choses et à la façon dont elles 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 simplifier les choses en utilisant jQuery mobile.

Maintenant, cela m'embrouille - jQuery n'avait pas de rôle dans le formatage. Ce n’était que la connaissance du CSS mobile du niveau de débutant qui me posait problème.

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?

jqueryjquery-mobile
89
temporary_user_name

jQuery est uniquement conçu pour simplifier et normaliser les scripts entre navigateurs. Il se concentre sur les tâches de bas niveau: créer des éléments, manipuler le DOM, gérer les attributs, exécuter 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és de 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 de jQueryUI pour fournir à la fois des composants d'interface utilisateur et des fonctionnalités d'API permettant de créer des sites compatibles avec les appareils mobiles. Vous pouvez toujours en utiliser autant ou aussi peu que vous le souhaitez, mais jQuery Mobile peut contrôler l'intégralité de la fenêtre d'affichage de manière conviviale pour il.

Une autre différence majeure est que jQuery et jQueryUI visent à être une couche au-dessus de votre code 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 l'emplacement d'affichage des composants à l'aide de HTML uniquement - 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'attribut data-role Indique à jQuery Mobile de transformer cette liste en un composant d'interface utilisateur conviviale pour les mobiles, ainsi que les attributs data-inset Et data-filter, Sans écrire une seule ligne de code JavaScript. . Les composants jQueryUI, en revanche, sont normalement créés en écrivant quelques lignes de JavaScript pour instancier le composant dans le DOM.

91
Stu Cox

Qu'est-ce que jQuery mobile?

JQM (jQuery mobile) est un système d'interface utilisateur pour téléphones mobiles construit sur jQuery. jQuery est requis pour que JQM fonctionne. Contrairement à d'autres infrastructures de téléphonie mobile similaires, JQM vise la prise en charge de toutes les principales plates-formes mobiles, tablettes, liseuses et ordinateurs de bureau, et pas seulement des navigateurs Webkit mobiles. L'une des fonctionnalités les plus remarquables du 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

La navigation ajax est une chose à propos de JQM qui envoie une balle en courbe à de nouveaux utilisateurs. En 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 parce que JQM utilise ajax navigation, le système tire d'autres pages dans le même domaine que la première page et ne charge pas les scripts contenus dans le <head>. Lorsque la page suivante est chargée via ajax, vous remarquerez que votre contenu à l'intérieur de $(function(){ ...} ne fonctionnera pas sur la deuxième page. La solution à cela 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, 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 lorsque vous débuterez avec JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Bonne chance!

28
codaniel

jQuery est un framework JavaScript manipulant/traversant et AJAX). Il résout 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 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 tout, ils sont gratuits. Vous n'êtes pas obligé d'utiliser jQuery Mobile pour utiliser jQuery. Mais pour utiliser jQuery Mobile, vous devez utiliser jQuery.

4
Daniel A. White

N'ayant pas assez de points à commenter ci-dessus, ajoutez donc au fil de discussion pour répondre à la deuxième question de dépendance d'Andy.

Je crois que ce que vous recherchez est ici: démo 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>
2
TransitDataHead