Catégories par onglets

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

Résolu Catégories par onglets

Message par Kannone le Lun 4 Juin 2012 - 22:26


    Bien le bonsoir (:

    Donc j'ai chercher un peu partout sur le forum, essayant, trifouillant un peu partout pour essayer de trouver comment ranger les catégories de mon forum par onglets. Cependant étant un belle quiche au niveau templates je n'ai pas vraiment compris comment faire et pour être honnête, je n'arrivais à pas grand chose si ce n'est rien du tout. De plus mon template index_box est déjà bien modifié grâce à un premier passage ici ( chapeau d'ailleurs vous êtes des boss ♥ ) et... ça donnait encore moins ce que j'attendais.
    Je recherche donc une âme charitable qui voudra bien tenter de m'expliquer comment faire...

    Voici mon template index_box :

    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>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
              <th colspan="3" nowrap="nowrap" width="100%" align="center"  class="secondarytitle"> {catrow.tablehead.L_FORUM} </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}" /><br />
          <div class="der-m"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="bottom" 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}>
             <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
             <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>
          </td>
       
          <td class="row3 over" align="center" valign="middle" height="50"><div class="sous-fo" id="subforums"><span class="gensmall">
                                      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></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" /><!-- END tablefoot --><!-- END catrow -->

    Merci d'avance ♥


Dernière édition par Kannone le Mer 13 Juin 2012 - 18:36, édité 1 fois

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets

Message par Kannone le Mer 6 Juin 2012 - 12:56

Up Like a Star @ heaven

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets

Message par Kannone le Jeu 7 Juin 2012 - 18:57

Up Like a Star @ heaven

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets

Message par Kannone le Sam 9 Juin 2012 - 8:31

Up Like a Star @ heaven

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets

Message par Kannone le Mar 12 Juin 2012 - 18:56

@Kannone a écrit:
Up Like a Star @ heaven

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets

Message par Invité le Mer 13 Juin 2012 - 18:31

Bonjour,

Essayez en passant par :
PA > modules > Gestions des codes javascript > créer un nouveau code js :
Code:
$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["première catégorie",[0]],
                          ["2eme catégorie",[1]],
                          ["3eme catégorie",[2]],
                          ["Tout le forum",[0, 1, 2, 3]]];
 
  /* fonction pour sélectionner un onglet d'après une string s */
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
  /* fonction pour voir si un index de catégorie i est dans un onglet d */
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= false;
  /* temps pour slider en ms */
  var timeslide= 800;
 
  /* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);   
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});
Avec ceci dans votre CSS, à personnaliser, bien sûr Wink :
Code:
/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #000;
  color: #fdf;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}

.co-item:hover{
  background: #fff;
  border: 1px solid #fff;
  color:#000;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #fdf;
  color: #000;
  border:1px solid #000; }

Pour ajouter des onglets, en enlever, les renommer, mettre plusieurs catégories ou une seule par onglet, c'est dans le javascript:
Code:
 /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["première catégorie",[0]],
                          ["2eme catégorie",[1]],
                          ["3eme catégorie",[2]],
                          ["Tout le forum",[0, 1, 2, 3]]];
(C'est un code donné par Ea, que j'avais gardé dans un coin, en bidouillant on peut faire de chouette choses avec Razz)

Bien sincèrement.

Invité
Invité


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

Résolu Re: Catégories par onglets

Message par Kannone le Mer 13 Juin 2012 - 18:35

Tout marche magnifiquement bien, merci beaucoup *^*

Kannone
Nouveau membre

Messages : 23
Inscrit(e) le : 18/05/2012

http://nekoacademia.forumactif.org/
Kannone 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