Afficher plusieurs catégories sous un seul onglet — difficulté à utiliser les tutos disponibles

[Asura Hatake]

Rappel du premier message :

Bonjour, bonsoir !

Alors c'est simple et compliqué à la fois : j'ai appliqué un tutorial pour disposer mes catégories en onglet mais je me rends compte maintenant que je préfèrerai toutefois avoir plusieurs catégories sous un seul onglet et non un onglet par catégorie.

J'ai fait des recherches préalables sur le forum et si j'ai trouvé des sujets correspondants à mon problème, je n'ai réussi à appliquer aucune des solutions données.

Est-ce que quelqu'un aurait une idée ?

Par avance je vous remercie.

Voici mon forum test, mon template et mon javascript :

http://gorillesarctiques.forumactif.fr/

Code:

$('document').ready(function()
  {
  if($('.categorie').size() > 1)
    {
      $('#conteneur_onglets').css( 'display' , 'block' );
      $('#conteneur_onglets .onglet').click(function()
      {
        change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
      });
     
      $('.onglet:eq(0)').click();
}
  });

  function change_categorie( index )
  {
      if( $('.categorie:eq(' + index + ')').size() != 0 )
      {
        $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

       
        $('.categorie').css( 'display' , 'none' );
        $('.categorie:eq(' + index + ')').fadeIn( 500 );
       
        $('.onglet.actif').removeClass('actif');
        $('.onglet:eq('+ index +')').addClass('actif');
      }
      else alert('Vous ne pouvez pas accéder à cette catégorie');
  }

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<div id="conteneur_onglets">
<table><tr>
   <td class="onglet"><div>Prologue</div></td>
   <td class="onglet"><div>Wammy's House</div></td>
   <td class="onglet"><div>Wammy's Agency</div></td>
   <td class="onglet"><div>Compléments</div></td>
</tr></table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="categorie">

   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
 
  <div class="forum">
   
<table><tr>
  <td><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></center>
                  <div class="stats_last"><div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} message(s) ♔ {catrow.forumrow.TOPICS} sujet(s)</span></div>
                    <div class="last"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></div></td>
  <td style="vertical-align: top;"><span class="forumlink">
               <br />
            </span>
    <span class="description">{catrow.forumrow.FORUM_DESC}</span>
 </td>
 
</tr></table>
   
    <span class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
   
  </div>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
 
  </div>
 
<!-- END tablefoot --><!-- END catrow -->

[Asura Hatake]

Alors déjà merci de vous être penché sur mon problème.

J'ai suivi vos instructions et ça ne change rien. J'ai sûrement dû foirer dans le découpage des catégories (les add"XXX"). Voici mon javascript :

Code:

$(function(){

    $(function(){
   
        /* sauver l'état pour une prochaine ouverture ou non (false) */
        save= true; 

        /* html permis dans les titres d'onglet (false) ou non */
        safe= true;
       
        /* type ( slideDown, fadeIn, show ) et durée ( ms ) d'apparition */
        show= ["slideDown",500];
       
        /* idem ( types : slideUp, fadeOut, hide ) mais de disparition */
        hide= ["slideUp",500];
               
        /* événement sur les onglets ( mouseenter, click, ... ) */
        event= "click";
       
        /* ajout des tabs et choix de celui par défaut */
        defaut= add("Tout");
        add("prologue",[0,1,2]);
        add("wammy's house",[3,4,5,6,7,8]);
        add("wammy's agency")(9);
        add("complément",10);

        /* ajout de l'emplacement des tabs */
        conteneur_tabs("before",".cat-table:first");
       
    });
   
    $(function(){var a;if(save&&window.localStorage&&(a=localStorage.getItem("tabs"))&&(a=u(a)))defaut=a;$(".cat-table").filter(function(a){return!z(defaut,a)}).hide();for(a=0;a<v.length;a++)$(".cat-tabs").append('<div class="ct-item'+(v[a]==defaut?" ct-active":"")+'">'+(safe?v[a][0].replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):v[a][0])+"</div>");$(".cat-tabs").on(event,".ct-item",function(){$(".cat-tabs .ct-active").removeClass("ct-active");var a=$(this).parent().children().index(this);
$(".cat-tabs").each(function(){$(this).children().eq(a).addClass("ct-active")});var c=v[a];$(".cat-table").not($(".cat-table").filter(function(a){return z(c,a)})[show[0]](show[1]))[hide[0]](hide[1]);save&&window.localStorage&&localStorage.setItem("tabs",JSON.stringify(c))})});
var hide,show,save,safe,event,timeslide,defaut,v=[], w=["div.secondarytitle","div.table-title h2","div.page-title h2","div.maintitle h2"], x=["div","div.forabg","div.main-head","div.borderwrap"],    y=["div.categorie","nil","div.main-content","nil"],ver=function(){return $("#phpbb").length?1:$("#pun-intro").length?2:$("#ipbwrapper").length?3:0},add=function(a,b){if(1==arguments.length)if("number"==typeof a)if(0<=a&&$(w[ver()]).length>=a+1)a=$(w[ver()]).eq(b=a).text();else return;else if("string"==typeof a)for(var b=
[],c=0;c<$(w[ver()]).length;c++)b.push(c);v.push([a,"number"==typeof b?[b]:b]);return v[v.length-1]},u=function(a){for(var b=0;b<v.length;b++)if(JSON.stringify(v[b])==a)return v[b];return!1},conteneur_tabs=function(a,b){$(b)[a]('<div class="cat-tabs"></div>')},z=function(a,b){for(var c=0;c<a[1].length;c++)if(a[1][c]==b)return!0;return!1};$(w[ver()]).closest(x[ver()]).each(function(){$(this).add($(this).next(y[ver()])).wrapAll('<div class="cat-table" />')});
   
});

[Ea]

À part :

Code:

add("wammy's agency")(9);

qui devrait être :

Code:

add("wammy's agency", 9);

cela m'a l'air d'être bon.

Autrement, il n'y a besoin que de le mettre sur l'index.

Cordialement.

[Asura Hatake]

Oh mon Dieu merci ça marche. Toutefois qu'est-ce que je fois modifier dans le javascript pour que lorsqu'une catégorie est sélectionnée les autres soient invisibles ?

Par exemple je clique sur l'onglet "Wammy's House" et je veux que les catégories en dépendant soient les seules visibles.

Et si de base je ne veux pas de l'onglet "Tout" et que "Prologue" doit être visible de base ?

Edit : pardon je me suis sous estimée, j'y suis arrivée. Encore une fois merci, merci, merci de votre aide plus que précieuse. J'aurais juste une dernière question relative à l'animation :

Actuellement c'est sous forme de déroulement qu'apparaissent les catégories. Et si je veux que ce soit sous forme d'onglets onclick ? J'ai déjà le CSS quelque part pour les onglets.

[Ea]

Une forme d'onglet onclick ?

L'événement utilisé pour changer d'onglet est déjà le clic, c'est mis par :

Code:

event= "click";

On peut changer la méthode d'affichage/disparition ainsi que le temps que ça prend en modifiant :

Code:

/* type ( slideDown, fadeIn, show ) et durée ( ms ) d'apparition */
show= ["slideDown",500];
       
/* idem ( types : slideUp, fadeOut, hide ) mais de disparition */
hide= ["slideUp",500];

Cordialement.

[Asura Hatake]

Par exemple, quel type d'animation dois-je utiliser pour produire le même effet que sur ma PA actuelle ? (http://wammys-house.forums-actifs.net/) C'est-à-dire que j'ai des onglets et que le contenu se modifie en fonction de celui qui est sélectionné ?

[Ea]

Si vous parlez du système d'onglet situé à la position du message de bienvenue, comme différence je vois :

- ce n'est pas au clic mais au survol de l'onglet que le contenu change
- ça ne change pas avec une transition mais d'un coup

Pour faire cela avec les catégories en onglet, on pourrait remplacer :

Code:

event= "click";

par :

Code:

event= "mouseenter";

pour que le contenu change juste en survolant l'onglet, et pour ce qui est des transitions en un coup, ceci :

Code:

/* type ( slideDown, fadeIn, show ) et durée ( ms ) d'apparition */
show= ["slideDown",500];
     
/* idem ( types : slideUp, fadeOut, hide ) mais de disparition */
hide= ["slideUp",500];

pourrait être changé en ceci :

Code:

/* type ( slideDown, fadeIn, show ) et durée ( ms ) d'apparition */
show= ["show",0];
     
/* idem ( types : slideUp, fadeOut, hide ) mais de disparition */
hide= ["hide",0];

en mettant 0, ça devrait permettre de spécifier un changement immédiat.

Cordialement.

[Asura Hatake]

C'est. Juste. Parfait.

Merci.

Encore une dernière grosse de question et on pourra clore le sujet, promis. >_<

Pour personnaliser l'apparence des titres des onglets, donc y appliquer mon css mis de côté, que dois-je faire ?

j'ai conscience de poser des questions un peu crétines mais j'ai vraiment peur de tout faire péter si je m'y prends comme un manche.

[Ea]

dans http://www.maonyn.com/t282-categories-en-onglet-uforumactif-uscript#5996 il y a un exemple de code css, vous pouvez le modifier comme vous souhaitez

• le sélecteur .cat-tabs ça désigne le bloc dans lequel se trouve les onglets
  
  
• le sélecteur .ct-item ça désigne chacun des onglets
  
  
• le sélecteur .ct-active ça désigne l'onglet actuellement sélectionné

Cordialement.

[Asura Hatake]

Magnifique, merci.

Actuellement j'ai donc ceci : http://gorillesarctiques.forumactif.fr/

Serait-il possible d'afficher les onglets sur une seule ligne ? Après ça, promis je vous fous la paix.

[Ea]

Pour mettre des blocs sur la même ligne, je vois les possibilités soit :

• de mettre les onglets en inline-block" :
  
  

  Code:

  .ct-item { display:inline-block; }

  ça semble la plus belle solution ( ça permet si on veut de les centrer en utilisant sur l'élément qui les contient "text-align: center" ), mais si ce tableau est à jour, ça pourrait poser problème pour internet explorer.
  
  si je comprends bien leur commentaire, ça pourrait mieux fonctionner sur internet explorer en remplaçant dans le script :
  
  

  Code:

  '<div class="ct-item'+(v[a]==defaut?" ct-active":"")+'">'+(safe?v[a][0].replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):v[a][0])+"</div>"

  par :
  
  

  Code:

  '<span class="ct-item'+(v[a]==defaut?" ct-active":"")+'">'+(safe?v[a][0].replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):v[a][0])+"</span>"

• de les mettre en float, et puis utiliser un clear sur l'élément qui suit :
  
  

  Code:

  .ct-item { float: left; }
.cat-table { clear: left; }

  ( <div class="cat-table"> est ajouté par le script autour de chaque catégorie )
  
  mais là c'est moins simple de les centrer je crois ( il faudrait mettre une marge à gauche, mais suivant la résolution d'écran... =/ ).

[Asura Hatake]

La première solution a fonctionné !!! /o/

Je suis tellement contente, franchement merci beaucoup je vais tous vous créditer partout avec amour et passion.

MERCI.