Il ya une approche très populaire parmi HTML5 et CSS3 programmeurs de construire des sites Web mobile-friendly avec AJAX, et ce est d'utiliser un add-on à la bibliothèque jQuery appelé jQuery Mobile

. JQuery Mobile est une puissante combinaison de javascript et CSS construit au-dessus de la bibliothèque.

La bibliothèque jQuery fonctionne en prenant une page HTML5 normale et de la modifier d'une manière qui émulent un look and feel natif. Le code ressemble beaucoup à HTML ordinaire:

JQuery Mobile Démo
site jQuery Mobile
Ceci est une liste ordinaire
Codé pour ressembler
une liste mobiles
de HTML tout en un pour les nuls

A quelques détails font de cette page dans un étonnant mobile:

1. Inclure le CSS mobiles jQuery.

   Ceci est un fichier CSS spécialement conçu pour transformer les éléments HTML dans leurs homologues mobiles. Bien que vous pouvez télécharger vous-même, la plupart des développeurs de lien directement à la jQuery site.

2. Inclure la bibliothèque jQuery standard.

   Une grande partie du code est basé sur jQuery, afin d'intégrer le jQuery bibliothèque ainsi. Une fois de plus, vous devez tirer jQuery à partir de la principale jQuery site Internet.

3. 
   
   
   
   

   Incorporer la bibliothèque mobile jQuery.

   Ceci est une bibliothèque javascript qui étend la bibliothèque pour ajouter un nouveau comportement spécifique mobile.

4. Ajouter un data-role = ” page ” attribuer à la div principale.

   Créer un div principale dans votre page et de fournir l'attribut à elle. Ceci est une coutume data-role Ajout de l'attribut par jQuery mobile. jQuery donne sur les rôles de données des différents éléments et applique le style et les changements de comportement à ces éléments automatiquement. Attribuez votre div principal le rôle des données page. Cela indique au navigateur de traiter l'ensemble div comme une page.

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

   Vous pouvez appliquer un thème de données à tout élément, mais vous appliquer presque toujours un thème à la page. jQuery Mobile est livré avec un certain nombre de thèmes par défaut intégré, appelé “ un ” par “. E ” Des essais pour trouver celui que vous aimez, ou vous pouvez construire votre propre avec la version spéciale mobile du ThemeRoller.

6. Ajouter plus divs intérieur de votre page.

   Ajouter un peu plus à l'intérieur de votre page divs div. En général, vous aurez trois: en-tête, le contenu et le pied de page.

7. Spécifiez l'en-tête div avec data-role = ” tête ”.

   En plaçant l'un de vos informations d'en-tête dans un div avec un “ tête ” rôle de données, vous dites jQuery pour traiter cet élément comme une tête mobile et appliquer les styles appropriés. L'en-tête comprend typiquement un

   tag.

   Typiquement, vous devez spécifier l'en-tête doit être fixé avec le données position = ” ” fixe; attribuer. Cela garantit que la tête va rester en place si le reste du contenu défile, ce qui est un comportement typique dans une application mobile.

8. Mettre en place un contenu div.

   Ajouter un div avec data-role = ” content ” de mettre en place la principale zone de contenu de votre page. Tous les principaux éléments de carrosserie de votre site devrait aller dans ce segment.

9. Tout lien peut être converti en un bouton.

   La convention standard dans les applications web est de faire des liens dans les boutons qui ont un objectif plus grand que entrée basé sur la souris. Il est facile de convertir tout lien à un bouton en ajoutant le data-role = ” le bouton ” attribuer à la balise d'ancrage.

10. Convertir les listes à listviews mobiles.

    Listes ont aussi des conventions spéciales dans le monde mobile. Vous pouvez utiliser le data-role attribuer à tourner toute la liste dans un listView.

11. Construire un pied de page.

    Ajouter un autre div avec data-role ajuster à “ footer ”. Normalement, le pied de page (comme l'en-tête) est fixé avec le données position attribuer.