Share
La version officielle de jQuery Mobile 1.0 a été récemment annoncée. Ce tutoriel vous donnera un aperçu de la manière dont ce framework populaire peut vous aider dans le développement d'applications multiplates-formes et basées sur le Web.!
jQuery Mobile est une extension du célèbre framework JavaScript jQuery. Comme son nom l’indique, il s’agit d’une implémentation spécialement conçue pour les appareils mobiles. Depuis un an, elle a parcouru un long chemin. C'est aujourd'hui l'un des frameworks les plus populaires pour le développement d'applications Web sur des appareils mobiles. En plus de fournir une solution idéale pour les applications Web autonomes, il est souvent encapsulé dans un SDK tel que PhoneGap pour servir de composant essentiel à de nombreuses applications natives..
L'équipe derrière jQuery Mobile a travaillé dur pour obtenir le cadre actuel, et les trois derniers mois l'ont spécifiquement passé d'une version bêta à une version officielle..
Jetons un coup d'œil à certaines des fonctionnalités offertes par jQuery Mobile afin de vous permettre de voir rapidement que vous pouvez configurer une application de base avec cette excellente solution.!
Avant de commencer, nous devons nous assurer que nous avons quelques choses au bon endroit. Tout d'abord, nous devons nous assurer que nous définissons la fenêtre d'affichage de notre appareil à l'aide du méta étiquette.
Ensuite, pour que nous puissions l’utiliser comme page d’accueil sur iOS, nous pouvons définir la balise méta pour ap-capable.
Les méta-tags ci-dessus ne sont pas absolument nécessaires, mais je pense qu'ils sont souvent une bonne idée.
Ensuite, nous devons inclure les CSS et Javascript pour jQuery Mobile. Pour le moment, nous utiliserons le CSS par défaut, bien que nous parlerons plus tard de séparer la structure du style. Pour le JavaScript, nous devons nous assurer d’inclure la version 1.6.4 de jQuery et jQuery mobile 1.0. jQuery est une dépendance de jQuery Mobile, vous devez donc d'abord inclure la bibliothèque principale. Au moment de la rédaction de ce document, la dernière version de jQuery Core est 1.7, mais jQuery Mobile n'offre actuellement qu'une prise en charge de 1.6.4. Cependant, selon l'équipe à l'origine du projet, le support pour 1.7 viendra bientôt!
Nous pouvons maintenant accéder au corps du document et créer la structure typique d'une page. jQuery Mobile utilise le HTML5 Les données- atrribuer d'attribuer des comportements spécifiques aux éléments, data-role étant le plus populaire car il définit le rôle des éléments dans l’application. Ajouter l'attribut data-role = "page" à votre premier élément sur la page.
Il n'est pas nécessaire que ce soit une div, cela peut être une section si vous le préférez, mais le résultat final est le même: vous aurez créé votre première page avec jQuery Mobile..
Pour le moment, vous pouvez construire votre page en utilisant seulement le data-role les attributs. Vous pouvez utiliser data-role = "header" et data-role = "footer" pour l'en-tête et le pied de page, et data-role = "content" pour le contenu du corps principal.
jQuery Mobile Page L'en-tête
Il s'agit d'un modèle standard unique que vous pouvez copier pour créer votre première page jQuery Mobile. Chaque lien ou formulaire à partir de là ouvrira une nouvelle page via Ajax pour prendre en charge les transitions de page animées..
Il suffit de visualiser la source et de copier le code pour commencer. Tous les fichiers CSS et JS sont liés aux versions CDN de jQuery, ce qui est extrêmement facile à configurer. N'oubliez pas d'inclure une balise Meta Viewport dans l'en-tête pour définir le niveau de zoom..
Ce modèle est un document HTML standard contenant un seul conteneur "page", contrairement à un modèle de plusieurs pages contenant plusieurs pages. Nous vous recommandons vivement de créer votre site ou votre application sous la forme d'une série de pages distinctes, car elle est plus propre, plus légère et fonctionne mieux sans JavaScript..
Votre application devrait maintenant ressembler à la suivante.
Et le code complet pour cela est ci-dessous:
Modèle de page unique L'en-tête
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Sed sit amet odio ipsum, non volutpat sapien. Résultat de la recherche sur la vie, vitae convallis du rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Connectez-vous avec Facebook. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Connectez-vous avec Facebook. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. À propos des livres de curut dans. Curabitur ipsum leo, pulvinar
Le pied de page
Maintenant, c'est assez simple en ce qui concerne les applications Web, mais c'est un début. Tout avec jQuery Mobile peut être fait assez rapidement, et c'est superbe pour le développement rapide d'un prototype et le développement d'applications complètes..
Bien sûr, utiliser une bibliothèque entière pour une application d'une seule page est un peu exagéré. Commençons donc par parler des choses intéressantes et ajoutons quelques pages à notre application..
Vous pouvez ajouter deux conteneurs div supplémentaires après la balise de fermeture du div avec data-role = "content" et data-role = "page", mais l'attribut id de la page data-role devrait avoir pour valeur "deux" et "trois" respectivement. Je suis sûr que vous voyez où nous allons avec cela, alors allez-y et ajoutez également un identifiant "un" à notre première page. Ajoutez des en-têtes, du contenu et des pieds de page aux pages supplémentaires à votre convenance.
Le code supplémentaire devrait ressembler à ceci:
L'en-tête
C'est la deuxième page
Le pied de page
L'en-tête
Ceci est le contenu de la troisième page
Le pied de page
Si vous vérifiez votre application maintenant, vous ne verrez aucune différence. C'est parce que nous devons aller de l'avant et créer un lien vers ces pages à partir de la première page avant qu'elles ne soient affichées. Ajoutez des liens arbitraires dans la première page, comme ceci:
Page deux page trois
Si vous ouvrez le premier lien vers la page deux, vous verrez votre première animation de pagination, mais pour le moment, il n’ya aucun moyen de revenir à la première page. Allez-y et ajoutez un lien vers les pages deux et trois pour revenir à la page un.
Tout devrait être paginé bien en arrière maintenant. Sucré!
Maintenant, pour le moment, nos liens sont un peu ennuyeux, mais sans trop d'effort, nous pouvons les changer et les changer en de jolis boutons..
Si vous ajoutez l'attribut data-role = "bouton" aux liens de chacune des pages et actualisez votre application, vous devriez maintenant avoir de jolis boutons.
Pour le moment, notre rendu de page est correct et nous sommes en mesure de naviguer à travers quelques pages, mais cela semble un peu terne. Heureusement, jQuery Mobile est livré avec des thèmes. Ces thèmes permettent au développeur de changer les couleurs et l'apparence générale de l'application très rapidement. Ceci est fait par le thème de données attribut. Allez-y et ajoutez data-theme = "a", data-theme = "b" et data-theme = "a" à chacune des pages divs nous avons créé ci-dessus. Actualisez votre application et vous verrez ce qui s'est passé. Chacune de vos pages doit être légèrement différente!
Jusqu'à récemment, le seul moyen de créer votre propre thème personnalisé consistait à inclure une feuille de style supplémentaire et à remplacer le CSS importé avec le CSS jQuery. Heureusement, lorsque la deuxième version finale de jQuery Mobile est sortie en octobre, la feuille de style a été séparée en deux entités distinctes, laissant ainsi la place à la nouvelle version de ThemeRoller. La première feuille de style traite de la structure de l'application et la seconde gèrera toutes les thématiques de l'application..
Rendez-vous sur la page Theme Roller et l'écran d'accueil ci-dessous vous accueillera:
Sur le côté gauche, vous avez vos paramètres de thème. Vous pouvez choisir de filtrer chacune des sections une par une et d’ajuster ce que vous voulez, ou, comme je le souhaite, d’avancer et de faire glisser les couleurs du haut pour styler ce que vous voulez, puis d’affiner votre sélection à l’aide de le menu latéral. Vous pouvez créer vos thèmes, avec un maximum de 26, puis télécharger votre fichier de thème à utiliser dans votre application..
Lorsque vous téléchargez le fichier ZIP et extrayez son contenu, vous obtenez un index.html fichier qui contient des styles de base et une confirmation que votre feuille de style a été téléchargée correctement. Vous aurez alors un dossier de thèmes et à l'intérieur, vous trouverez un dossier d'images et deux feuilles de style nommées avec le nom que vous avez donné au thème lors de l'exportation. Il existe une version simplifiée pour la production ou une version complète pour les modifications que vous souhaitez effectuer..
Maintenant, lorsque vous commencez votre projet mobile, incluez simplement cette feuille de style Thème Rouleau plutôt que le thème CSS par défaut.
jQuery Mobile
Maintenant, lorsque vous accédez aux nuanciers que vous avez créés de la manière habituelle avec jQuery Mobile ci-dessus en définissant la thème de données attribut, vous ferez référence au thème CSS du rouleau de thèmes que vous avez créé à la place des valeurs par défaut.
jQuery Mobile L'en-tête
Le contenu de la page va ici.
Le pied de page
Vous pouvez ajouter le thème de données attribut à n'importe quel élément de la page. Si vous l'ajoutez à la div avec le data-role = "page" élément, alors cet échantillon de thème est appliqué à tous les éléments de cette page. Vous n'irez probablement pas jusqu'à 26 échantillons différents, mais vous utiliserez probablement 3 ou 4 échantillons différents pour obtenir un bon mélange de couleurs différentes dans votre application. Jouez avec le ThemeRoller, il y a beaucoup plus d'options que de simplement glisser-déposer les couleurs par défaut! Vous pouvez ajuster les dégradés, les ombres portées et même changer la luminosité et la saturation des couleurs.
Au cours des trois dernières versions de RC, des ajouts importants ont été apportés au cadre. Par conséquent, si vous utilisez toujours l’une des versions bêta ou si vous ne saviez tout simplement pas que les versions RC1, RC2 ou RC3 ont été publiées, voici un petit aperçu de ce qui suit: rattraper les changements.
RC1 a ajouté quelques modifications de conception aux éléments réductibles, en supprimant le style de bouton supplémentaire autour de l'icône +/- et en ajoutant la possibilité au conteneur de contenu réductible. Ajout de l'attribut thème de contenu de données Le conteneur pliable est également quadrillé aux coins de la tête, ce qui confère à l’aspect du conteneur une esthétique plus fluide..
Si vous voulez vous familiariser avec les commandes réductibles, voici le code de base. Ce qui suit vous donnera un seul conteneur pliable:
En-tête dans la barre de titre
Contenu dans le conteneur compressible.
Si vous souhaitez regrouper un ensemble de conteneurs réductibles et obtenir l'effet d'accompagnement populaire, il vous suffit d'envelopper un groupe de conteneurs réductibles dans un emballage. div avec le data-role de ensemble pliable.
Les options fixes de la position iOS 5 étaient améliorées par rapport à la version bêta avec cette télécommande, mais elles étaient toujours désactivées par défaut. Pour utiliser cette fonction, vous devrez appliquer le remplacement lorsque le mobileinit l'événement est déclenché. Par défaut, jQuery Mobile applique certaines améliorations du balisage lorsqu’il est chargé, et il est chargé avant. document.ready les feux. Heureusement, l’un des avantages de jQuery Mobile est que les paramètres sont facilement configurables à l’aide de jQuery. $ .extend méthode et liaison à la mobileinit un événement. Assurez-vous que le fichier de script contenant vos options est inclus. après jQuery, mais avant jQuery Mobile. Pour ce faire, votre code ressemblerait à quelque chose comme ci-dessous:
Accentsconagua
$ (document) .bind ("mobileinit", function () $ .extend ($. mobile, touchOverflowEnabled: true);); Il y a tout un tas d'options configurables que vous pouvez lire ici. Certains de ceux que j'ai utilisés régulièrement sont:
chargementMessage qui est une chaîne et par défaut, il est réglé sur "chargement". pageLoadErrorMessage again est une chaîne et est définie par défaut sur "Erreur lors du chargement de la page". defaultPageTransition est une chaîne et par défaut, elle est définie sur "slide". RC2 a été relâché à la mi-octobre et acheté en même temps que quelques changements importants. La prise en charge de HTML5 pour les types de saisie, notamment: temps, rendez-vous amoureux et Couleur. Il s’agissait simplement de s’assurer que ces éléments étaient stylés lorsqu’ils apparaissent sur la page. La possibilité d’avoir des sélections personnalisées dans le cadre d’un groupe - pour qu’elles paraissent plus intégrées - a été introduite. Si vous envelopper votre champs dans un div avec le data-role = "groupe de contrôle" attribut, vos champs apparaîtront regroupés dans un seul module. Ajouter type de données = "horizontal" les regroupera horizontalement.
L'un des changements les plus importants de la dernière version a été la séparation des feuilles de style pour le thème et la structure. Auparavant, vous incluiez une feuille de style de jQuery incluant tout le CSS structuré et les styles des différents thèmes. Si vous souhaitez ajouter une personnalisation au CSS, vous devez disposer de votre propre feuille de style qui remplacera tout ce qui a déjà été défini. Bien que nous développons pour le mobile et que la bande passante soit importante, les feuilles de style de structure et de thème sont maintenant séparées.
D'autres ajouts et corrections de bogues ont été apportés, dont la largeur par défaut des formulaires, les dialogues ayant une largeur maximale et une nouvelle classe d'assistance permettant de masquer les éléments de manière à ce qu'ils puissent toujours être consultés par des technologies d'assistance telles que les lecteurs d'écran. Consultez les notes de publication et le journal des modifications pour connaître tous les détails..
La libération de RC3 a été un choc pour certains le 13 novembre, alors que l’équipe avait déclaré que la version officielle 1.0 viendrait juste après RC2. RC3 en valait vraiment la peine, car de nombreuses améliorations de performances avaient été apportées. L’équipe souhaitait simplement s’assurer que le code fonctionnait bien avant de publier la version finale. Vous pouvez lire à propos de la version RC3 ici, et la première chose que vous remarquerez, ce sont les améliorations de performances. Il y avait aussi quelques nouveaux ajouts:
Vous pouvez maintenant définir linkBindingEnabled to false (true par défaut) si vous souhaitez gérer tous les événements de clic avec une autre bibliothèque ou en utilisant du code personnalisé. Vous pouvez également styler la superposition qui apparaît avec la boîte de dialogue en définissant thème de superposition de données soit sur le wrapper de page de superposition ou sur le module de sélection.
Enfin, la documentation a fait l’objet d’une refonte bien nécessaire et a été mise à jour avec des démonstrations de toutes les fonctionnalités, quelques conseils pour bien démarrer et quelques conseils pour la création d’applications jQuery avec Phonegap, disponibles ici..
jQuery Mobile a parcouru un long chemin au cours des derniers mois, sans parler de l’année écoulée. Si elle ressemble à une bibliothèque mère, elle deviendra le choix numéro un pour permettre à de nombreux développeurs de se lancer directement dans la création d’applications Web mobiles. La courbe d’apprentissage est bien inférieure à une solution comme SenchaTouch ou Titanium Mobile, et j’estime que ce fait entraînera une explosion de l’adoption. ThemeRoller et les options de configuration globales offrent également un niveau de personnalisation si facile à utiliser que même les développeurs les plus expérimentés devraient le trouver rapidement et facilement commencer à utiliser des thèmes personnalisés..
Il y a des choses que nous aimerions tous voir ajouter, et avec le temps - tout comme jQuery - je ne doute pas que des améliorations supplémentaires seront apportées. Je vous exhorte à consulter jQuery Mobile si vous ne l'avez pas encore fait et si vous utilisez une version plus ancienne, assurez-vous de consulter le journal des modifications pour les notes de publication de chaque version en retard avant la mise à niveau..
Nous vous tiendrons certainement au courant des progrès de Mobiletuts + à mesure que jQuery Mobile progressera, mais si vous souhaitez voir davantage de conseils et de tutoriels sur jQuery Mobile, faites-le nous savoir dans les commentaires.!
