Onglet dans un form

Version imprimable

22/03/2006, 11h51
lapartdombre

Onglet dans un form

Je cherche à réaliser des onglets à l'intérieur de balise <form>...est ce possible? Si oui comment?

Bonjour,

Peut-être ça ?

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
47
48
49
50
51
 
<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 ){
  for (i = 0; i < Content.length; i++)
    {tabs[i].className = "TabBorderBottom TabCommon TabOff";
    Content[i].style.display = "none";}
  Content[nTab].style.display = "block";
  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" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="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>contenu Onglet 1</DIV>
         <DIV id=Content>contenu Onglet 2</DIV>
         <DIV id=Content>contenu Onglet 3</DIV>
         <DIV id=Content>contenu Onglet 4</DIV>
      </TD>
      </TR>
  </TABLE>
 
</BODY>
</HTML>

22/03/2006, 14h31
rudwolf

pour info

salut,

le code ci-dessus ne passe pas firefox et d'éclenche une alerte de sécurité activeX sous IE :(

pour information

sinon effet sympa

@++

Rudwolf
22/03/2006, 16h14
Oluha

euh t'es sûr ? :roll:

j'ai utilisé exactement le même code sur un intranet et ca marche aussi bien sur FF que IE
22/03/2006, 16h32
rudwolf

perso g juste copier collé le code dans une new page et je l'ai affiché

et donc résultat comme indiqué ci-dessus :(

dernière version IE et FF
22/03/2006, 16h50
Oluha

ca serait pas le javascript qui serait bloqué tout simplement ?
22/03/2006, 18h21
Linaa

De mon côté, ça fonctionne sous IE, mais pas sous Firefox.

exact, je m'étais basée sur ce code mais je l'avais modifié pour le faire fonctionner sous FF

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
47
48
49
50
51
52
53
<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>

16/05/2012, 19h44
babas44

Bonjour tout le monde,
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, 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 !!