1. IMPORTANT : Nouvelles mesures de sécurité - 2. Règles pour obtenir de l'aide dans les forums de support - 3. Restrictions des droits pour le groupe "Support suspendu"

Il est obligatoire de respecter les Règles de MyBB.fr : Version abrégée ou Version complète pour obtenir du support sur nos forums.

Les membres ayant un site/forum contrevenant aux règles de MyBB.support seront placés dans le groupe "Support suspendu" et ne bénéficieront plus du support du staff. Nous recommandons aux autres membres d'agir de même. Il ne s'agit pas d'un bannissement, le membre retrouvera son statut "normal" dès que sa situation sera conforme aux règles.

Nouveau : un Wiki en français : plus de détails.
Avant de soumettre votre problème, consultez-le, ainsi que la FAQ, sans oublier le moteur de recherche interne.


Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
[Réglé] [CSS3] Système de menus en onglets (in post)
Mots-clés » tabsongletsplugins, css3, système, menus, onglets, post
16-09-2014, 12:14, (Modification du message : 16-09-2014, 12:15 par verspax.)
#1
[CSS3] Système de menus en onglets (in post)

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 Sad
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. Tongue

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.
Répondre
16-09-2014, 20:14, (Modification du message : 16-09-2014, 20:26 par Jules.)
#2
RE: [CSS3] Système de menus en onglets (in post)
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 Smile



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 !

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre
16-09-2014, 20:42, (Modification du message : 16-09-2014, 20:43 par Saphir.)
#3
RE: [CSS3] Système de menus en onglets (in post)
(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.

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
17-09-2014, 0:29,
#4
RE: [CSS3] Système de menus en onglets (in post)
Merci pour ton aide Smile
Répondre
21-09-2014, 13:42,
#5
RE: [CSS3] Système de menus en onglets (in post)
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... Huh 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). Wink
Répondre
21-09-2014, 14:03,
#6
RE: [CSS3] Système de menus en onglets (in post)
@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.

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
21-09-2014, 14:34, (Modification du message : 21-09-2014, 14:36 par Jules.)
#7
RE: [CSS3] Système de menus en onglets (in post)
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 Wink !
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)

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre
21-09-2014, 16:27,
#8
RE: [CSS3] Système de menus en onglets (in post)
Ah, gros fail ! Blush Désolé, j'étais vraiment parti du principe que ça devait faire un tout, du coup j'ai tout collé dans un seul MyCode... Confused

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.
Répondre
21-09-2014, 16:35,
#9
RE: [CSS3] Système de menus en onglets (in post)
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)

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre
21-09-2014, 16:37,
#10
RE: [CSS3] Système de menus en onglets (in post)
Je l'aurais plutôt mis dans headerinclude (tout en bas de la liste)...

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
21-09-2014, 16:41,
#11
RE: [CSS3] Système de menus en onglets (in post)
C'est drôle, je viens de voir que si on positionne mon avatar au dessus du tien, ça donne ça :
[Image: avatar_6877.jpg?dateline=1369552151]
[Image: avatar_2895.jpg?dateline=1409068430]

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

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre
21-09-2014, 17:07,
#12
RE: [CSS3] Système de menus en onglets (in post)
headerinclude est inclut dans toutes les pages du forum. Ce n'est pas le cas de header...

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
21-09-2014, 18:14,
#13
RE: [CSS3] Système de menus en onglets (in post)
@ Saphir :

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

Huh

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
21-09-2014, 18:19, (Modification du message : 21-09-2014, 18:22 par Saphir.)
#14
RE: [CSS3] Système de menus en onglets (in post)
... 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


Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
22-09-2014, 16:53,
#15
RE: [CSS3] Système de menus en onglets (in post)
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à ! Smile
Répondre
22-09-2014, 17:47,
#16
RE: [CSS3] Système de menus en onglets (in post)
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 !

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre




Utilisateur(s) parcourant ce sujet : 1 visiteur(s)

Contact | MyBB.support | Retourner en haut | Retourner au contenu | Version bas-débit (Archivé) | Syndication RSS
 Utilitaire de traduction fourni par Regentronique