Ajax JavaScript CSS HTML 5 Gecko XUL Forum

Panel d'onglets en CSS le plus simple

Il est possible de réaliser simplement une barre d'onglets pour une page Web, en CSS, avec quelques lignes de JavaScript optionnels, sans utiliser de framework Ajax.

Comment cela fonctionne

A chaque onglet on associe l'URL d'une page à charger. Les onglets sont basés sur des balises de liens, cliquer sur un onglet revient à cliquer sur un lien.

On peut utiliser les onglets sans aucun code JavaScript si chaque page possède le même panel d'onglets et remplace la page courante.
Mais si l'on veut charger les pages dans une iframe, sans quitter la page courante, du code JavaScript servira à lire l'URL de la page associée à un onglet et l'assigner à la propriété src de l'iframe.

Les deux cas seront vus dans la démonstration.

Le code CSS

L'utilisation des balises <li> et <a> nous facilite la tâche et rend le code plus clair.

La structure de la définition des onglets du Tab Panel est la suivante:

<div id="tabs">
    <ul>
        <li><a href="#" rel="url1">Libellé 1</a></li> 
        <li><a href="#" rel="url2">Libellé 2</a></li> 
    </ul>
</div>

<iframe id="container"></iframe>

Ce sera le rôle exclusif des descripteurs CSS de transformer la liste ci-dessus en une barre d'onglets horizontale.
La liste est encapsulée dans un <div> de sorte que le style donné aux balise <ul> et <li> soit local au <div> et ne s'applique pas à toute la page.

Onglets sans JavaScript

Le code JavaScript est utile pour deux choses:

On peut se passer de JavaScript si la page chargée remplace la page courante. Se sera le cas si on utilise des onglets comme menu d'un site Web. Grâce à la construction de Tab Panel basée sur des balises <a>, le fait de cliquer sur un onglet revient à cliquer sur un lien.

Toutes les pages affichent le même menu d'onglets avec une différence: dans la présentation de chaque page, l'onglet qui lui correspond est mis en relief par l'assignation de la classe "selected" qui a un descripteur dans la feuille de style:

<li><a href="#" rel="url1" class="selected">Libellé 1</a></li>

Un exemple est donné dans la démo avec l'onglet No Script. La page correspondante à cet onglet fournit plus de détails.

Chargement des pages en iframe

Deux fonctions JavaScript suffisent.

A chaque onglet, on associe un événement onclick qui passe à la fonction loadit la source de l'appel.

<li><a href="#" rel="tab-dom.html" onClick="loadit(this)">DOM</a></li>

Fonction loadit: Charger une page correspondant à un onglet

    var container = document.getElementById('container');
    container.src=element.rel;

    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
           tabs[i].className="selected";
        else
           tabs[i].className="";
    }

Pour modifier l'apparence de l'onglet actif on charge l'URL de toutes les balises <a> encapsulées dans "tabs" dans un tableau et l'on compare les URLs avec l'attribut rel de l'onglet sélectionné.
Pour la page choisie on associe la classe "selected" et aucune pour les autres.

Fonction startit: Au démarrage charger la page par défaut

Cette fonction est exécutée au chargement du Tab Panel pour remplir l'onglet affiché par défaut. 

function startit()
{
    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    var container = document.getElementById('container');
    container.src = tabs[0].rel;
}

window.onload=startit;

L'utilisation de onload permet de différer le chargement après que le DOM soit construit.

Compatibilité

Sous Internet Explorer, l'affichage est incorrect avec le DocType transitionnel et est correct avec ce DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

ou:

<!DOCTYPE html>

Démonstration



© 2009-2012 Xul.fr