Application mobile / Guide du débutant pour jQuery Mobile

Au cours des deux ou trois dernières années, nous avons assisté à une croissance phénoménale du nombre de navigateurs et de systèmes d'exploitation pris en charge par les sites Web mobiles. On pense notamment aux plateformes iOS d'Apple et Android de Google. Mais d'autres, comme PalmOS et Blackberry, font toujours partie du groupe. Jusqu'à récemment, il était très difficile de faire correspondre un seul thème mobile à toutes ces plateformes..

JavaScript était un début, mais il n'y avait pas de bibliothèque vraiment unifiée jusqu'à présent. jQuery Mobile utilise toutes les meilleures fonctionnalités de jQuery et les transfère vers une source Web pour mobile. La bibliothèque s'apparente davantage à un framework comprenant des animations, des effets de transition et des styles CSS automatiques pour les éléments HTML de base. Dans ce guide, j'espère présenter la plate-forme de manière à ce que vous puissiez créer vos propres applications mobiles jQuery..

Fonctions et support du système d'exploitation

La raison pour laquelle je suggère d’apprendre jQuery Mobile par rapport à d’autres cadres est la simplicité. Le code a été construit sur le noyau de jQuery et comprend une équipe active de développeurs écrivant des scripts et modifiant des bogues. Parmi les nombreuses fonctionnalités, citons le support HTML5, les liens de navigation basés sur Ajax et les gestionnaires d’événements Touch / Swipe.

Le support varie d’un téléphone à l’autre et est divisé en un tableau de 3 catégories de A-C. A est le niveau supérieur qui supporte complètement jQuery Mobile, B a tout, sauf Ajax, tandis que C est du code HTML de base avec peu ou pas de JavaScript. Heureusement, la plupart des systèmes d’exploitation populaires sont entièrement pris en charge. J’ajoute ci-dessous une liste de quelques exemples..

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Si vous voulez en savoir plus, essayez de lire sur leur page de documentation officielle. Ce n'est pas écrit en charabia et se sent très facile à suivre. Maintenant, concentrons-nous sur les bases de l'écriture d'une page mobile jQuery et sur la manière de construire une petite application.!

Le modèle HTML standard

Pour que votre première application mobile fonctionne, vous devez commencer par définir un modèle. Cela inclut le code de base jQuery ainsi que les fichiers JS et CSS mobiles, tous externes hébergés à partir du CDN jQuery. Découvrez mon exemple de code ci-dessous.

Les seuls éléments étrangers ici devraient être les deux balises méta. Haut fenêtre d'affichage tag met à jour les navigateurs mobiles pour qu'ils utilisent un effet de zoom complet. Définir la valeur largeur = largeur-appareil définira la largeur de la page exactement à la largeur de l’écran du téléphone. Et surtout, il ne désactive pas les fonctionnalités de zoom, car jQuery Mobile peut s’adapter à des changements de disposition..

La prochaine balise meta Compatible X-UA oblige simplement Internet Explorer à rendre le code HTML dans sa plus récente itération. Les anciens navigateurs, et surtout les mobiles, tenteront de contourner les bogues de rendu inconnus..

Construire le contenu du corps

Maintenant, c’est là que jQuery mobile peut devenir difficile. Chaque page HTML ne correspond pas nécessairement à une page sur le site mobile. La structure utilise les attributs de données de HTML5, que vous pouvez créer à tout moment en ajoutant Les données- préalablement. D'une manière similaire data-role = "page" peut être réglé sur plusieurs divs dans un seul fichier HTML, ce qui vous donne plus d'une page.

Vous pouvez alors vous déplacer entre ces pages avec des liens d'ancrage et un identifiant unique. Cette configuration est une bonne idée pour les applications simples et basiques. Si vous n'avez besoin que de 3 à 5 pages, pourquoi ne pas tout stocker dans un seul fichier? Sauf si vous avez beaucoup de contenu écrit, dans ce cas, essayez d’utiliser PHP pour gagner du temps..

Consultez l'exemple de code ci-dessous si vous êtes perdu.

 
 
 
Barre de titre supérieure
 
 
 
Afficher une autre page??
 
conseil: cliquez sur le bouton ci-dessous!
 
À propos de nous
 
  
 
 
 
Page 2 ici
 
 
 
juste un peu de contenu supplémentaire.
 
Je veux dire, vous pouvez retourner à tout moment.
 
 
   

Jetez un coup d’œil au lien d’ancre de la page d’index. Remarquez que j'ai ajouté l'attribut data-role = "bouton" configurer le lien en tant que bouton. Mais au lieu d'utiliser les styles par défaut, nous incluons data-theme = "c". Cela permet de basculer entre 1 ou 5 modèles (thèmes a-e) conditionnés par défaut en tant que styles CSS dans jQ Mobile..

Mon bouton couvre également toute la largeur de la page. Pour supprimer le comportement, nous devons définir l'élément de bloc à l'affichage en ligne. L'attribut pour faire cela est data-inline = "true" que vous pouvez ajouter sur n'importe quel bouton d'ancrage.

Barres d'en-tête et de pied de page

Tout en haut et en bas de vos applications, vous devez ajouter le contenu des en-têtes et des pieds de page. Ce style de conception est souvent attribué aux applications iOS qui sont devenues populaires grâce au App Store mobile d'Apple. jQ Mobile utilise les attributs de data-role pour définir l'en-tête, le pied de page et le contenu de la page. Regardons brièvement ces zones.

Boutons supérieurs

Par défaut, la barre du haut prend en charge un ensemble de deux (2) liens de la même manière que les autres applications mobiles. iOS utilise par défaut un “retour” bouton à gauche et souvent un “options” ou “config” sur la droite.

 
 Réglages 
Page 2 ici
 
 

Le code ci-dessus se concentre uniquement sur le conteneur div de notre page À propos, ainsi que sur le contenu de l'en-tête. L'attribut HTML supplémentaire data-add-back-btn = "true" ne fonctionnera que lorsqu’il sera ajouté à un rôle de données de page. Le but est d'inclure automatiquement un bouton retour qui fonctionne de la même manière que le bouton retour de votre navigateur..

Nous aurions pu ajouter un bouton de retour manuellement avec un code similaire à celui utilisé dans la zone de contenu. Mais je pense que cela prend beaucoup plus de temps à installer, en particulier sur plusieurs pages. Tous les liens d'ancrage dans la section d'en-tête seront par défaut dans les positions gauche / droite du bouton. En utilisant class = "ui-btn-right" Cela a repositionné le bouton Réglages afin de laisser de l’espace libre au bouton Précédent. J'utilise aussi les styles de thème secondaires pour lui donner un coup de fouet!

Navigation de pied de page

La zone de bas de page n'est pas très utile au début. C'est un endroit où vous pouvez stocker des éléments de droits d'auteur et des liens plus importants, mais cela pourrait tout aussi bien être ajouté au bas de votre zone de contenu. Alors à quoi sert d'utiliser le pied de page?

Le meilleur exemple que j'ai vu utilise l'espace de bas de page en tant que système de navigation dans lequel des liens de tabulation apparaissent pour contrôler la navigation dans les pages. De nombreuses options vous permettent de sélectionner des effets en plein écran, d'ajouter des icônes, de régler le placement et quelques autres attributs. Mais construisons simplement un pied de page avec 3 boutons pour avoir une idée de la marche à suivre..

• Aperçu de la démo en direct

Donc, voici un code de pied de page pour la section de page à propos. data-role = "navbar" doit être ajouté sur l'élément conteneur contenant une liste non ordonnée et NON l'élément UL lui-même. Chaque lien de la liste est traité comme une barre d'onglets, qui est ensuite divisée en parts égales en fonction du nombre total de liens. La classe supplémentaire de ui-body-b ajoute simplement des effets esthétiques lorsque nous basculons entre les quelques styles disponibles.

Si vous remarquez sur le premier bouton, j'ai l'attribut direction de données = "reverse". Même si je pouvais utiliser la configuration du bouton Précédent comme auparavant pour revenir à la page d'accueil, j'ai plutôt utilisé l'ID de page de #indice. Par défaut, la fenêtre de l'application passera à droite, ce qui semble assez collant, car vous vous attendez à ce que l'animation recule. Si vous avez le temps, vous pouvez jouer avec encore plus de ces effets animés. Consultez la page d'informations sur les transitions dans la documentation de jQuery.

Ajax et pages dynamiques

Le premier segment a vraiment ouvert la voie à la création d’une application mobile avec jQuery. Mais je veux démarrer une nouvelle application qui charge les données d'une page externe. Je vais utiliser un script PHP très simple pour atteindre le $ _REQUEST [] variable et afficher un petit coup de Dribbble en conséquence. Le diaporama ci-dessous devrait vous donner une idée de ce que nous allons construire.

Je vais d’abord créer un ensemble de pages index.html sur le modèle par défaut. Pour cet écran d'accueil, j'utilise une configuration de vue liste pour afficher chaque lien dans l'ordre. Ceci est fait dans la zone de contenu avec un data-role = "listview" attribut sur le conteneur de liste. En coupant le même en-tête qu'auparavant, j'ai ajouté tout le code de cette nouvelle page d'index ci-dessous..

 
 
 
Photos d'octobre 2011
 
 
 
 
Première image
 
Deuxième image
 
Troisième image
 
Quatrième image
 
 
  
   

Chacun des liens d'ancrage dans ma vue en liste pointe vers le même fichier - index.php. Mais nous passons dans le paramètre imgid comme variable de requête. Sur le fichier image.php, nous prenons l’ID et le testons avec 4 valeurs prédéfinies. Si une correspondance est utilisée, nous utilisons l'URL et le titre de l'image correspondants, sinon, nous affichons simplement un cliché Dribbble par défaut..

Script d'Image Loader

Le script image.php a toujours le modèle par défaut jQuery Mobile ajouté au code. Il partage en fait un en-tête et un pied de page très similaires, à l'exception de l'ajout de notre attribut de lien arrière data-add-back-btn = "true". Remarquez que ce bouton n'apparaîtra que si nous venons d'abord de index.html! Essayez de charger directement image.php et rien ne s'affichera car il n'y a pas “retour” déménager à.

Je pense que nous pouvons donner un peu plus de sens au code en examinant d'abord ma logique PHP. Nous utilisons un commutateur / Cas méthode pour vérifier les 4 différents ID et fournir un titre d'en-tête, une URL d'image et un lien source d'artiste d'origine.

Tout semble assez simple - même un développeur PHP débutant devrait pouvoir suivre! Et si vous ne comprenez pas ce n'est pas important pour le code jQuery de toute façon, ne vous inquiétez pas. Nous devrions passer maintenant et jeter un coup d'œil au modèle que j'ai construit dans cette nouvelle page. Tout le code HTML est ajouté après tout le bloc PHP ci-dessus. J'ai utilisé l'identifiant de “images” pour le conteneur et même configurer l'en-tête pour changer avec chaque nouvelle photo.

 
 
 
 
 
 Afficher l'original
 
 
  
 

Vous pouvez probablement voir à quel point cette démo est simpliste. Mais l'objectif est de démontrer l'évolutivité de jQuery mobile. PHP peut facilement être ajouté au mélange et vous pouvez créer des applications vraiment superbes avec seulement quelques heures de développement..

Design de fantaisie avec vignettes de liste

Un dernier effet supplémentaire que nous pouvons appliquer est l’utilisation de vignettes pour animer la page de liste. Je vais également scinder le texte en un en-tête et une zone de description pour afficher à la fois le titre de l'œuvre et le nom de l'artiste..

Pour commencer, ouvrez Photoshop et créez un document 80 × 80 px. Je vais redimensionner rapidement chaque image et enregistrer les vignettes pour les faire correspondre. Puis, en mettant à jour les éléments de la liste, nous devrions inclure quelques éléments supplémentaires..

Découvrez le code ci-dessous et mon exemple de démonstration pour voir ce que je veux dire.

[Preview Live Demo]

 
 
  
Tâches Wunderkit
 
par Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
par Scott Hill
 
  
Application Forum pour Facebook
 
par Ionut Zamfir
 
  
Gazouillement
 
par Sam Jones
 
 
 

Les cours pour ui-li-cap et ui-li-desc sont ajoutés par défaut à la feuille de style jQuery Mobile. Ceci est similaire à la classe d'image ui-li-thumb qui redimensionne automatiquement chaque barre d’affichage de liste en fonction de la hauteur de l’image. Maintenant, à partir de là, vous pouvez en construire plus sur le frontend avec des animations, des effets de page, des feuilles de style, etc..

Ou bien, vous pouvez également commencer à construire un système backend pour télécharger de nouvelles images et rogner automatiquement les vignettes à inclure dans la liste. JQuery Mobile est tellement flexible que vous ne pouvez presque pas le qualifier uniquement de bibliothèque JavaScript. Il s’agit plutôt d’un framework HTML5 / CSS / jQuery complet pour la création d’applications mobiles rapides et évolutives..

Conclusion

Au moment de la rédaction de cet article, l’équipe de jQuery Mobile a officiellement publié la RC1.0 de la bibliothèque de codes. Cela signifie que la plupart, sinon toutes les corrections de bugs majeurs ont été supprimées et que les testeurs se préparent pour une version complète. Pour cette raison, vous ne trouverez pas beaucoup d’informations sur le Web..

Mais au fil des mois, les développeurs Web ne manqueront pas de suivre la tendance. Les applications mobiles et même les configurations Web mobiles gagnent en popularité avec l’énorme augmentation du nombre de smartphones. Les développeurs Web n'ont pas le temps d'apprendre un langage de programmation complet pour la création d'applications Android / iOS. Ainsi, jQuery Mobile est une alternative mince qui prend en charge la majorité des logiciels de l'industrie mobile et continue de croître chaque jour avec une communauté de développeurs active..