Table des matières
Une fois actif, jQuery Mobile fait deux choses :
Premièrement, il optimise les fonctions natives pour améliorer leurs performances sur les appareils mobiles.
Deuxièmement, il modifie le code HTML et génère une mise en page avec une série d'éléments graphiques prédéfinis qui accélère considérablement la vitesse de production.
Installer jQuery Mobile
Bien qu'il soit possible et une technique très courante sur les sites Web d'installer jQuery Mobile en se connectant directement aux fichiers stockés dans le cloud, il est fortement recommandé de ne pas appliquer cette technique pour les applications PhoneGap. Très souvent votre application sera utilisée sans connexion internet ou avec une connexion intermittente. Si les fichiers jQuery sont liés à des documents cloud, l'application deviendrait éventuellement inutilisable.
Pour installer ce framework, la première chose à faire est de télécharger jQuery depuis sa page officielle :
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Une fois jQuery téléchargé, vous devez télécharger le plugin jQuery Mobile depuis son site officiel :
http://jquerymobile.com/download/
Nous allons commencer par un exemple qui nous permet de comprendre la programmation et la structure de l'application.
Nous allons créer un fichier html avec le code suivant
Application mobile Jquery
jQuery Mobile nous permet de créer des interfaces adaptées aux mobiles très rapidement et avec relativement peu d'efforts.
Le fonctionnement consiste à réécrire le code original du document et à en générer un nouveau, plus complexe, en fonction des caractéristiques et des arguments demandés.
Une caractéristique intéressante de jQuery Mobile est que, contrairement à un site web, qui passe d'un document HTML à un autre pour afficher des informations, les pages ou écrans d'une application sont gérés à partir d'un seul document HTML.
Les pages ou écrans sont dans un seul fichier, jQuery Mobile les gère pour n'afficher que la partie du document correspondant à chaque écran tandis que le reste reste caché. De cette façon, le chargement des pages est considérablement accéléré, cela permet également de gérer les événements et les animations entre un écran et un autre.
jQuery Mobile tire pleinement parti des nouveaux éléments HTML5 et fait un usage intensif des attributs personnalisés définis avec le préfixe "data-"
Par exemple rôle-données, l'un des attributs les plus utilisés dans jQuery Mobile, permet de définir le rôle au niveau de la fonctionnalité et de l'apparence de l'élément qui le contient. En définissant le rôle d'un élément, cet attribut vous permet de créer des pages, des boutons, des menus et bien d'autres éléments.
En insérant l'attribut data-role dans n'importe quelle balise, nous en faisons un élément d'interface. Pas besoin d'ajouter de code supplémentaire jQuery ajouter tous les éléments graphiques, les classes et même les animations nécessaires au fonctionnement de cet élément particulier.
Par exemple, pour créer une page, vous utilisez l'attribut rôle-données = "page" de cette façon:
- Écran 1
- Écran 2
Allons un peu plus loin dans le lien que nous venons de créer et ajoutons l'attribut jQuery Mobile data-role = ”button” pour que ce lien se comporte comme un bouton :
Pour revenir à la page principale, vous pouvez appliquer la technique précédente consistant à lier un lien à l'identifiant de la page principale, ou encore plus simple, vous pouvez utiliser l'attribut data-rel = ”back” qui renvoie l'application à l'écran immédiatement précédent .Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
