Affichage par « onglets » très simple

Système d’affichage/masquage de plusieurs blocs en javascript.

Niveau : facile – Publique : webdesigner, intégrateur – Domaine : création de site Internet

0/ Description générale :

Cet article décrit d’une part le fonctionnement d’un script en Javascript, permettant l’affichage de plusieurs blocs de contenu (textes, images, tout contenu HTML) alternativement, par masquage/affichage. Un seul bloc est donc visible à la fois comme dans un affichage de type onglets, « tabs » en anglais. (Le design « onglet » n’est pas traité).
Il traite également de sa mise en oeuvre : structure HTML nécessaire, insertion classique, avec Dreamweaver, dans WordPress.

1/ Affichage par onglet

Plutôt que d’un script il faut parler d’une méthode car il est lui même extrêmement simple en réalité.
——————– Le script ——————–

Un classique mainte fois recréé ! C’était d’ailleurs pour moi un exercice de style.
Plus précisément je m’étais imposé quelques contraintes en plus du principe de masquage/affichage de blocs : robuste, très simple à insérer et à utiliser notamment pour un néophyte, utilisable avec Dreamweaver. Pouvoir commander l’affichage de manière très souple également.
Comme je n’utilise pas personnellement le logiciel Dreamweaver, ce n’était pas anodin.
Bon rien d’extraordinaire au final, DW possédant un éditeur texte à colorisation syntaxique de très bonne facture, les habitués du code y sont « en confort ».
Le fait de voir directement le résultat dans l’interface était un plus à priori (en fait pas si évident mais c’est le sujet en partie ;)).

Voici le script tout de suite :

descriptif : (par ligne)

  • – on pointe le bloc « lay ». « lay » doit être remplacé par l’Id exact du bloc concerné.
  • – on cherche son parent « div_parent ». le parent n’a pas besoin d’ID.
  • – pour chacun des enfants de « div_parent » (frère de « lay » donc) :
    • – on évite les « éléments » textes
      Il y a une autre solution mais qui curieusement marche moins bien : if(div_parent.childNodes[a].nodeType == ‘1’)
    • – on cache tout les nœuds enfants
  • – on ré affiche uniquement le bloc « lay »

Ce script peut être appelé via un lien par exemple :

retour en haut ——————– Activation ———————

Pour que l’ensemble des blocs soit caché une fois la page chargée (ce qui est le but n’est ce pas ?) et à l’exception de l’un d’entre eux (ex : un bloc vide ou comportant un texte d’accueil) il faut appeler le script une première fois. Là il y a deux techniques possibles :

  1. Utiliser la commande window.onload en fin du groupe de script dans l’entête de la page
  2. Ajouter un script en fin de page
retour en haut
——————– Insertion ———————

A l’attention des débutants, rapide description de l’insertion d’un script dans une page HTML.
Vu la simplicité de celui ci et pour limiter les manœuvres nous allons l’insérer dans la page elle même.
Une autre solution est d’appeler le script depuis un fichier externe.
L’endroit où il doit être est
– soit l’entête de la page (…), plus précisément comme ceci :

– soit le bas du contenu de la page comme cela (solution préconisée actuellement) :

retour en haut
———————- Structure HTML ———————-

Script super simple mais qui demande un minimum d’organisation pour fonctionner.
La structure des blocs qui DOIT être mise en place est la suivante : des blocs enfants inclus dans un bloc parent.
En gros ceci :

Le bloc parent n’a pas besoin d’ID sinon pour faciliter l’usage d’une feuille de style.
Suivant la mise en page voulue tout les blocs peuvent être l’une ou l’autre balise HTML. Ce peut être un DIV contenant des P ou même uniquement des DIV. Toutefois le respect de la sémantique XHTML est préférable donc pas de liste (UL + LI) ou de tableau même si ça devrait être opérationnel.

Attention ! Tout les blocs enfants seront cachés avec ce système. Réservez donc le contenu du parent a ce seul usage.

Le but étant de cacher ou afficher un seul bloc à la fois chaque enfant DOIT avoir un ID pour sa gestion.
Exemple :

retour en haut
———————- Commande/menu ———————-

La commande d’affichage peut être n’importe où ce qui est bien pratique et avoir différente forme tant techniquement (liens, liste déroulante, via un script, …) qu’esthétiquement (menu horizontale ou verticale, liens disséminés dans un texte). Seul l’appel de la fonction est nécessaire.
Un exemple sans attendre sous forme de menu horizontale :

Ce qui donne ceci : (liens désactivés)

onglet1onglet2onglet3

Le terme d’onglet nécessiterait une solide feuille de style mais c’est un autre problème.

Il y a, à priori, un lien par onglet, mais rien n’est imposé grâce à l’utilisation des ID. On peut par exemple commencer a rédiger un contenu sans pour autant donner le moyen de l’afficher immédiatement (donc pas de lien).
Ou commander l’affichage du même onglet par plusieurs liens (un en menu et d’autres dans le contenu par exemple).

retour en haut ——————— Design & CSS ———————-

En dehors de la pure décoration aucune feuille de style n’est nécessaire ! Pratique non ? C’est le script qui fait tout si tout est bien en place. Petit conseil toutefois : donnez un ID au bloc parent de manière a pouvoir appliquer un design à tout les blocs enfants en une fois. Un exemple minimum peut être : (tout prêt à être coller entre <head> et</head>)

« main » est l’ID du bloc parent, et ici les blocs enfants sont des div. A adapter à votre structure et envie.

retour en haut
——————— Exemple complet ———————-

Voici un exemple complet utilisant les éléments donnés sur la page :
activer le script (ceci n’est utile que pour cette page en particulier)

block1block2block3

contenu du block 0
… qui va disparaitre jusqu’au rafraichissement de la page.

contenu du block 1

 

 

bla bla bla
bla bla bla
contenu du block 2
Four_a_chaux

 

retour en haut

2/ Utilisation avec Dreamweaver

Précision : ce qui suit n’est plus vrais avec Dreamweaver CS5 (version 11) et peut être ses prédécesseurs. J’évoque un problème rencontré avec DW version 8 qui s’est avéré fort gênant.
Lors de la conception du script j’ai spontanément utilisé l’activation du script avec window.onload. Hors, surprise, le script s’activait dans le mode « création » (le fameux mode wysiwyg) ce qui est logique mais pas pratique ! Un seul bloc est visible : le premier.
Hors comment édité les blocs cachés ?! Pour moi ce n’est pas un problème mais pour le client, parfait néophyte, c’est une autre paire de manche. Le but étant un maximum de simplicité, dommage.

Après quelques réflexions et essais la solutions s’est avérée simple à mettre en place :
utiliser la deuxième possibilité d’activation à savoir l’appel de fliplayer() dans une balise <script>
située en bas de page.
Avec les navigateurs le fonctionnement est identique, avec DW les blocs restent visibles permettant ainsi leur édition sans se pauser de question.
J’en conclue que à l’époque le logiciel ne prenait pas en compte cet emplacement pour la balise </script>, alors que maintenant le résultat est le même.
Autre avantage de la dernière version elle, possède un bouton « Affichage en direct » qui active et désactive le Javascript (et partiellement seulement la feuille de style semble t-il …).

 

retour en haut

3/ Conclusion

Ce script et sa mise en place sont bien sûr destinés a des débutants par leur grande simplicité et cet article est surtout initiatique vu sous cet angle.
Par contre on peut imaginer qu’il s’agit également d’une méthode avantageuse pour un professionnel qui voudrait mettre en place se genre d’affichage tout en gardant un maximum de légèreté. En effet l’utilisation a tous crins de bibliothèque comme JQuery n’est pas toujours indispensable, la preuve 😉
Rien n’empêche non plus son implantation dans un CMS ou tout système dynamique complexe et son utilisation par les personnes qui édite seulement le contenu du site via une interface de type wysiwyg comme TyniMce (l’éditeur de WordPress).
Le pouvoir de la simplicité en somme.

Related posts

11 juin 2011 |

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

SEO Powered by Platinum SEO from Techblissonline