/************************************************************************************************************************
 *                                                                                                                      *
 *                                     ONGLETS                                                                          *  
 *                           Version 1.0 du 24/12/2004                                                                  *    
 *                           Julien PLATRET (c) 2004                                                                    *
 *                                                                                                                      * 
 ************************************************************************************************************************
 
 *************************************************************************************************************************
 *                                                                                                                       *
 *                              Utilisation du script                                                                    *
 *                                                                                                                       *
 *************************************************************************************************************************
 
  Le script Onglets est fait pour afficher des informations dans des onglets avec un minimum de programmation.
  Le fonctionnement est basé sur la création d'un Objet auquel on ajoute les Onglets avec leur libellé et leur contenu.
  L'exemple suivant montre comment afficher un classeur de 3 onglets
  
  
     MonOnglet=new Onglets();

     MonOnglet.width='100%';
     MonOnglet.AddOnglet("premier","<A HREF='javascript:alert(\"coucou\");'>coucou</A>");
     MonOnglet.AddOnglet("deuxième","texte du deuxième");
     MonOnglet.AddOnglet("troisième","texte du troisième");

     MonOnglet.Write();
     

Comme vous avez pu le voir, on peut découper l'appel en 3 temps:
 - Création de l'objet
 - Définition des Onglets et propriétés
 - Affichage de l'objet
   
*************************************************************************************************************************
*                                                                                                                       *
*                                           Appels de fonctions                                                         *
*                                                                                                                       *
*************************************************************************************************************************
function AddOnglet(Libelle,Contenu)
  Cette fonction permet de rajouter un onglet à l'Ecran
   Libelle: Titre de l'onglet (toujours visible)
   Contenu: Contenu de la fiche (visible en fonction de l'onglet selectionné)
   
   
function Write()
 Cette fonction permet l'affichage du classeur entier (Jeu d'onglets)
 L'affichage se fera à l'endroit de l'appel dans la page,
 ex: Si l'appel est effectué dans un DIV de taille fixe le classeur sera limité par l'espace attribué au DIV
 
************************************************************************************************************************* 
*
*                           Paramètres de fonctionnement
*  
*
**************************************************************************************************************************

TabOff 
        Style appliqué aux onglets non selectionnés

TabOn
        Style appliqué aux onglets selectionnés

width
        Largeur du classeur dans le conteneur.

seldef
        Numero de l'onglet selectionné par défaut ( le premier onglet à le numéro 0)

TabActiveBackground
        Style appliqué à la page active



(*******************************     FIN DE LA description DE LA CLASSE  *********************************)*/



















function TabClick(nTab){  Col = document.getElementsByName("Content");  for (i = 0; i < document.getElementsByName("Content").length; i++)  {    document.getElementsByName("tabs")[i].className = "TabBorderBottom TabCommon TabOff";    document.getElementsByName("Content")[i].style.display = "none";  } document.getElementsByName("Content")[nTab].style.display = "block"; document.getElementsByName("tabs")[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";}function unOnglet(Libelle,Contenu) { this.Libelle =Libelle; this.Contenu =Contenu; } function Onglets() { this.Onglets = new Array(); this.AddOnglet=AddOnglet; this.Write=Write; this.TabCommon = "FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;"; this.TabContent = "PADDING: 40px;";
this.TabContentBottom = "PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;"; this.TabOff = "CURSOR: hand; BACKGROUND-COLOR: #175523; BORDER-LEFT: 1px solid #BBBBBB;"; this.TabOn = "CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;BACKGROUND-COLOR: #17F773;"; this.TabBorderBottom = "BORDER-BOTTOM: 2px inset #D1D1D1;"; this.TabActiveBorderLeftRight = "BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;"; this.TabActiveBackground = "BACKGROUND-COLOR: #94DB8C;"; this.width="450px"; this.seldef=0; } function AddOnglet(Libelle,Contenu) { this.Onglets[this.Onglets.length]=new unOnglet(Libelle,Contenu); } function Write() { LesLibelles=''; LesContenus='</TR><TR style="BORDER-TOP: 1px #D1D1D1;"><TD COLSPAN='+ (this.Onglets.length+1) + ' CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">'; for (var i=0; i<this.Onglets.length; i++) {
LesLibelles+='<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(' + i + ');"><NOBR>' + this.Onglets[i].Libelle + '</NOBR></TD>'; LesContenus+='<DIV ID="Content" NAME="Content">' + this.Onglets[i].Contenu + '</DIV>'; } document.write("<style>\n"); document.write(".TabCommon {" + this.TabCommon +"}\n"); document.write(".TabContent {" + this.TabContent +"}\n"); document.write(".TabContentBottom {" + this.TabContentBottom  + "}\n"); document.write(".TabOff {" + this.TabOff + "}\n"); document.write(".TabOn {" + this.TabOn + "}\n"); document.write(".TabBorderBottom {"+ this.TabBorderBottom + "}\n"); document.write(".TabActiveBorderLeftRight {" + this.TabActiveBorderLeftRight + "}\n"); document.write(".TabActiveBackground {" + this.TabActiveBackground + "}\n"); document.write("</style>");  document.write('<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: ' + this.width + '"><TR>'); document.write(LesLibelles);
document.write(LesContenus); document.write('</TD></TR></TABLE>'); TabClick(this.seldef); };