Panel d'onglets avec frames

Dans cette deuxième partie de notre tutoriel pour la création d'onglets en CSS, après l'utilisation de pages incorporant les onglets, l'utilisation d'iframes, voici la démonstration de l'utilisation de frames.
C'est en fait le cas le plus simple car dans ce cas les navigateurs gèrent le chargement des pages, il suffit d'associer le nom d'une frame en cible d'un, est les onglets contiennent des liens.

La différence pour les onglets avec les cas précédents est que nous n'utilisons plus d'attribut rel pour stocker l'URL de la page à charger, elle est stockée dans href.

Le code CSS est inchangé.

Structure des frames 

<frameset rows="248,*">
  <frame src="onglets-menu.html"   />
  <frame src="tab-frame-css.html" name="mainFrame" id="mainFrame"  />
</frameset>

La première frame contient les onglets définis dans la page onglets-menu.html.
La seconde frame est celle où l'on charge les pages correspondants aux onglets

La page tab-frame-css.html est la page de l'onglet par défaut.

Structure des onglets

La définition des onglets est modifiée:

<div id="tabs">
<ul>
     <li><a href="tab-frame-css.html" class="selected" target="mainFrame" 
             onclick="loadit(this)" >CSS</a></li>
     <li><a href="tab-frame-dom.html" target="mainFrame" 
             onclick="loadit(this)" >DOM</a></li>
     <li><a href="tab-frame-javascript.html" target="mainFrame"
            onclick="loadit(this)" >JavaScript</a></li>
</ul>
</div>

L'attribut rel disparait mais on ajoute l'attribut target qui indique le nom de la frame où se charge la page.

Chargement des pages

Fonction loadit simplifiée

On n'a plus besoin d'assigner l'URL de la page, le code sert uniquement à modifier l'apparence des onglets. 

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

Noter le remplacement de l'attribut rel par href.

La fonction d'initialisation pour charger la page par défaut est supprimée, la page par défaut est donnée dans le cadre de frames.

Ce code JavaScript simplifié est incorporé au source de la page onglets-menu.html.

Démonstration

Conclusion

Lequel des trois systèmes utiliser? Chacun a ses avantages:

  1. Pages intégrant chacune le Tab Panel.
    C'est idéal pour les moteurs de recherche, a utiliser pour un site Web.
  2. iFrame.
    Affiche harmonieusement dans la même page le contenu choisi par l'utilisateur. Convient pour intégrer des images ou même des formulaires, mais comporte des limitations pour les page utilisant le PHP. Ce n'est pas la meilleure solution pour une application Web.
  3. Frames.
    Les frames peuvent créer une barrière aux robots des moteurs de recherche, cela n'irait pas pour un site Web, mais c'est parfait pour une application Web.
© 2009-2012 Xul.fr