Forum test de codage d'Iain aka. Jay/jin



 
FAQFAQ  RechercherRechercher  AccueilAccueil  MembresMembres  S'enregistrerS'enregistrer  ConnexionConnexion  GroupesGroupes  

catégorie en onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas
paranoid
Dans catégorie en onglets, posté le Lun 11 Juin - 8:05


note rappel: ce script peut ne pas fonctionner avec tout. dans ce cas, l'installer et recopier peu à peu le template modifié, gardé de coté au préalable

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

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

_________________

onehitwonder
avatar


Pseudo(s) : iain, jarvis, jin
Âge : 18
Genre : he/him
Occupation : lol
Localisation : paris
paranoid
Voir le profil de l'utilisateur http://mmmmh.forumactif.org
Comment me contacter?
catégorie en onglets
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
S P A C E S H I P :: informations utilisables-


Sauter vers: