IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Onglet dans un form


Sujet :

HTML

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2004
    Messages : 104
    Par défaut Onglet dans un form
    Je cherche à réaliser des onglets à l'intérieur de balise <form>...est ce possible? Si oui comment?

  2. #2
    Membre Expert
    Avatar de pc75
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    3 662
    Détails du profil
    Informations personnelles :
    Âge : 69
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Septembre 2004
    Messages : 3 662
    Par défaut
    Bonjour,

    Peut-être ça ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 8
    Par défaut 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

  4. #4
    Membre Expert Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Par défaut
    euh t'es sûr ?

    j'ai utilisé exactement le même code sur un intranet et ca marche aussi bien sur FF que IE

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 8
    Par défaut
    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

  6. #6
    Membre Expert Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Par défaut
    ca serait pas le javascript qui serait bloqué tout simplement ?

  7. #7
    Membre émérite
    Avatar de Linaa
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    987
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 987
    Par défaut
    De mon côté, ça fonctionne sous IE, mais pas sous Firefox.

  8. #8
    Membre Expert Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Par défaut
    exact, je m'étais basée sur ce code mais je l'avais modifié pour le faire fonctionner sous FF

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  9. #9
    Membre averti
    Inscrit en
    Mai 2012
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : Mai 2012
    Messages : 32
    Par défaut
    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 !!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Onglet dans un form 2, le retour
    Par babas44 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 22/05/2012, 15h07
  2. [VB6] [Excel] Feuille dans une form, sans excel installé
    Par ro2v dans le forum Installation, Déploiement et Sécurité
    Réponses: 3
    Dernier message: 05/05/2010, 12h45
  3. Réponses: 2
    Dernier message: 10/09/2009, 20h54
  4. Introduction de données dans onglets avec ss Forms
    Par p'tite Sandrine dans le forum IHM
    Réponses: 4
    Dernier message: 23/04/2007, 14h43
  5. [BCB6] Probleme onglet dans IDE
    Par bgautier dans le forum C++Builder
    Réponses: 5
    Dernier message: 21/01/2004, 16h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo