Share
Ajoutons encore à notre arsenal de bases en consultant le plug-in Joyride, qui permet de guider les utilisateurs à travers vos sites. Nous examinerons également les tables de tarification, les tables standard et les échanges; un nouvel outil d'image sensible. Nous allons couvrir la mise en œuvre de ces fonctionnalités avec un modèle simple que vous pouvez télécharger et utiliser..
Nous allons commencer par la plus simple des fonctionnalités que nous allons couvrir dans ce tutoriel..
L'ajout d'une classe de "panneau" à presque n'importe quel élément le transformera en un bloc légèrement coloré. Pas n'importe quel type de bloc, car ces panneaux utilisent des styles de bordure, de sorte que le remplissage est incorporé dans la largeur de l'objet. C'est une approche très pratique car elle vous donne un contrôle beaucoup plus intuitif sur les dimensions des éléments..
Nous avons un choix simple de forfaits d'hébergement parmi lesquels choisir, ceux-ci fonctionneront à merveille pour toute entreprise. Avec des connexions ultra rapides à la base de données MySQL, les systèmes de gestion de contenu volent vraiment. Ajoutez à cela un support client disponible 24 heures sur 24, 7 jours sur 7 et 99,9% de temps de disponibilité, et vous obtenez un pack d'hébergement.
Pour illustrer ce point, j’ai créé une mise en page à deux colonnes en utilisant une image et le panneau parfaitement alignés..
L'une des principales raisons de posséder / créer un site Web est de vendre quelque chose. Pour cette raison, les tableaux de prix sont monnaie courante sur les sites Web et ce depuis des années. Bien entendu, Foundation a bien entendu couvert ce domaine. Chaque table est en fait une liste non ordonnée, avec des éléments de liste et quelques classes bien placées.
La balise ul elle-même a une classe de "pricing-table", tandis que vous avez la possibilité d'utiliser "title", "price", "description", "bullet-item" et "cta-button". La seule personnalisation supplémentaire nécessaire est votre contenu. Vous voudrez peut-être en aligner plusieurs pour créer davantage un tableau de comparaison des prix..
Les tableaux de tarification sont excellents, mais vous aurez besoin de temps à autre d’un tableau HTML pour afficher les données. Il est très facile de les installer dans Foundation car il n’ya pas vraiment de configuration. Ajoutez simplement le balisage de votre table comme d'habitude et ses styles seront pris en charge. La seule chose à faire est d’ajouter des largeurs de colonne pour égaliser vos colonnes..
| Commencez | Entreprise | Global Corporation |
|---|---|---|
| 1 base de données | 5 base de données | 10 base de données |
| Pas de sauvegarde | Sauvegardes de 50 Go | Sauvegardes de 100 Go |
Bien que toutes les images dans Foundation soient fluides par défaut, vous rencontrerez parfois des problèmes - tout le sujet des images dans RWD est en cours..
Et laissez-moi ajouter, je pense que c’est un crayon de Crayon que tout le monde dans notre secteur peut parler de «seulement des images» pendant plus d’une heure. #RWD
- Dave Rupert (@ davatron5000) le 14 mai 2013
Un tel problème se pose lorsque vous avez du texte dans une image. Zurb a récemment ajouté un nouveau plugin appelé "Interchange"; son travail est simple: remplacez l'image de votre choix par une autre lorsque la taille de l'écran atteint un certain point. Cela fonctionne en ajoutant un attribut spécial, à savoir "échange de données". Ceci est utilisé pour héberger les options pour les changements de source d'image.
Ici, je me sers de nombreuses options disponibles dans l'attribut. Il existe de nombreux paramètres. Vous pouvez par exemple définir un point personnalisé pour changer l’image..
Ce n'est pas le plugin le plus performant car les changements peuvent prendre une ou deux secondes, espérons que Zurb y remédiera dans le futur. L'un des principaux avantages de ce plugin est le temps de chargement qu'il économise sur les appareils mobiles. Plutôt que de charger un fichier jpeg massif sur une connexion 3G, vous pouvez charger une version optimisée plus petite de la même image, libérant ainsi de la bande passante pour charger le reste de la page..
Jusqu'à présent, dans chaque partie de cette série, nous avons couvert un plugin JavaScript disponible dans Foundation, mais dans ce cas, nous couvrirons deux.
Dans certaines situations, il est utile d’emmener vos utilisateurs dans une visite mystère magique de votre interface utilisateur. Google, par exemple, fait cela lors du lancement de nouvelles fonctionnalités dans bon nombre de ses applications. En guidant vos utilisateurs étape par étape, vous pouvez expliquer ce que fait chaque partie et où elle mène. Joyride résout ce problème en utilisant une liste qui associe chaque élément de la liste, en tenant votre arrêt de visite, avec un élément sur la page. Cette liste peut être soit une liste ordonnée, soit une liste non ordonnée, mais elle doit avoir à la fois la classe "joyride-list" et l'attribut "data-joyride"..
Commençons, nous avons ici une introduction.
Premier arrêt
Ici, nous utilisons la nouvelle fonction d’échange pour modifier les images en fonction de la taille de l’écran..
Deuxième arrêt
Nous utilisons ici des tableaux de prix pour afficher une liste des services d'une société d'hébergement..
Troisième arrêt
Ceci est juste un lien mais il ouvre un modal avec une table standard à l'intérieur, excitant hein?
Fin de la ligne
Notre visite se termine ici, n'oubliez pas de prendre toutes vos affaires avec vous sur le chemin de la sortie..
Chaque élément de la liste a besoin de son propre "identifiant de données" qui doit correspondre à l'identifiant de l'élément auquel il est associé. Si le premier arrêt de votre visite est une balise h2, votre identifiant de données pourrait être "data-id =" title "". Votre h2 aurait besoin d'un identifiant de "titre". Facile.
Outre cette configuration de base, vous voudrez ajouter un bouton "Suivant" afin que les utilisateurs puissent naviguer facilement d'un arrêt à l'autre. Ceux-ci sont ajoutés en attachant un autre attribut à l'élément de liste; "data = text". Dans l'exemple ci-dessus, j'ai utilisé "Go" pour commencer et "next" pour continuer..
Il existe de nombreuses options de balade joyeuse et certaines peuvent être ajoutées directement à chaque élément de la liste. Ci-dessus j'ai utilisé data-options = "tipLocation: top; tipAnimation: fade" et comme vous l'avez peut-être deviné, cela assigne l'arrêt de la tournée au sommet de l'élément couplé, ce qui le fait s'estomper. Il existe de nombreux autres paramètres que vous pouvez transmettre lors de l'initialisation de JavaScript. Vous pouvez également utiliser le plug-in des cookies ou, si vos utilisateurs sont connectés, enregistrer une option permettant d'afficher la visite une seule fois..
Malheureusement, une chose que Foundation n’inclut pas (encore) est un plugin / une fonctionnalité permettant de témoigner. Ceux-ci peuvent vraiment être utiles. Quovolver peut remédier à cela avec une installation simple et un balisage flexible. Ajoutez le script dans votre pied de page, ajoutez du balisage et vous êtes absent.
Dans la prochaine partie de notre examen de la Fondation Zurb, nous parlerons de Magellan, qui crée une navigation difficile. Nous examinerons les classes de visibilité, la prise en charge de droite à gauche, les frappes au clavier, les vignettes, la vidéo flex et les tenants et les aboutissants de zepto. Je vais expliquer les cas d'utilisation de ces fonctionnalités et la meilleure façon de les implémenter dans vos projets..
Accentsconagua
