Onglet dans un form 2, le retour

Version imprimable

22/05/2012, 10h09
babas44

Onglet dans un form 2, le retour

Bonjour tout le monde,

plutôt que de déterrer une vieux topic, je relance mon pb ici.

Je suis webmestre d'un site qui utilise une usine à gaz de gestion de contenus, et j'ai voulu un peu égayer tout ça !
J'ai donc essayé d'insérer un menu avec onglets (oui, je sais, tout le monde le fait en CSS, il y a des milliers de tutos sur le web, je suis une quiche, etc....) mais le système ne tolère que le HTML stricte (pas de CSS modifiable, pas de javascript, pas de php, etc.
J'ai utilisé le script trouvé dans ce post :
http://www.developpez.net/forums/d11...l/onglet-form/

, mais la fonction qui permet d'être sur le premier onglet au départ ne fonctionne pas :
http://www.pedagogie.ac-nantes.fr/22...=1160222729156

Quelqu'un aurait une idée ? Que dois je modifier ?

Merci d'avance !!
22/05/2012, 10h20
Melancoliah

Bonjour,

essayez en enlevant le ";" à la fin de votre onload

Code:

<BODY onload="TabClick(0)">

Sinon la page affiché au départ est bien TabClick(0). Vous voulez que l'onglet soit "coché", c'est bien ça?

Mel
22/05/2012, 11h03
babas44

Merci pour ta réponse rapide, mais ça ne change rien, sous IE ou Firefox...
La page qui s'affiche au démarrage regroupe les contenus de tous les onglets directement.
22/05/2012, 11h23
Melancoliah

Autant pour moi ^^ Il affiche effectivement tous les onglets.

Je fais quelques test.

...

En fait le code qui est donné sur l'autre post fonctionne très bien chez moi. Pourriez vous mettre celui de votre site?

Mel
22/05/2012, 12h21
babas44

Effectivement, le code fonctionne très bien, mais la moulinette qui est derrière le site remouline le code, fait parfois sauter des trucs et là semble faire sauter le onclick....
Je cherche donc une autre possibilité mais je ne m'y connais pas assez...désolé...
22/05/2012, 12h57
Melancoliah

Pourriez vous donner le code de votre site, la partie qui nous intéresse du moins?

Mel

Merci beaucoup d'y jeter un oeil !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 24%;}
.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>
<BODY onload="TabClick(0)">
  <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 100%">
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(0);"><NOBR>Edito</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(1);"><NOBR>A la une !</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(2);"><NOBR>Toutes les actus</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" id="tabs" name="tabs" ONCLICK="TabClick(3);"><NOBR>Dernières ressources</NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">
      Cette partie du site académique, en travaux, va recevoir la fusion des rubriques de Technologie Collège et de celles de STI.  
      </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
         <DIV id="Content" name="Content">Blabla edito</DIV>
         <DIV id="Content" name="Content">[traitement;requete;objet=actualite#CODE_RUBRIQUE=1333489784970#CODE_RATTACHEMENT=STI#NOMBRE=5#TRI_DATE_DESC=1#STYLE=0001]</DIV>
         <DIV id="Content" name="Content">[traitement;requete;objet=actualite#CODE_RUBRIQUE=1160222729156#CODE_RATTACHEMENT=STI#NOMBRE=20#TRI_DATE_DESC=1#STYLE=0001]</DIV>
         <DIV id="Content" name="Content">[traitement;requete;objet=ressourcepedagogique#CODE_RUBRIQUE=1160222729156#CODE_RATTACHEMENT=STI#STYLE=0007#NOMBRE=20]</DIV>
      </TD>
      </TR>
  </TABLE>
</BODY>

Les codes

Code:

[traitement;requete;objet=actualite#CODE_RUBRIQUE=1333489784970#CODE_RATTACHEMENT=STI#NOMBRE=5#TRI_DATE_DESC=1#STYLE=0001]

sont des remontées automatiques internes de notre cms.

22/05/2012, 14h32
Melancoliah

Une petite trouvaille ici

Plusieurs exemple comme le vôtre. Après quelques recherches vous devriez trouver votre bonheur ;)

Si vous n'y arrivez pas revenez ici.

Mel
22/05/2012, 15h02
babas44

Merci beaucoup de l'information !! Super intéressant !
Le pb sera d'en trouver un sans utilisation de css (banni de mon cms !!!)....
22/05/2012, 15h07
Melancoliah

J'ai un peu lu en diagonal mais le css est juste là pour faire "jolie" (Principe du CSS en même temps :aie: ) . Il n'intervient pas dans l'HTML. Donc tu peux ne pas en tenir compte.

Mel