Share
L’un de mes nouveaux tags HTML5 préférés, qui n’a été intégré que récemment dans Chrome (à compter de la version 12), est le suivant: détails élément. Je vais vous montrer de l'utiliser dans le conseil rapide d'aujourd'hui.
Accentsconagua
détails Tag Do?Cela nous permet essentiellement d’afficher et de masquer du contenu en un clic de souris. Vous connaissez sûrement ce type d’effet, mais jusqu’à présent, c’était toujours réalisé avec JavaScript. Imaginez un titre avec une flèche à côté, et lorsque vous cliquez dessus, les informations supplémentaires ci-dessous deviennent visibles. En cliquant à nouveau sur la flèche, le contenu est masqué. Ce type de fonctionnalité est très courant dans les pages de FAQ.
Voici un exemple de deux minutes de ce type d'effet. (Type
Contrôle + Entréepour traiter le JavaScript.)
le détails L'élément nous permet d'omettre le JavaScript entièrement. Ou mieux, cela finira par le faire. Le support du navigateur est encore un peu clairsemé.
Alors plongons et apprenons à utiliser cette nouvelle balise. Nous commençons par créer un nouveau détails élément.
Ensuite, nous devons lui donner un titre, ou résumé du contenu dans.
Qui va au collège?
Par défaut, dans les navigateurs qui comprennent la détails élément, tout ce qu’il contient - autre que le résumé tag - sera caché. Ajoutons un paragraphe après le résumé.
Qui va au collège?
Votre mère.
Allez-y et essayez la démo dans Chrome 12 ou une version ultérieure (à compter du 17 novembre 2011)..
Bon, faisons quelque chose d'un peu plus pratique. Je souhaite afficher divers articles Nettuts + à l'aide de la détails élément. Nous créons d'abord le balisage pour un seul article.
Creuser dans le dojo
Creusez dans Dojo: bases du DOM
Peut-être avez-vous vu ce tweet: «jQuery est un médicament d'initiation. Cela mène à une utilisation complète de JavaScript. »Une partie de cette dépendance, affirme-t-il, consiste à apprendre d'autres frameworks JavaScript. Et voilà en quoi consiste cette série en quatre parties sur l'incroyable Dojo Toolkit: vous faire passer au niveau suivant de votre dépendance à JavaScript.
Ensuite, nous lui donnerons juste une touche de style.
body font-family: sans-serif; détails débordement: masqué; arrière-plan: # e3e3e3; marge inférieure: 10px; bloc de visualisation; details summary curseur: pointeur; rembourrage: 10px; details div float: left; largeur: 65%; détails div h3 margin-top: 0; détails img float: left; largeur: 200px; remplissage: 0 30px 10px 10px;
S'il vous plaît noter que je vous montre la ouvrir pour plus de commodité, mais lorsque la page se charge, vous ne verrez que le résumé texte.
Si vous préférez être dans cet état par défaut, ajoutez le
ouvrirattribuer à ladétailsélément:
Ce n'est pas aussi simple que nous pourrions l'espérer d'appeler la flèche elle-même. Néanmoins, c'est possible. la clé est d'utiliser le -webkit-details-marker pseudo classe.
résumé des détails :: - webkit-details-marker color: green; taille de police: 20px;
Si vous devez utiliser une icône personnalisée, la solution la plus simple consiste probablement à masquer la flèche (à l'aide de la pseudo-classe ci-dessus), puis à appliquer une image d'arrière-plan à la résumé élément, ou utilisez le :après ou :avant pseudo-éléments.
Voir le projet final.
C’est certes un effet simple, mais c’est bien d’avoir une telle fonctionnalité commune intégrée. Jusqu'à ce que nous puissions utiliser le détails élément de tous les navigateurs, vous pouvez utiliser ce polyfill pour fournir un support de secours. Une dernière remarque: au moment d'écrire ces lignes, il ne semblait pas y avoir de moyen de basculer le contenu avec un clavier. Cela pourrait potentiellement présenter certains problèmes d'accessibilité.
