Construire un site Web mobile avec jQuery Mobile

jQuery mobile est un système d'interface utilisateur basée sur HTML5 tactile optimisée.Il est construit sur la plate-forme jQuery et jQuery UI, et il est idéal pour le développement mobile rapide.Le cadre jQuery Mobile utilise des attributs spéciaux pour aider à définir et le style de vos éléments, sans avoir à écrire la classe des règles détaillées vous.

1. 1
   Accédez à la page d'accueil de jQuery mobile, puis cliquez sur l'onglet "Download" dans le menu principal de navigation.

   Publicité

   cette étape a été utile?Oui |Non |Je besoin d'aide
2. 2
   Scroll down sur la page de téléchargement jusqu'à ce que vous voyez un Copier-Coller Snippet pour les fichiers hébergés CDN- section .

   instagram viewer

   Copiez les lignes de code sur votre presse-papiers.Ces trois fichiers de référence sont tout ce dont vous avez besoin pour mettre en œuvre le cadre.

   Publicité

   cette étape a été utile?Oui |Non |Je besoin d'aide
3. 3
   Ouvrez votre logiciel de développement préféré et de créer un nouveau document HTML .

   Si vous ne disposez pas du logiciel de développement, ouvrez l'application Bloc-notes sur votre ordinateur.

   cette étape a été utile?Oui |Non |Je besoin d'aide
4. 4
   Ajouter les références à votre document HTML .

   intérieur de votre tête de balises , coller les liens de fichiers CDN-hébergés.

   cette étape a été utile?Oui |Non |Je besoin d'aide
5. 5
   Créer votre première "page" .

   Avec le framework jQuery Mobile, vous créez plusieurs pages dans le même document HTML.A l'intérieur des balises du corps, créer un conteneur div.Ajoutez l'attribut data-role, et lui attribuer une valeur de la page .Enfin, ajoutez l'attribut ID , et lui attribuer une valeur de maison .

   cette étape a été utile?Oui |Non |Je besoin d'aide
6. 6
   Ajouter l'en-tête , contenu et footer conteneurs div .

   intérieur de votre page conteneur div, créer trois autres balises div.Utilisation de la data-role attribut de , attribuer des valeurs d'en-tête de , contenu et footer respectivement.Ceci est la structure de base d'une page jQuery Mobile.

   cette étape a été utile?Oui |Non |Je besoin d'aide
7. 7
   Ajouter en-tête et les titres de bas de page .

   Utilisation du h1 rubrique tag, créez rubrique titres pour vos en-tête et pied de page tags.

   cette étape a été utile?Oui |Non |Je besoin d'aide
8. 8
   Créer une deuxième page .

   extérieur du conteneur div qui a son attribut data-role mettre à la page, créer un nouveau conteneur div.Ajoutez le data-role attribut de , puis le mettre à la page.Ajoutez l'attribut ID , puis réglez-le à la page 2. Enfin, ajouter des conteneurs div pour l'en-tête, le contenu et le pied de page, de sorte que la structure ressemble à la page d'accueil.

   cette étape a été utile?Oui |Non |Je besoin d'aide
9. 9
   Créer une page de menu .

   La page de menu va être créé de la même façon que les deux premières pages, mais sans un pied de page.Créer un conteneur div, et définissez son attribut data-role à la page.Ajoutez l'attribut ID , et lui donner une valeur de main_nav.

   cette étape a été utile?Oui |Non |Je besoin d'aide
10. 10
    Créer la structure du menu de navigation .

    intérieur du contenu conteneur div , créer une liste à puces.Ajoutez l'attribut data-role, et définir sa valeur à listview.Ajoutez l'attribut données encart, et définir sa valeur à true.A l'intérieur des balises ul pour la liste à puces, ajouter deux balises list-item( tags li).

    cette étape a été utile?Oui |Non |Je besoin d'aide
11. 11
    créer les liens de menu .

    A l'intérieur des premières balises list-item, créez une balise d'ancrage.Ajoutez l'attribut href à la balise d'ancrage.Utilisez le symbole hashtag pour cibler un attribut ID , puis tapez «maison».Cette cible le conteneur div "home".Suivez la même procédure pour le deuxième élément de liste, mais cette fois de type hashtag "page2" pour cibler la deuxième page.

    cette étape a été utile?Oui |Non |Je besoin d'aide
12. 12
    Ajouter des liens de menu pour d'autres pages .

    Maintenant que votre menu est créé, vous devez définir les balises d'ancrage sur votre "home" et "Page 2" pages pour y accéder.Faites défiler et trouver la section de d'en-tête de de votre page d'accueil.Ajouter une balise d'ancrage à l'intérieur du conteneur d'en-tête, juste avant la balise h1 .En utilisant le même processus de liaison que vous avez fait avec le menu, définissez l'attribut href de à hashtag "main_nav".Ajoutez le data-role attribut , et lui donner une valeur de bouton.Ajouter les données-icon attribut , et lui donner une valeur de bars.Enfin, ajoutez l'attribut données iconpos, et lui donner une valeur de notext.Cela crée un bouton à gauche de votre tête le titre.Répétez cette étape pour la page page2.

    cette étape a été utile?Oui |Non |Je besoin d'aide
    Publicité

• Créer autant de pages dans le même document HTML que vous le souhaitez.jQuery Mobile utilise un système de navigation AJAX qui démarre automatiquement lorsque vous créez plusieurs pages dans le même document.
• Ajouter les données de transition attribut aux ancres pour une transition apaiser visuellement entre les pages.Les transitions disponibles sont fondu, pop, flip, tour, flux, slidefade, toboggan, slideUp et slideDown.
• Utilisez le data-theme attribut de style de presque tous les éléments de votre projet.Par défaut, jQuery Mobile est livré avec cinq échantillons de couleur pour vous d'utiliser.Le système de thématisation utilise des lettres en tant que valeurs.Par conséquent, les données-thème attribut de accepte les valeurs de a, b, c, d et e lorsque vous téléchargez.Consultez la jQuery Mobile Themeroller pour créer un thème personnalisé, avec un maximum de 26 échantillons de couleurs différentes!
• Utilisez le données position attribut pour créer en-têtes et pieds de page "collantes" ou fixes pour votre site web.Ajouter cet attribut à un conteneur div qui a son data-role ensemble à en-tête ou de pied de page, et les données position valeur de à fixe.
• Consultez le Kit jQuery Mobile couleur pour commencer à développer avec 26 nuanciers thématiques différentes.

• Assurez-vous d'utiliser des commentaires HTML pour séparer vos pages jQuery Mobile.Cela vous permet d'économiser une tonne de temps sur la route, comme un seul document HTML avec plusieurs "pages" obtient gonflée assez rapidement.Kit Couleur

• jQuery Mobile
• jQuery Mobile
• jQuery Mobile Themeroller
• Si vous avez des problèmes avec l'une de ces étapes, demandez à unquestion pour plus d'aide, ou post dans la section des commentaires ci-dessous.