Partagez | 
 

 Catégories à Onglet.

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

CELEBRE JOURNALISTE.

avatar

En savoir plus
MessageSujet: Catégories à Onglet.   Ven 2 Nov - 12:00


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


CSS

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

source : http://forum.forumactif.com/t332522-categories-par-onglets?highlight=onglets
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://thenotebook.activebb.net

CELEBRE JOURNALISTE.

avatar

En savoir plus
MessageSujet: Re: Catégories à Onglet.   Jeu 31 Jan - 22:49
















Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://thenotebook.activebb.net

CELEBRE JOURNALISTE.

avatar

En savoir plus
MessageSujet: Re: Catégories à Onglet.   Dim 21 Juil - 9:10

     
       
  • CONTENU PREMIER PANNEAU
  •  
       
  • CONTENU DEUXIEME PANNEAU
  •  
       
  • CONTENU TROISIEME PANNEAU
  •  
       
  • CONTENU QUATRIEME PANNEAU
  •  





http://www.css-actif.com/t8857-creer-un-accordeon-vertical
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://thenotebook.activebb.net

CELEBRE JOURNALISTE.

avatar

En savoir plus
MessageSujet: Re: Catégories à Onglet.   Mar 23 Juil - 19:50

Statistiques
 

                {TOTAL_POSTS}. {TOTAL_USERS}.  {NEWEST_USER}.
                     {TOTAL_USERS_ONLINE}.
                  {RECORD_USERS}

                   
                   


                   

                   {LOGGED_IN_USER_LIST}

   

Groupes

         
         

                       
HUNTER

             
MUGGLES

         
HUFFLEPUFF

         
GRYFFINDOR

         
VAMPYR

         
SHOPKEEPER

         
WEREWOLF

         
GYPSY

           
CREATURE

           
SLYTHERIN

           
RAVENCLAW

           
WIZZARD

           
MINISTRY

           
TEACHER

       
     


Spotted !!
   
     {L_CONNECTED_MEMBERS}
           {L_WHOSBIRTHDAY_TODAY}
     {L_WHOSBIRTHDAY_WEEK}

Pour la petite histoire...
Le contenu doit être en html avec les balises classiques html : (br pour retour à la ligne etc ... (

Le retour automatique à la ligne se fera dans chaque contenu.






*************************************

Présentation
Ce menu html et ccs3 n'utilise pas de javascript.




http://astuforum.free.fr/exemple/menu_accordeon.html
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://thenotebook.activebb.net
Contenu sponsorisé




En savoir plus
MessageSujet: Re: Catégories à Onglet.   

Revenir en haut Aller en bas
 

Catégories à Onglet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» ['Christa] Regrouper les catégories en Onglet
» Afficher les catégories en onglet sur un forumactif
» [Nocturne] Demande: les catégories
» [Annulée] Demande de description des catégories.
» Niveau des catégories...

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
The Notebook :: L'univers de King's Cross. :: Les textes fondamentaux.-