Share
Dans ce tutoriel, je vais vous apprendre à utiliser iScroll 4 pour créer un site Web mobile simple. Le site que nous créons aura un en-tête et un pied de page fixes avec un contenu qui peut être facilement parcouru. Comme nous le verrons, obtenir cet effet à la fois sur Android et sur iOS n'est pas aussi facile qu'on pourrait le penser!
Les applications Web constituent un endroit idéal pour les développeurs front-end pour commencer leur voyage dans le monde de la création d'applications mobiles. En utilisant vos connaissances actuelles en HTML, CSS et Javascript, vous pouvez créer des applications qui ressemblent beaucoup à celles créées avec un SDK de plate-forme native. Mieux encore, vos applications seront compatibles entre plusieurs plates-formes et fonctionneront sur tout appareil mobile doté d'un navigateur moderne..
Bien sûr, il y a certaines mises en garde à développer pour les navigateurs mobiles. Certaines peuvent être évidentes, telles que l'impossibilité de puiser dans l'appareil photo de l'appareil (du moins pour le moment). D'autres pourraient ne pas être aussi évidents, comme le grand nombre de navigateurs mobiles déjà utilisés (la variété est ahurissante).
Bien qu'il existe de nombreux frameworks (par exemple, jQuery Mobile, SenchaTouch, etc.) qui peuvent vous aider à démarrer avec les applications Web mobiles, je ne vais en utiliser aucun pour l'instant. Au lieu de cela, je vais me concentrer sur du JavaScript pur avec une bibliothèque pratique: iScroll 4..
iScroll résout un problème dans les navigateurs WebKit pour mobiles disponibles sous Android et iOS. Ces deux navigateurs ne prennent pas en charge le contenu d'en-tête et de pied de page positionné de manière absolue, le contenu défilant étant placé par défaut entre les deux. Le document HTML entier défile quelle que soit la CSS que vous pourriez avoir en place pour atteindre le contraire. Étant donné que de nombreuses applications mobiles natives sont conçues avec une barre de navigation fixe en haut de l'écran et une barre d'outils ou une tabulation fixe en bas de l'écran, le manque de prise en charge du contenu fixe dans les navigateurs WebKit est vraiment un problème. Ne vous inquiétez pas: dans ce tutoriel, je vais vous montrer comment réaliser cette présentation avec iScroll..
Continuons et mettons en place une disposition d'application web de base. Ce sera une page assez basique et en aucun cas un balisage de qualité production, mais pour cette démo ça marchera bien.
En général, je lance la plupart des applications Web mobiles (que je qualifierai d'applications Webile), avec le même modèle de base (en supposant que je n'utilise pas HTML5 ou un autre framework). Les seules balises méta que j’utilise au départ sont les options d’échelle de la fenêtre. J'ajoute aussi un peu de "réinitialisation" aux éléments dont je sais qu'ils en ont besoin. J'utilise très rarement une réinitialisation CSS pour Webile Apps, car elle est généralement excessive pour un appareil mobile et une fois que vous avez commencé à optimiser, moins c'est généralement plus.
Modèle d'application Web Modèle d'application Web
Maintenant, nous pouvons ajouter des CSS de base pour obtenir une bonne mise en page pour l'en-tête et le pied de page..
corps font-family: helvetica; header position: absolute; z-index: 2; en haut: 0; gauche: 0; largeur: 100%; hauteur: 45px; couleur de fond: # deb500; rembourrage: 0; footer position: absolute; z-index: 2; en bas: 0; gauche: 0; largeur: 100%; hauteur: 48px; couleur de fond: # c27b00; rembourrage: 0; bord supérieur: 1px solide # 444; header, footer taille de la police: 20px; text-align: center; couleur: # f3f3f3; poids de police: gras; ombre du texte: 0 -1px 0 rgba (0,0,0,0,5); hauteur de ligne: 45px;
Vous devriez maintenant avoir quelque chose qui ressemble à ceci. Notez que nous avons donné à l’en-tête et au pied de page un z-index, cela entrera en jeu dans un peu.
Il est maintenant temps d'ajouter le contenu que nous aimerions pouvoir faire défiler. J'ai utilisé une liste simple, mais le contenu peut être tout ce que vous voulez. Nous devons nous assurer que tout ce que nous voulons faire défiler est placé dans un conteneur avec un ID, que nous utiliserons pour nous connecter à iScroll. Ce sera à l'intérieur de la DIV avec l'ID de wrapper que nous avons configuré à l'étape 1.
- Des trucs
- Plus de matériel
- Gros truc
- Petites choses
- Trucs de geek
- Nerd Stuff
- Truc rapide
- Slow Stuff
- Bon produit
- Mauvaises choses
- Vos trucs
- Mes affaires
- Leur substance
- Nos affaires
- Super Stuff
- Uber Stuff
- Stuff Stuff
- Trucs français
- Trucs allemands
- Anglais Stuff
- American Stuff
- Des trucs
Et puis, donnons à la liste de jolis CSS pour le rendre moins ennuyeux. De plus, nous allons positionner le wrapper avec un indice z inférieur à celui de l'en-tête et du pied de page..
#wrapper position: absolute; z-index: 1; en haut: 45px; en bas: 48px; gauche: 0; largeur: 100%; fond: #aaa; débordement: auto; # scroll-content position: absolute; z-index: 1; largeur: 100%; rembourrage: 0; ul list-style: none; rembourrage: 0; marge: 0; largeur: 100%; text-align: left; li padding: 0 10px; hauteur: 40px; hauteur de ligne: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; couleur de fond: #fafafa; taille de police: 14px;
Comme vous pouvez le constater, nous avons attribué au wrapper un débordement: auto qui, dans un navigateur, nous permettrait de faire défiler le wrapper - mais si vous enregistrez votre périphérique?
Nous n'avons pas la possibilité de faire défiler. C’est le problème même que iScroll a été créé pour résoudre le problème, essayons-le pour nous aider..
Remarque: Si vous souhaitez vous débarrasser de la barre d’URL en haut de votre application (iOS UNIQUEMENT), vous pouvez ajouter la balise META suivante..
Désormais, quand / si un utilisateur ajoute l’application à son écran d’accueil, il peut la lancer à partir du système d’exploitation, comme toute autre application, sans que la barre d’URL ne soit affichée..
Une méthode alternative pour supprimer la barre d’URL est la méthode décrite par Mark Hammonds dans le tutoriel Applications Web plein écran: c’est une bonne méthode qui utilise JavaScript pour masquer automatiquement la barre d’adresse. Pour le moment, je vais utiliser la méthode META TAG car elle est belle et propre et supprime la barre de boutons inférieure en plus de la barre d’adresses..
Rendez-vous sur la page d'accueil d'iScroll et téléchargez la source. iScroll 4 est la dernière version à ce jour et la version que nous allons utiliser. Assurez-vous donc de le télécharger. Décompressez le fichier téléchargé et récupérez le fichier iscroll-lite.js. Comme nous n’utilisons que la fonctionnalité de défilement de base, c’est tout ce dont nous aurons besoin. Déposez le fichier dans le répertoire de votre choix. Pour l'instant, je vais le déposer à la racine du projet.
Premièrement, nous importons le fichier iscroll-lite.js dans notre projet. Importez-le en haut (le
) ou le bas (juste avant le ) du code HTML. Ma préférence est de l'importer en basEnsuite, nous définissons une fonction qui intègre iScroll et s’accroche au wrapper. Enfin, nous ajoutons un écouteur d'événement au document pour attendre que le contenu soit chargé avant de quitter notre fonction pour extraire iScroll..
Si vous vérifiez votre appareil maintenant, vous devriez avoir une belle liste déroulante avec un en-tête et un pied de page fixes.
Voici le code écrit complet utilisé dans cette astuce.
Modèle d'application Web Modèle d'application Web
- Des trucs
- Plus de matériel
- Gros truc
- Petites choses
- Trucs de geek
- Nerd Stuff
- Truc rapide
- Slow Stuff
- Bon produit
- Mauvaises choses
- Vos trucs
- Mes affaires
- Leur substance
- Nos affaires
- Super Stuff
- Uber Stuff
- Stuff Stuff
- Trucs français
- Trucs allemands
- Anglais Stuff
- American Stuff
- Des trucs
Accentsconagua