Admin
CELEBRE JOURNALISTE.En savoir plus Messages : 33 Points : 68 Date d'inscription : 10/06/2012 Localisation : feezfregt grgf
| Sujet: 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 |
|
Admin
CELEBRE JOURNALISTE.En savoir plus Messages : 33 Points : 68 Date d'inscription : 10/06/2012 Localisation : feezfregt grgf
| Sujet: Re: Catégories à Onglet. Jeu 31 Jan - 22:49 | |
| |
|
Admin
CELEBRE JOURNALISTE.En savoir plus Messages : 33 Points : 68 Date d'inscription : 10/06/2012 Localisation : feezfregt grgf
| Sujet: Re: Catégories à Onglet. Dim 21 Juil - 9:10 | |
| |
|
Admin
CELEBRE JOURNALISTE.En savoir plus Messages : 33 Points : 68 Date d'inscription : 10/06/2012 Localisation : feezfregt grgf
| Sujet: 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}
|
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 |
|
Contenu sponsorisé
En savoir plus | Sujet: Re: Catégories à Onglet. | |
| |
|