Boite-Onglet

[donato]

Bonjour, je remercie d'avance la personne qui saura répondre a ma demande.

Sachant qu'il a énormément de demande j'ai bien pris le temps de lire tous les sujets sur le Domaine des Onglets, j'ai pu trouver des Sujets intéressant tel que les onglets défilants horizontals ou bien meme verticals

mais je n'ai Elas pas trouvé se que je cherchais principalement. voici l'effet que je recherche :

Spoiler:

se sont de simples onglets qui en cliquant dessus change le text
j'espere avoir été assez clair. merci d'avoir pris le temps de lire ce message

[Melisa25]

Moi aussi c'est ce que je cherche mais moi c'est quand en passe sur l'onglet le texte apparait directement

[donato]

on peut espérer avoir nos deux réponses si la chance est avec nous ^^

mais je pense que toi melis tu peux trouver ta solution dans la rubrique info-bulle il me semble

[Pakodar]

Bonjour ^^
Moi aussi j'aimerais bien savoir comment on fait, ça pourrait m'ouvrir des opportunités pour ma futur page HTML

[Invité]

Bonsoir,

(il y a déjà pas mal de sujet parlant de cela, mais je redonne la solution...)
3 possibilités pour le script javascript:

• Enregistrer le script en .js et l'héberger permet de gagner un peu de place. La première ligne de la page d'accueil sera donc
  

  Code:

  <script src="http://le fichier hébérgé.js"></script>

• Enregistrer le script dans une page Html du forum permet aussi de gagner un peu de place. La première ligne de la page d'accueil sera donc
  

  Code:

  <script src="adresse de la page html"></script>

• Si vous ne manquez pas de place, mettre le script directement dans le message d'accueil avant le contenu, entre balise script:
  

  Code:

  <script>LE SCRIPT EN ENTIER</script>

Le script:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}

La feuille de style CSS, qui est à personnaliser selon vos goûts:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000; 
  border-bottom: 1px solid #ffffff; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Le message d'accueil (avec le script hébergé):

Code:

<script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>

On replace "onclick" par "onmouseover" pour que l'onglet change au survol.

Cordialement.

[Pakodar]

J'ai pas mal regardé les sujets sur les onglets mais il y un truc que je comprends toujours pas:
- à quoi sert ce script?
- Comment le crée-t-on?
- Si on le crée, qu'aura-t-il de différent par rapport aux autres?
- Peut-on l'utiliser plusieurs fois?
Merci d'avance.

[Invité]

Bonjour,

Le code du message d'accueil n'est que le contenu, si vous ne mettez rien autour, ça ressemble à rien. La feuille CSS permet de mettre tout le contenu en place et de donner un peu de personnalisation à la boite à onglets. Le script javascript est essentiel, puisque sans lui, on en peut pas changer d'onglet, c'est en quelque sorte "l'animation" du système.

Pour créer ce genre de script il faut être très calé, avoir beaucoup étudier les codes en tout genre. Je suis incapable de créer ce genre de script, heureusement que certaines personnes les partagent et les expliquent bien.

Qu'entendez- vous par l'utiliser plusieurs fois? Faire plusieurs boites à onglets sur une même page? A vrai dire je n'ai jamais testé, mais je pense que ça va occasionner des conflits. Il existe d'autres systèmes pour faire des tableaux actifs et des onglets, mais je ne suis capable d'expliquer que le système que je connais. (j'ai toujours espéré qu'on me dise : "ton truc c'est compliqué, y'a plus simple, regarde, je t'explique!").

Cordialement.

[Pakodar]

Ok,
Je pense que vous avez répondu à toutes questions.
Lorsque je vous demandais si on pouvait utiliser le script, vous m'avez répondu que d'autres personnes vous avez donné le leur, donc il peut être utilisé par tout le monde....
Merci beaucoup, je verrais la suite quand je pourrais.

[Melisa25]

Merciii !!
C'est pas vraiment ce que je cherchais mais je peux m'en contenter !!

[Linoa Heartilly]

J'ai pas trop compris ce que vous avez expliquer Oo (désolé suis une brêle en info.

Déjà le fichier héberger c'est quoi?

ensuite, les trois possibilité, si on choisit une d'elle faut la placer dans une page html dans le panneau? c'est ca? XD

et enfin, quand je test vos codes, je me retrovues avec 5 pauvres lignes avec simplement écris : onglet 1,2,3 etc...

alors éclairez moi sur ma misérable connaissance en Page d'acceuil mdr^^ parce que là : suis perdu total !!!

[Melisa25]

Le script tu le colle dans une nouvelle page HTML (Modules -> HTML -> Gestion des pages HTML) puis le code sous le script tu le colles dans la feuille de style CSS ( Affichage -> Images et couleurs -> COuleurs > Feuille de style CSS .

Ensuite pour finir le message d'accueil tu le colles dans (Affichage -> Généralités ) tu peux changer le nom des onglets et le contenu .

Sinon pour personnalisé il faut aller dans la feuille de style CSS et changer les couleurs etc ...

[Invité]

Bonjour,

je vous explique avec des couleurs:

<script src="https://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js"></script><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>

En bleu c'est l'adresse du script. J'ai mis l'adresse du script hébergé chez Archive-Host qui me sert sur mon forum. Pour tester, vous pouvez laisser le code tel quel. Comme je suis assez étourdie, il se peut que je le supprime un jour, c'est pour cela que je vous propose les 3 possibilités pour le script. La page Html est une bonne solution, vous créez la page Html dans votre panneau d'admin > modules , cochez non aux 2 questions, puis coller le code et enregistrez.

ce code-ci:

En orange ce sont les noms des onglets, modifiez par ce que vous voulez. Si votre onglet 1 est un message de bienvenue, mettez simplement "bienvenue" à la place de "Onglet 1".

En cyan, c'est la place du contenu des onglets. Pour reprendre l'exemple d'au-dessus, remplacez "mon contenu 1" par votre message de bienvenue.Vous pouvez y mettre une image, un texte, un tableau, une vidéo ...

Je vous donne la feuille CSS annotée, gardez là dans un document texte, vous saurez à quoi correspond chaque ligne, mais ne l'utilisez pas sur votre forum, les annotations créent des bugs.

Code:

/*boite à  onglets*/
ul, li{
  list-style: none;/*evite les puces de liste dans les onglets*/
}
.mon_onglet{
  float: left;/*aligne les onglets sur une ligne horizontale*/
  padding: 2px 10px;/*marge intérieure autour du texte des onglets*/
  margin-right: 5px;/*marge extérieure droite des onglets*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond des onglets*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contours des onglets*/
  cursor: pointer;/* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}
.mon_onglet:hover{
  background: #b8efa1;/*couleur de fond de l'onglet survolé*/
}         
.mon_onglet_selected{
  float: left;/*aligne l onglet sélectionné sur la meme  ligne que les autres*/
  padding: 2px 10px;/*marge intérieure autour du texte de l onglet selectionné*/
  margin-right: 5px;/*marge extérieure droite de l onglet selectionné*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond de l onglets sélectionné*/
  border-top: 1px solid #ff0000;/* epaisseur style et couleur du bord haut de l onglet selectionné*/
  border-right: 1px solid #ff0000;/* epaisseur style et couleur du bord droit de l onglet selectionné*/
  border-left: 1px solid #ff0000;/* epaisseur style et couleur du bord gauche de l onglet selectionné*/
  border-bottom: 1px solid #ffffff; /* epaisseur style et couleur du bord inférieur de l onglet selectionné*/
  cursor: pointer; /* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}           
.clear{
  clear: both;/* cache le contenu quand on change d'onglet*/
}
.mon_contenu{
  color: #000;/* couleur du texte du contenu*/
  background: #ffffff;/couleur de fond du contenu*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contuours du contenu*/
  padding: 10px;/* marge intérieure autour du texte du contenu*/
        margin: -1px; /* reduction de la marge pour rapprocher les onglets du contenu*/         
}
#mes_contenus, #mes_onglets{
  width: 400px;/*largeur totale de la boite à onglet*/
}

Essayez de réaliser votre boite à onglet, si ça ne fonctionne pas bien, ou si vous peinez à personnaliser, ouvrez un nouveau sujet avec votre code de message d'accueil et votre CSS, vous trouverez de l'aide pour arriver à ce que vous souhaitez.

Cordialement.

[donato]

Merci beaucoup pour la Vitesse, et la qualité de tes renseignements