Choisir ses catégories dans les onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Choisir ses catégories dans les onglets

Message par MiruParanoia le Sam 24 Mar 2012 - 12:14

Bonjour alors voilà mon soucis
J'avoue avoir essayé de chercher sur le FDF mais je n'ai peut-être pas les bons mots clés, désolée pour le doublon si cela en est un.

Je vous expose mon problème, j'ai décidé de faire mes catégories en onglet, le problème est qu'il me faut un onglet par catégorie, hors mon forum ayant 12 catégorie, je ne me vois pas faire 12 onglets xD

Ainsi je voulais savoir quel était le moyen de décider de quelle catégorie apparaitrait dans quel onglet et comment en mettre plusieurs (catégories) dans un onglets.

Voici mon template

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>Hors-Jeu</div></td>
   <td class="onglet"><div>Ancien Bâtiment</div></td>
   <td class="onglet"><div>Bâtiment Adjacent</div></td>
   <td class="onglet"><div></div></td>
   <td class="onglet"><div></div></td>
</tr></table>
</div>
<div id="conteneur_categories"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            <span class="linkbasic">{catrow.forumrow.L_LINKS}</span><span class="linkbasic">{catrow.forumrow.LINKS}</span>
         </span>
      </td>
<td class="row3 over" align="center" valign="middle" height="50">
         <div class="mess"><span class="gensmall">{catrow.forumrow.TOPICS} sujet & {catrow.forumrow.POSTS} messages </span></div><div class="dernier"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /></div>
<!-- END tablefoot --><!-- END catrow -->
</div>

et mon javascript

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');
  }


Dernière édition par MiruParanoia le Dim 25 Mar 2012 - 15:41, édité 1 fois

MiruParanoia
*

Féminin
Messages : 47
Inscrit(e) le : 01/04/2008

http://wammys-house.forums-actifs.net/
MiruParanoia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Choisir ses catégories dans les onglets

Message par Ea le Sam 24 Mar 2012 - 12:55

Bonjour,


J'avais fait un script sans modification de template à mettre sur l'index qui permet de faire quelque chose comme cela.

Avec ce code javascript : http://s301826463.onlinehome.fr/fdf/viewtopic.php?pid=73#p73 et ce code css :

Code:
.cat-tabs {
  text-align: center;
  margin: 10px auto;
}
.ct-item {
  display: inline;
  padding: 5px;
  margin: 5px;
  background: red;
  color: blue;
  font-weight: bold;
}
.ct-active {
  color: red;
  background: blue;
}
Sinon pour votre script, il faudrait probablement revoir :

Code:
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');
  }
Et faire quelque chose du style :

Code:
function change_categorie( index )
  {
      if(index==0)
      {
        $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(0)').outerHeight()+$('.categorie:eq(1)').outerHeight()+$('.categorie:eq(2)').outerHeight() );     
        $('.categorie').css( 'display' , 'none' );
        $('.categorie:eq(0),.categorie:eq(1),.categorie:eq(2)').fadeIn( 500 );     
        $('.onglet.actif').removeClass('actif');
        $('.onglet:eq(0),.onglet:eq(1),.onglet:eq(2)').addClass('actif');
      }
      else if(index==1)
      {
        $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(3)').outerHeight()+$('.categorie:eq(4)').outerHeight()+$('.categorie:eq(5)').outerHeight() );     
        $('.categorie').css( 'display' , 'none' );
        $('.categorie:eq(3),.categorie:eq(4),.categorie:eq(5)').fadeIn( 500 );     
        $('.onglet.actif').removeClass('actif');
        $('.onglet:eq(3),.onglet:eq(4),.onglet:eq(5)').addClass('actif');
      }
  }
Où donc on aura encore un chiffre dans change_categorie(chiffre) mais suivant le chiffre on fera apparaitre plusieurs catégories ( ici j'ai mis pour 0, les catégories 0 à 2 et pour 1 les catégories 3 à 5 ).

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Choisir ses catégories dans les onglets

Message par MiruParanoia le Dim 25 Mar 2012 - 15:40

Ton code est parfait (et sans toucher au template !)
Merci beaucoup :3

MiruParanoia
*

Féminin
Messages : 47
Inscrit(e) le : 01/04/2008

http://wammys-house.forums-actifs.net/
MiruParanoia a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum