CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 10 10 22:17:12

SHAREPOINT : NOUVEL ARTICLE SUR LA MISE EN PLACE DES SCOPE DANS MOSS SEARCH par ROMELARD Fabrice

HELLO CS par julz

MSDN/TECHNET/MICROSOFT DAYS TOUR 2008 à LILLE LES 13 ET 14 OCTOBRE ! par redo

MVC PRATIQUE #07 - UN PROJET CONCRET ET LE TRANSFERT DES OBJETS AVEC LES MODELBINDERS par Rui

SQL SERVER 2008 : CERTIFIé - TS ADMIN (70-432) par christian

RE : OUVERTURE D'UNE PAGE WEB EN 1024*768 par nimu

PROBLèME MENU DéROULANT AVEC FIREFOX par franckdu34

ICOMPATIBILITé ENTRE 2 SCRIPTS... par xeroxiss

RE : ELIMINER UN DIV ??? par kazma

RE : ELIMINER UN DIV ??? par bultez

+ de logiciels à télécharger

1 259 537 membres
429 nouveaux aujourd'hui
14 408 membres club

Trouver une ressource

Trouvez une ressource parmi 38 820 codes, 1 185 547 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

ONGLETS

Information sur la source

Catégorie :Menu & Co Niveau : Débutant Date de création : 10/07/2003 Date de mise à jour : 06/05/2004 12:43:27 Vu : 17 179

Auteur : francktfr

Site perso

Ecrire un message privé

Note :

9,20 / 10

Commentaire sur cette source (37)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Permet d'afficher des onglets sur une page.

Source

<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
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";
}
</script>
</HEAD>
<BODY onload="TabClick(0);">
<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
<TR>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(3);"><NOBR>Onglet 4 ...</NOBR></TD>
<TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
</TR>
<TR>
<TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun </TD>
</TR>
<TR>
<TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">
<DIV ID="Content" NAME="Content">contenu Onglet 1</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 2</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 3</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 4</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
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";
}
</script>
</HEAD>
<BODY onload="TabClick(0);">

           
  <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(3);"><NOBR>Onglet 4 ...</NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun   </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
         <DIV ID="Content" NAME="Content">contenu Onglet 1</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 2</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 3</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 4</DIV>
      </TD>
      </TR>
  </TABLE>

</BODY>
</HTML>

Conclusion

Fonctionne maintenant avec Mozilla FireFox 0.8 :-)

Sources du même auteur

CHOIX DE DATES ET DE PERIODE

HORLOGE DIGITALE , SI SI

TEXT COLORISÉ AVEC LE POURCENTAGE

MENU AVEC EFFET DE DÉGRADÉ

ANNONCE LETTRE PAR LETTRE

Toutes les sources de francktfr

Sources de la même categorie

MENU DEROULANT SPÉCIAL par neacko_80

MENU EN CASCADE par kazma

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE par mehdikobra

MENU GLISSANT par kazma

GENERATEUR D ARBRE par Kimjoa

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de mathieumg le 10/07/2003 15:25:28

Très bien comme code et de plus tu peux mettre n'importe quoi dans les DIV telle une page complète !

Commentaire de linkinpar236737 le 11/07/2003 15:48:07

C'est pas mal du tout ! En plus, très configurable, ca irait très bien pour un menu... pourquoi pas ?

Commentaire de francktfr le 11/07/2003 16:13:27

Mettez les DIV "Content" au dimensions de la page, les onglets en hauts et vous avez un joli menu de navigation ... ;)
Amusez vous bien :o)

Commentaire de mathieumg le 11/07/2003 16:15:06

Très vrai !

De plus en PHP un petit include et tu peux éditer la page sans avoir à toucher à celle avec les onglets !

Mathieu

Commentaire de ralecul le 19/07/2003 14:04:12

C'est vraiment très sympa comme code : c pas lourd à télécharger.
Mais je n'arrive pas à le faire marcher avec netscape et opera ...

Si quelqu'un à une solution à me proposer ?

Merci !

Commentaire de francktfr le 19/07/2003 15:03:41

Normal, je n'ai pas essayé.
Oubliez netscape, AOL en a stoppé le devellopement, ils ont
viré 50 ingenieurs de netscape ...
Je modifierais mes scripts pour que ca fonctionne aussi sur
Opéra et Mozilla .. ;)

Commentaire de ralecul le 19/07/2003 15:52:23

Merci pour l'info, je vais donc me contenter de la compatibilité avec IE
pour l'instant !

Commentaire de meh le 11/10/2003 05:25:07

une question: et si le même truc marchait en rollover? ça m'intéresserait vachement:))

Commentaire de francktfr le 11/10/2003 05:27:58

ben tu remplace le 'onclick' par 'onmouseover'.

Commentaire de meh le 11/10/2003 05:49:05

merci!! (et bonne nuit!)

Commentaire de masternico le 03/11/2003 23:41:38

tres bon example... je compte m'en reservir pour le carnet d'adresse de mon agence commerciale... cela me permet de pouvoir enregistrer de multiple champs sans avoir une page de 3km sous les yeux...

Commentaire de blodeuedd12 le 30/01/2004 11:15:27

je suis + ou - débutante, et j'ai un petit problème avec ce menu (j'espère que qqn passera par là, parce que je vois que les posts précédents datent de plusieurs mois), au moment de charger une nouvelle page sur IE avec ce menu, au lieu de tomber sur le 1er onglet, j'ai une page avec tous les onglets fermés (même le 1er) et le contenu de tous les div s'affiche à la suite. c'est normal O_o;;? est-ce que qqn aurait une solution pour moi svp?

Commentaire de davidex le 06/05/2004 11:48:02

Comment faire fonctionner ce code pour MOZILLA SVP ???!!!

Commentaire de chimelpremier le 21/05/2004 13:49:41

http://www.javascriptfr.com/code.aspx?ID=21568

Commentaire de flulu le 04/11/2004 15:04:13

j'ai une question concernant ce script, je suis debutant en java et n'arrive pas a ajouter un scrolling au niveau des tabs. je voudrai le rajouter dans la fonction ou variable (je ne connais pas le terme au juste) :
<DIV ID="Content" NAME="Content">contenu Onglet 1</DIV>
Je souhaiterai que le contenu de l'onglet 1, si il fait + que la taille de la page (verticalement) puisse etre "scrollé" de sorte que je puisse toujours voir le menu et scroller juste la partie contenu.
Ou peut etre est ce possible d'afficher directement une autre page dans le contenu de l'onglet ?
Merci par avance de vos reponse, si je ne suis pas assez clair je m'en excuse.

Commentaire de equino le 06/03/2005 01:25:44

Bravo ! tres bon script pour débuter (je suis un débutant)
Merci

Commentaire de fly06 le 13/08/2005 15:32:30

Super le script!
Un détail: Comment faire pour que la page ne s'affiche avant que l'évènement 'onload' ne soit activé (les browsers déclenchent le 'onload' quand le chargement de la page est terminé!).
Merci

Commentaire de coins le 02/12/2005 10:07:41

Bonjour, je suis un super débutant en javascript, j'aimerais bien savoir comment faire marcher ce code , car j'ai remplacer document.getElementsByName("Content")[nTab].style.display = "block";
par document.getElementsByName("Content")[nTab].style.display = ""; mais, ca marche toujours pas ,
svp!!!!!

Commentaire de kyrriel le 22/02/2006 12:32:53

j'ai voulu faire des onglets à plusieurs niveaux, selon le meme principe, donc j'ai un peu remanié le code, et aussi intégré le fait d'avoir une image derriere l'onglet si celui ci est selectionné ou que l'on passe la souris dessus.
les images derriere les onglets s'appellent
onglet.png
onglet_active.png(pour l'onglet selectionné)
onglet_hover.png(lorsque l'on passe la souris dessus)

<HTML>
<HEAD>
<style>
.TabCommon {FONT: 10px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 20px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3;background-image:url(images/onglet.png);BORDER-RIGHT: 1px outset #D1D1D1;}
.TabOffhover {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3;background-image:url(images/onglet_hover.png);BORDER-RIGHT: 1px outset #D1D1D1;}
.TabOn {CURSOR: default; COLOR: #000000;background-image:url(images/onglet_active.png);}
.TabBorderBottom{}
.TabActiveBorderLeftRight{BORDER-RIGHT: 1px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;BORDER-BOTTOM: 1px outset #D1D1D1;BORDER-TOP: 1px outset #D1D1D1;}
</style>
<script>
function TabClick( nTab,level ){

Col = document.getElementsByName("Content");

    temp=0;

    for(i = 0; i <=200 ; i++) {
        if(document.getElementById("tabs"+level+i))
         temp++;
    }

    for (i = 0; i <=(temp-1) ; i++)
        {
        document.getElementById("tabs"+level+i).className = "TabBorderBottom TabCommon TabOff";
        document.getElementById("Content"+level+i).style.display = "none";
        }
    document.getElementById("Content"+level+nTab).style.display = "block";
    document.getElementById("tabs"+level+nTab).className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
}

function get_hover(id){
     if(document.getElementById(id).className!="TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight")
     document.getElementById(id).className = "TabBorderBottom TabCommon TabOffhover";
}
function get_nohover(id){
     if(document.getElementById(id).className!="TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight")
     document.getElementById(id).className = "TabBorderBottom TabCommon TabOff";
}
</script>
</HEAD>
<BODY onload="TabClick(1,1);TabClick(0,2);">


  <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs10" NAME="tabs10" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id); ONCLICK="TabClick(0,1);"><NOBR>Onglet 1</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs11" NAME="tabs11" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id);   ONCLICK="TabClick(1,1);"><NOBR>Onglet 2</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs12" NAME="tabs12" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id);   ONCLICK="TabClick(2,1);"><NOBR>Onglet 3</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs13" NAME="tabs13" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id);   ONCLICK="TabClick(3,1);"><NOBR>Onglet 4 ...</NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">
         <DIV ID="Content10" >contenu Onglet 1</DIV>
         <DIV ID="Content11" >

          <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" >
              <TR>
                  <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs20" NAME="tabs20" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id);   ONCLICK="TabClick(0,2);"><NOBR>ssOnglet 1</NOBR></TD>
                  <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs21" NAME="tabs21" onmouseout=get_nohover(this.id);  onmouseover=get_hover(this.id);   ONCLICK="TabClick(1,2);"><NOBR>ssOnglet 2</NOBR></TD>

              </TR>
              <TR>
                <TR>
                   <TD COLSPAN=2 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">
                   <DIV ID="Content20" ><iframe src=""></iframe></DIV>
                   <DIV ID="Content21" >ftyiyitiudsfds</DIV>
                  </TD>
                </TR>
              </TABLE>

         </DIV>
         <DIV ID="Content12" >contenu Onglet 3</DIV>
         <DIV ID="Content13" >contenu Onglet 4</DIV>
      </TD>
      </TR>
  </TABLE>

</BODY>
</HTML>

Commentaire de ayeb_2 le 13/03/2006 10:56:01

très simple,

mais le seul problème quej'ai mnt,c qu'il n'est pas comptabile avec IE sous mac :( si quelqu'un peut m'aider :D

Commentaire de jobo13 le 19/03/2006 20:12:13

Merci beaucoup pour ce script, je le trouve génial.

J'aimerais inclure des pages dans les differents onglets avec des formulaires.
Comment faire pour garder la page courante lors du rechargement de la page par un submit?
Parceque onLoad="tabClick(0)" renvoies toujours sur le premier onglet.

Merci d'avance

Commentaire de kyrriel le 20/03/2006 13:09:06

pour qu'il garde ton onglet en memoire, il faudrait que tu declare un <input=hidden> dans ton formulaire qui aurait la valeur de ton onglet. Ensuite tu le recupere au debut du script avant de construire tes onglets, et au lieu de faire un tabclick(0) tu fait un tabclick(post_hidden)

Commentaire de jvergoby le 22/03/2006 00:25:23

Bonsoir,

je viens de récupérer ton script, et c'est exactement ce que je cherchais. Mais j'ai juste un soucis avec les formulaires. Je vais faire cinq onglets et chacun aura son formulaire. Lors du rechargement de la page, il faut que je retombe sur la page courante pour vérifier si le submit a fonctionné. Comme tu l'as expliqué dans le dernier post, il faut faire un input type=hidden et récupérer la valeur dans une variable. Mais je bloque, je séche. Pourrais-tu m'aider, STP.

Commentaire de kyrriel le 22/03/2006 10:34:58

Avec quoi traites tu les formulaires, quel language? sur quoi bloques tu exactement?
Je pense que le principe suivant doit marcher :
1ere solution:Tu creer des formulaires qui appellent, quand on les valide, la page qui crée les onglets, donc tu testes tes submit dans la page des onglets. Le fait d'avoir créé des variables cachées avec un identifiant te permet de savoir quel formulaire tu as validé. Mais il faut traiter le resultat de ton formulaire au niveau du script qui crée les onglets.
2eme solution: tu peux mettre tes formulaires dans des iframes, et lorsque tu feras un submit la page se rechargera dans l'onglet et ainsi plus de rafraichissement pour le script des onglets.

Commentaire de jvergoby le 22/03/2006 11:02:55

En fait, entre les balises DIV, j'ai mis du HTML, du PHP/MYSQL. Dans le formulaire, j'y ai placé un input type hidden avec un name quelconque. Lorsque je clique sur l'envoi du formulaire, je récupère le name envoyé par un isset et j'affiche de nouveau ma page avec le résultat de l'envoi du formulaire. Là où je bloque est l'endroit où je dois placé ce isset, et en fonction du name envoyé, remplacer le <BODY onload="TabClick(0);"> par quelque chose du genre <BODY onload="TabClick($var);"> où $var correspond à un numéro d'onglet.
Je ne sais pas trop si j'ai bien expliqué ce que je veux faire.

Commentaire de kyrriel le 22/03/2006 11:20:42

ton isset doit etre au debut du script quand tu testes s'il y a eu un submit
Dans chaque onglet tu dois bien mettre un <form type=post> et un </form>
et dans chacun des form tu mets par exemple: <input type=hidden name=onglet_1 value=1> et au debut de ton script tu fais
if(isset($_POST['onglet_1'])){$onglet_courrant=1;}
if(isset($_POST['onglet_2'])){$onglet_courrant=2;}}
etc... si c'est le cas cela veut dire qu'il a validé le formulaire de l'onglet 1 auquel cas soit tu écrit la balise body apres le traitement php, soit tu appelles du javascript à la volée: print "<script ...>tablick(".$onglet_courrant.")</script>". Suis je clair?

Commentaire de jvergoby le 22/03/2006 13:51:22

Trsè clair, j'ai fais ça aussi, mais ce qui me bloque, c'est quand je refresh ma page, alors le contenu de tous les onglets se mettent dans le premier et dès que je passe la souris sur un des onglets, alors là l'affichage est correct. J'ai modifié le ONCLICK par un onmouseover.
dans mon FOR, j'y ai mis un input type="hidden" name="onglet_0" value="0"
et avant le body, j'y ai placé le isset :
<? if(isset($_POST['onglet_0'])){$onglet_courant=0;}?>
<BODY onload="TabClick($onglet_courant);">
Merci pour ton aide.

Commentaire de younes371 le 18/09/2006 17:34:51

Bonjour,
Je travail sur un projet,oû je dois mettre des onglets automatique, => vous m avez pa compris!! ??.
Alors j explique :
L'utilisateur lui meme peut créer ces onglet personnel.
Pour bien me comprendre, je vous demande d aller voir ce site : www.netvibes.com.
Si vous pouvez m'aider a trouver le script ou on le developpe ensemble ça serait gentil de votre part . Merci

Commentaire de kyrriel le 18/09/2006 18:22:09

En fait c'est un script qui utilise Ajax donc ce n'est pas tres facile!
il faut deja avoir le script des widget qui se deplacent et apres il faut integrer du code derriere.

Commentaire de younes371 le 18/09/2006 18:24:45

Alors, pouvez-vous m'aider ? si possible ?

Commentaire de younes371 le 18/09/2006 18:33:01

j ai oublié,
Merci d'avance

Commentaire de gabs77 le 25/10/2006 10:01:37

bonjour, j'ai trouver le script super et je veux le modifier de tel sorte a ce que je puisse l'utiliser avec une base de donnée mais j'ai des problemes avec je'y parviens pas correctement
j'ai déposé un message sur le forum a la page suivante : http://www.phpcs.com/infomsg_PHP-BOUCLE-JAVASCRIPT-CSS-POUR-ONGLETS_832226.aspx#2
si quelqu'un pourait m'aider !!

Commentaire de calidigy le 29/01/2007 01:08:27

Pour ne pas voir tout les contenu des <div> lors du chargement de la page, il suffit de mettre
<DIV ID="Content10" style="display: none"> au lieu de <DIV ID="Content10" > :)

Commentaire de advisory le 21/09/2007 11:35:52

Bonjour, je constate que le sujet a plusieurs année mais je me lance quand même .
Voila je vous explose la situation les onglets fonctionnent tres bien aucun bug rien mais j'aimerais ajouter une amélioration et je ne sais pas comment m'y prendre je souhaiterais enfin si possible pouvoir afficher la tab que seulement si il y a un contenu dans celle ci et qu'elle soit masquer lorsqu'elle est vide
es-ce possible?

Commentaire de masternico le 21/09/2007 15:17:03

Salut,
je dirais qu'il faut faire ça avec l'aide de php.
En fait, il faut faire un script qui récupère le contenu des onglet depuis la base de données puis qui crée les onglet un par un avant d'envoyer le tout au navigateur.
Et si le contenu est vide, alors l'onglet n'est pas généré

Du style:

<?php
   $result = mysql_query("select * from `onglet` where visibility = '1';");
   if ($result) {
       $nb_row = @mysql_num_rows($result);
       while ( $row= @mysql_fetch_array($result,MYSQL_ASSOC)) {
            $onglet_table[] = row;
       }
   }
   $row_sup_html = ''
   $row_inf_html = '';
   foreach($onglet_table as $index=>$onglet){
      if($onglet['contenu'] == '') continue;  // on saute l'onglet qui ne sera donc pas affiché
      $row_sup_html .= '          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet ' . ($index+1) . '</NOBR></TD>';
      $row_inf_html .= '         <DIV ID="Content" NAME="Content">' . $onglet['contenu'] . '</DIV>';

   }
?>
<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
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";
}
</script>
</HEAD>
<BODY onload="TabClick(0);">


  <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
      <TR>
<?php
   echo $row_sup_html;
?>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun   </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">
<?php
   echo $row_inf_html;
?>
      </TD>
      </TR>
  </TABLE>

</BODY>
</HTML>

Je n'ai pas testé mais cela devrait fonctionner

Commentaire de advisory le 21/09/2007 16:22:43

je n'y connais absolument rien en php ,par contre nous avons Msql donc si tu pouvais me guider sur une approche de la chose ca serait sympa :)

Merci d'avance

Commentaire de masternico le 21/09/2007 21:55:51

salut, en relisant mon example, j'y ai trouvé une erreur:
il faut mettre:
      $row_sup_html .= '          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(' . $index . ');"><NOBR>Onglet ' . $onglet['titre'] . '</NOBR></TD>';

Et cela suppose d'avoir une table comme celle qui suit:
CREATE TABLE `onglet` (
  `id` int(11) NOT NULL auto_increment,
  `contenu`  text NOT NULL default '',
  `titre` varchar(255) NOT NULL default '',
  `visibility` varchar(1) NOT NULL default '1',
  KEY `id` (`id`)
) TYPE=MyISAM

après, ça doit rouler tout seul. Je verrais demain à publier un source avec cette modification.