Il n'y a pas si longtemps, l'équipe jQuery a publié jQuery Mobile 1.2. Cette nouvelle version a des changements fantastiques! Dans cet article, nous allons passer en revue certains des nouveaux widgets disponibles pour les développeurs, examiner les modifications apportées aux widgets existants et examiner quelques améliorations pouvant affecter votre application jQuery Mobile. Commençons, allons-nous?

Premièrement, nous devrons télécharger les bits et les octets. Rendez-vous sur la page de téléchargement de jQuery Mobile et téléchargez l'option qui répond le mieux à vos besoins. Alternativement, vous pouvez simplement utiliser le code standard fourni ci-dessous.

De plus, le moment est peut-être venu de discuter rapidement du générateur de téléchargement que l'équipe jQuery Mobile est en train de créer. Il est toujours dans Alpha, mais cela vous permet de personnaliser votre téléchargement pour n'inclure que les parties de jQuery Mobile dont vous avez besoin, et rien de plus. Vous pouvez exclure des événements, des transitions, des éléments de formulaire ou des widgets spécifiques qui ne vous intéressent pas. Il est destiné aux développeurs qui sont extrêmement soucieux de saisir le plus haut niveau de performances de leur application..

---

Widgets

Le cœur de toute application jQuery Mobile réside dans ses widgets. On peut dire que c'est la partie la plus visible de la page et la partie qui permet aux utilisateurs d'interagir avec la page d'une manière aussi simple. L'équipe de jQuery Mobile a passé d'innombrables heures à tester, à construire et à affiner leurs widgets afin de s'assurer qu'ils sont aussi performants que possible. Dans la version 1.2, l'équipe l'a véritablement sortie du parc avec un widget demandé par les développeurs depuis la sortie du framework: les modaux popup.

Popups

Un modal contextuel est une petite section de la page qui recouvre d'autres parties de la page. Ils sont généralement utilisés comme infobulles ou pour afficher des photos, des cartes et du contenu supplémentaire. Ces informations ne sont généralement pas assez importantes pour justifier une autre page, mais il est tout de même important que vous ayez besoin de les afficher seules. La manière dont jQuery Mobile 1.2 a implémenté les popups est parfaite. Apprenons à quel point il est facile d’ajouter des popups à un projet.

Une note rapide, par souci de brièveté: tous les exemples de code ci-dessous utiliseront le code HTML standard. Les fichiers CSS et JS de jQuery Mobile (y compris jQuery) sont reliés par un lien direct à l'aide du CDN jQuery pour votre commodité..

L'ajout d'une fenêtre contextuelle à une page de votre application est un processus en deux étapes. D'abord, vous aurez besoin d'un moyen de déclencher le popup. Il s'agit généralement d'un lien, d'un bouton ou de quelque chose avec lequel l'utilisateur interagit. Pour déclencher l'élément, nous ajoutons l'attribut suivant:

data-rel = "popup"

Deuxièmement, vous avez besoin que le contenu soit affiché. Cela pourrait aller d'un seul div à un menu, une forme, ou même des photos. L'élément content obtient son propre attribut:

data-role = "popup"

Enfin, pour les boutons de lien simples, le href attribut doit correspondre à la identifiant du contenu à afficher. Passons en revue la mise en œuvre complète.

Ouvrir Popup 
 
Ceci est un popup complètement basique, aucune option n'est définie.
 

Ce que vous verrez sur la page devrait ressembler à ceci:

Info-bulles

Maintenant que vous savez comment créer une fenêtre contextuelle, examinons d'autres possibilités. Une utilisation courante est une info-bulle. texte d'aide ou texte développé affiché lorsqu'un utilisateur clique sur un bouton. Configurez le code comme auparavant:

En savoir plus 
 
Vous avez découvert plus!.
 

Cette fois, nous appelons le contenu résultant en utilisant le e swatch de jQuery Mobile pour lui donner une apparence plus agréable. Cela nous aide à nous rappeler que les popups sont des citoyens de première classe jQuery Mobile et peuvent être traités comme n'importe quoi d'autre sur la page..

Les menus

Passons à quelque chose d'un peu plus compliqué: un menu. C'est une approche populaire pour la navigation de page. Donnez à l'utilisateur le menu à portée de main. Alors à quoi ça ressemble avec des popups?

Menu 
 
 
Mon menu
 
Non lié
 
Lié
 
Avec compte42
 
 

Et la sortie qui en résulte devrait ressembler à ceci:

Vous pouvez également utiliser les listes réductibles de 1.2 dans des popups. Voici un exemple rapide:

Menu imbriqué 
 
 
 
Couleurs
 
 
rouge
 
Bleu
 
 
 
 
Formes
 
 
Cercle
 
Carré
 
 
 
 

Et les résultats:

Il est à noter que data-inset = "true" est requis sur le listview ou les coins de votre liste apparaîtront. Essayez et vous verrez.

Formes

Une autre approche UX populaire consiste à afficher un formulaire de connexion planant au-dessus d'une page. C'est désormais possible avec les popups jQuery Mobile. Voici un simple formulaire de nom d'utilisateur / mot de passe.

S'identifier 
 
 
Veuillez vous connecter
 Nom d'utilisateur:  Mot de passe:  se connecter 
 

Ce qui vous donne:

Par défaut, les popups se centrent sur l'objet qui les a déclenchés. Il existe un attribut facultatif que vous verrez dans les trois exemples suivants. Ses data-position-to = "window" et vous l'appliquez à l'élément qui déclenche le popup. Essayez d'ajouter cela à la S'identifier bouton ci-dessus pour voir ce qui se passe.

Dialogues

Les applications Web ont souvent besoin d'interagir avec l'utilisateur. Nous venons de passer en revue une approche: un formulaire de connexion. Mais parfois, vous devez poser des questions à l'utilisateur. Un dialogue est une solution parfaite pour cela. et que savez-vous, les popups vous ont couvert! Alors à quoi ressemble ce code? Voici un exemple simple:

Dialogue 
 
 
Supprimer la page?
 
 
 
Êtes-vous sûr de vouloir supprimer cette page??
 
Cette action ne peut pas être annulée.
 Non Oui, supprimez-le 
 

Dans le conteneur de contenu contextuel, notez un autre nouvel attribut pour votre utilisation: data-overlay-theme = "a". C'est cet attribut qui applique l'arrière-plan ombré à la boîte de dialogue. Il est affecté par votre thème. Soyez donc prudent lorsque vous travaillez avec des thèmes créés avec ThemeRoller..

Photos

Je ne peux pas compter le nombre de fois où j'ai vu des développeurs jQuery Mobile demander une meilleure façon de gérer les galeries d'images. Bien que les fenêtres contextuelles ne soient pas la solution idéale pour un grand nombre d'images, elles sont idéales pour une poignée d'images qui doivent être agrandies. Mieux encore, c'est incroyablement facile. Vérifiez-le:

Photo 
 Fermer 

Le code ci-dessus vous donne une photo élégante centrée sur la fenêtre, y compris un bouton Fermer la fenêtre.

Comment ont-ils fait ça? Dans le cadre d’un popup, le ancre La balise a des attributs qui se comportent légèrement différents de ceux utilisés dans d’autres emplacements de la page. Plus précisément, le ui-btn-right classe positionne l'image dans le coin de l'image plutôt que sur le côté, tandis que la icône de données et data-iconpos les attributs vous permettent de styler le bouton comme vous le feriez avec un bouton normal.

Vous pouvez obtenir assez de fantaisie avec des popups incluant, entre autres, l'affichage de vidéos en ligne et même de cartes interactives. Consultez la documentation de jQuery Mobile pour les popups et les iframes.

Vues de liste réductible

Une autre grande nouveauté est la possibilité de combiner des ensembles réductibles avec des vues de liste. Appelez-les "Vues compressibles" et vous obtenez un tout nouveau widget dans jQuery Mobile 1.2. Comment travaillent-ils? Je suis content que vous avez demandé. Créez simplement une liste de votre choix, puis enroulez-la dans un ensemble pliable. Les vues de liste réductibles prennent également en charge plusieurs listes - alors devenez fou!

 
Spice Girl préférée?
 
 
Chic
 
Effrayant
 
Sportif
 
Bébé
 
Gingembre
 
 

Le code ci-dessus entraînerait cette vue en liste compressible:

---

Améliorations

En plus des nouveaux types de widgets, jQuery Mobile 1.2 apporte de nombreuses améliorations utiles aux fonctionnalités existantes. Jetons un coup d'oeil à certains des plus précieux.

Modifications du support jQuery

L'une des améliorations les plus importantes apportées à la version 1.2 est la prise en charge supplémentaire de jQuery 1.8. Cela entraîne des augmentations de performances significatives sous la forme d'un Sizzle.js (le moteur de sélection de jQuery) complètement réécrit, ainsi que de nombreuses autres améliorations..

Le compromis est que l'équipe de jQuery Mobile a décidé qu'il était temps de désactiver le support pour jQuery 1.6. Cela peut être regrettable pour certaines personnes qui utilisent encore les anciennes versions de jQuery, mais c'est un commerce équitable.

Affichage par liste

Si vous avez déjà eu à gérer une liste de personnes, d'endroits ou d'éléments changeant constamment dans jQuery Mobile, vous avez probablement dû écrire un code compliqué pour afficher les en-têtes de liste dynamiques. Nul doute que vous ayez passé tout ce temps, parce que l'équipe de jQuery Mobile a tout simplifié: déposer un seul attribut.

data-autodividers = "true"

Cela tourne cette liste:

Dans:

Notez que cela ne gère pas le tri, le regroupement ou le filtrage. Pour ce type de fonctionnalité, essayez d’utiliser mon plugin jQuery Mobile Tinysort..

Listes en lecture seule

jQuery Mobile offre des vues de liste "en lecture seule", mais il était difficile de dire qu'elles n'étaient pas cliquables. La version 1.2 supprime le dégradé de liste, donnant à la ligne une couleur uniforme. Cela devrait fournir un meilleur repère visuel à vos utilisateurs..

Meilleurs ajustements de largeur sur les éléments de formulaire

La version 1.2 corrige un problème semi-ennuyeux avec les éléments de formulaire, selon lequel ils ne prendraient pas toute la largeur de leur élément parent dans certains cas.

Périphériques supplémentaires ajoutés

Vous avez peut-être remarqué que de nouveaux appareils sont ajoutés presque quotidiennement. L'équipe jQuery Mobile fait de son mieux pour tester autant de périphériques que possible. Les appareils / systèmes d'exploitation / navigateurs suivants ont été ajoutés à la liste: Les appareils iOS 6, Android 4.1 (Jellybean), Tizen, Firefox pour Android et Kindle Fire HD..

---

Liste complète des modifications

Vous trouverez une liste complète des modifications apportées à la version 1.2 sur le blog jQuery Mobile..

J'espère que certaines de ces améliorations aideront à améliorer vos applications. N'oubliez pas que l'équipe jQuery Mobile est à vos côtés! Si vous voyez quelque chose que vous jugez utile, demandez-le: créez un problème dans leur référentiel Github et suggérez-le. Mieux encore, fourchez leur dépôt et ajoutez du code vous-même!