[Réglé] [CSS3] Système de menus en onglets (in post)

[verspax]

Bonjour,

J'essaie de mettre en place un système de menus en d'onglets dans un post, basé sur ce modèle en CSS3 : http://red-team-design.com/css3-tabs-with-beveled-corners/

Malgré de multiples tentatives, je ne parviens pas à faire fonctionner tout ça : le contenu des onglets n’appairait pas
Non seulement j'ai été confronté à des conflits, et inutile de préciser que je suis une brelle en code... Je suis donc forcé de faire appel à votre expertise pour m'aider à corriger le tir.

Dernière version MyBB installée (sans MAJ).

1. J'ai activé l'HTML sur le forum et créé un post avec :

Code :

<ul id="uitabs">
   <li><a href="#" title="tab1">One</a></li>
   <li><a href="#" title="tab2">Two</a></li>
   <li><a href="#" title="tab3">Three</a></li>
   <li><a href="#" title="tab4">Four</a></li>    
</ul>

<div id="uicontent">
   <div id="uitab1">One - content</div>
   <div id="uitab2">Two - content</div>
   <div id="uitab3">Three - content</div>
   <div id="uitab4">Four - content</div>
</div>

2. J'ai ensuite ajouté ceci à global.css (theme2) :

Code :

#uitabs {
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#uitabs li {
    margin: 0;
    padding: 0;
    float: left;
}

#uitabs a {
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#uitabs a:hover {
    background: #c93434;
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);    
}

#uitabs a:focus {
    outline: 0;
}

#uitabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}

#uicontent {
    background-color: #fff;
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0 2px 2px 2px;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

/* Remove the rule below if you want the content to be "organic" */
#uicontent div {
    height: 220px;
}

3. Puis ça à showthread.php :

Code :

<script type="text/javascript">
                  $(document).ready(function() {
                $("#uicontent div").hide(); // Initially hide all content
                $("#uitabs li:first").attr("id","current"); // Activate first tab
                $("#uicontent div:first").fadeIn(); // Show first tab content
                $('#uitabs a').click(function(e) {
                        e.preventDefault();        
                        $("#uicontent div").hide(); //Hide all content
                        $("#uitabs li").attr("id",""); //Reset id's
                        $(this).parent().attr("id","current"); // Activate this
                        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
                   });
        })();
  </script>

---

Merci d'avance.

[Jules]

Je ne comprend pas trop pourquoi mettre un système d'onglet dans les sujets ? En tout cas, pour utiliser ton système, tu a deux solutions :

1. Autoriser le HTML dans les sujets (Largement déconseillé)
2. Créer un mycode qui le fait par remplacement

Code :

<ul id="uitabs">
   <li><a href="#" title="tab1">One</a></li>
   <li><a href="#" title="tab2">Two</a></li>
   <li><a href="#" title="tab3">Three</a></li>
   <li><a href="#" title="tab4">Four</a></li>    
</ul>

<div id="uicontent">
   <div id="uitab1">One - content</div>
   <div id="uitab2">Two - content</div>
   <div id="uitab3">Three - content</div>
   <div id="uitab4">Four - content</div>
</div>

Le système que tu propose serais simple, un exemple de système :
[uitabs][title=tab1]One[/title][/uitabs]
[uicontent][id=uitab1]One - content[/id][/uicontent]

Tu transformer donc ton html en MyCode qui recréer pareil, exemple avec des lettres :
[uitabs][title=A]B[/title][/uitabs]
[uicontent][id=C]D[/id][/uicontent]

---

[uitabs] = <ul id="...">$1</ul>
[title=A]B = <li><a href="#" title="A">B</a></li>
[uicontent] = <div id="uicontent">$1</div>
[id=C]D = <div id="C">D</div>

Avec un minimum de savoir, ça devrais passer tout seul : je te conseille ce sujet. Si tu a encore besoin d'aide ou que tu n'a pas compris, dis le ici j'essayerais de te répondre

---

Aussi, met le <javascript> dans le template "header" que tu trouve dans l'administration, templates et style, ton thème, templates, entête template et pas dans les fichiers PHP de ton forum !

[Saphir]

(16-09-2014, 12:14)verspax a écrit :  Puis ça à showthread.php :

Comme l'a indiqué Jules :

Rappel : Ne modifiez jamais les fichiers source de MyBB, sauf si vous y êtes invité par un membre de notre équipe : vous risqueriez d'endommager votre installation de MyBB et de créer une brèche de sécurité pouvant mettre en péril l'intégrité de votre hébergement. Modifier les templates ou le style de votre forum au travers de son interface d'administration suffit généralement à résoudre vos requêtes.

[verspax]

Merci pour ton aide

[verspax]

Bonjour,

Alors suite à tes indications, j'ai essayé plusieurs solutions et scripts, à savoir celui-ci, puis celui-là, et impossible d'arriver à un quelconque début de résultat en utilisant uniquement les MyCodes.

Pour l'exemple de départ, voici ce que j'ai essayé en dernier lieu :

Expression régulière :

Code :

\[tab\]\[id=(.*?)\](.*?)\[/id\]\[/tab\]
\[content\]\[id=(.*?)\](.*?)\[/id\]\[/content\]

Remplacement :

Code :

<ul id="uitabs">
   <li><a href="#" name="#$1">$2</a></li>  
</ul>

<div id="uicontent">
   <div id="$3">$4</div>
</div>

In post :

Code :

[tab][id=ID ONGLET]TITRE ONGLET[/id][/tab]
[content][id=ID ONGLET]CONTENU ONGLET[/id][/content]

Je pense que là où ça bloque surtout, c'est au niveau de l'appel de fonction : je ne sais pas où la mettre exactement et si la syntaxe d'intégration est bonne... Un avis sur tout ça ?

Merci.

PS : et pour répondre à ta question "pourquoi mettre un système d'onglets ?", c'est pour éditer quelques gros posts et avoir quelque chose de plus propre et présentable (les posts de 3kms de long, c'est pas pour moi) ; à vrai dire, si j'ai abandonné l'idée d'un CMS en parallèle, c'est parce que je misais sur cette solution (que je préfère même au spoiler).

[exdiogene]

@verspax :

Le PSEUDO et le MOT_DE_PASSE, fournis lors de votre demande de support, ne sont pas valides.

Vous ne recevrez aucun support de notre part sans que nous puissions nous connecter à votre forum.

Lire les règles ici :
http://www.mybb.fr/showthread.php?tid=3135

Vous pouvez nous envoyer ces informations confidentielles par Messagerie Privée. De plus un compte administrateur est préférable pour un problème comme le vôtre.

[Jules]

Citation :

Code :

\[tab\]\[id=(.*?)\](.*?)\[/id\]\[/tab\]
\[content\]\[id=(.*?)\](.*?)\[/id\]\[/content\]

Non, non, non, pas comme ça !
Ce système remet le code entier à chaque fois que tu fait un modal, exemple :

Code :

<ul id="uitabs">
   <li><a href="#" name="tab1">Lorem ipsum</a></li>  
</ul>

<div id="uicontent">
   <div id="tab1">Lorem ipsum</div>
</div>

<ul id="uitabs">
   <li><a href="#" name="tab2">Lorem ipsum</a></li>  
</ul>

<div id="uicontent">
   <div id="tab2">Lorem ipsum</div>
</div>

En gros, ça décale tout du moment que tu met plus d'un modal !
Regarde sur mon premier message, j'avais préciser :

Citation :[uitabs] = <ul id="...">$1</ul>
[title=A]B = <li><a href="#" title="A">B</a></li>
[uicontent] = <div id="uicontent">$1</div>
[id=C]D = <div id="C">D</div>

Chacune des lignes dois être un mycode ! Sinon, oui, ton mycode est correct (au niveau de la formation remplacement <=> expression)

[verspax]

Ah, gros fail ! Désolé, j'étais vraiment parti du principe que ça devait faire un tout, du coup j'ai tout collé dans un seul MyCode...

Ce qui donnerait donc :

Code :

\[tabs\](.*?)\[/tabs\]
<ul id="uitabs">$1</ul>

\[tab=(.*?)\](.*?)\[/tab\]
<li><a href="#" name="$1">$2</a></li>

\[content\](.*?)\[/content\]
<div id="uicontent">$1</div>

\[id=(.*?)\](.*?)\[/id\]
<div id="$1">$2</div>

Code :

[tabs]
[tab=tab1]Tab 1[/tab]
[tab=tab2]Tab 2[/tab]
[/tabs]
[content]
[id=tab1]Tab 1 Content[/id]
[id=tab2]Tab 2 Content[/id]
[/content]

Une chose de corrigé donc, mais je suis toujours bloqué par l'intégration de ce fameux code :

Code :

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();

Où et comment ? Dans l'entête de showthread ?

Merci.

[Jules]

Code :

<script type="text/javascript">
                  $(document).ready(function() {
                $("#uicontent div").hide(); // Initially hide all content
                $("#uitabs li:first").attr("id","current"); // Activate first tab
                $("#uicontent div:first").fadeIn(); // Show first tab content
                $('#uitabs a').click(function(e) {
                        e.preventDefault();        
                        $("#uicontent div").hide(); //Hide all content
                        $("#uitabs li").attr("id",""); //Reset id's
                        $(this).parent().attr("id","current"); // Activate this
                        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
                   });
        })();
  </script>

Dans ton template "header", que tu trouve dans : Administration > Templates et style > (Ton thème) > Templates > Entête templates > Header (ici)

[Saphir]

Je l'aurais plutôt mis dans headerinclude (tout en bas de la liste)...

[Jules]

C'est drôle, je viens de voir que si on positionne mon avatar au dessus du tien, ça donne ça :



Le requin veut manger, mais le dophin est trop rapide.

Enfin, pour revenir à la discussion, c'est possible de le mettre dans les deux je ne pense pas que ça change grand chose mise à part que c'est plus "organisé" de le mettre dans headerinclude :p

[Saphir]

headerinclude est inclut dans toutes les pages du forum. Ce n'est pas le cas de header...

[exdiogene]

@ Saphir :

N'as-tu pas remarqué mon message ici :
http://mybb.fr/thread-7049-post-40750.html#pid40750

[Saphir]

... Si, mais vu que je n'ai pas relu la discussion en entier, j'avais oublié qu'il s'agissait de celle-ci, au temps pour moi. :s

[verspax]

Merci beaucoup pour votre aide (et votre réactivité) ! Ça fonctionne enfin, non sans peine ! :p

Je posterai un récap complet pour ceux que ça intéresse ; c'était déjà fait, proprement, et tout perdu à la seconde où j'allais appuyer sur "Poster", à cause d'une put*** du coupure EDF...

Voilà !

[Saphir]

Ceci est un message préformaté et peut ne correspondre qu'en partie à votre requête.

Bonjour verspax.

Votre requête semble résolue. La discussion a donc été marquée comme étant réglée.

S'il s'agit d'une erreur, répondez à ce message afin que nous annulions le marquage.
Si vous avez de nouveau besoin de nos services, n'hésitez pas à ouvrir une nouvelle discussion dans nos forums de support.

Merci de l'intérêt que vous portez à MyBB !