Création d'une page mobile jQuery de base pour la programmation HTML5 et CSS3 - mannequins

Il existe une approche très populaire parmi les programmeurs HTML5 et CSS3 pour créer des sites Web adaptés aux mobiles avec AJAX, et pour utiliser une bibliothèque complémentaire à jQuery appelé jQuery Mobile . Jquery Mobile est une puissante combinaison de code JavaScript et CSS intégrée au-dessus de la bibliothèque.

La bibliothèque jQuery fonctionne en prenant une page HTML5 normale et en la modifiant de façon à imiter un aspect natif. Le code ressemble beaucoup à du HTML ordinaire:

Démo Mobile

Démo JQuery Mobile
Site Web jQuery Mobile

Ceci est une liste ordinaire
Codée pour ressembler à
une liste mobile

de > HTML Tout en un pour les nuls Quelques détails font de cette page une merveille mobile:

Incluez le CSS jQuery mobile.

1. Ceci est un fichier CSS spécial conçu pour transformer les éléments HTML en leurs homologues mobiles. Bien que vous puissiez le télécharger vous-même, la plupart des développeurs accèdent directement au site jQuery.

   Incluez la bibliothèque jQuery standard.

2. Une grande partie du code est basée sur jQuery, alors intégrez la bibliothèque jQuery. Encore une fois, vous devez retirer jQuery du site Web principal de jQuery.

   Intégrez la bibliothèque mobile jQuery.

3. Il s'agit d'une bibliothèque JavaScript qui étend la bibliothèque pour ajouter un nouveau comportement spécifique au mobile.

   Ajouter un attribut data-role = "page" à la div principale.

4. Créez une div principale dans votre page et indiquez-lui l'attribut. Ceci est un attribut de rôle de données personnalisé ajouté par jQuery mobile. jQuery examine les rôles de données des différents éléments et applique automatiquement des changements de style et de comportement à ces éléments. Affectez votre div principal à la page de rôle de données. Cela indique au navigateur de traiter la div entière comme une page.

   Spécifiez un thème de données.

5. Vous pouvez appliquer un thème de données à n'importe quel élément, mais vous appliquez presque toujours un thème à la page. jquery mobile est livré avec un certain nombre de thèmes par défaut intégrés, appelés "a" à "e. "Expérimentez pour trouver celui que vous aimez, ou vous pouvez construire votre propre avec la version mobile spéciale du ThemeRoller.

   Ajoutez plus de divs dans votre page.

6. Ajoutez un peu plus de divs dans votre div page. Généralement, vous en aurez trois: en-tête, contenu et pied de page.

   Spécifiez le div de l'en-tête avec data-role = "header".

7. En plaçant l'une de vos informations d'en-tête dans un div avec un rôle de données "en-tête", vous dites à jQuery de traiter cet élément comme un en-tête mobile et d'appliquer les styles appropriés. L'en-tête inclut généralement une balise

   .

   Généralement, vous spécifiez l'en-tête à corriger avec l'attribut data-position = "fixed". Cela garantit que l'en-tête restera en place si le reste du contenu est défilé, ce qui est un comportement typique dans une application mobile.

   Configurer une div de contenu

8. Ajoutez une div avec data-role = "content" pour configurer la zone de contenu principale de votre page. N'importe lequel des éléments principaux de votre site devrait aller dans ce segment.

   Tout lien peut être converti en un bouton.

9. La convention standard dans les applications Web consiste à transformer les liens en boutons qui ont une cible plus grande que les entrées à base de souris. Il est facile de convertir n'importe quel lien en un bouton en ajoutant l'attribut data-role = "button" à la balise d'ancrage.

   Convertir des listes en vues de listes mobiles.

10. Les listes ont aussi des conventions spéciales dans le monde mobile. Vous pouvez utiliser l'attribut data-role pour transformer n'importe quelle liste en listView.

    Construire un pied de page.

11. Ajoutez un div supplémentaire avec le jeu de rôles de données sur "footer". Normalement, le pied de page (comme l'en-tête) est fixé avec l'attribut data-position.