Catégories par onglets
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Catégories par onglets
- 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 -->
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 :
Merci d'avance ♥
Dernière édition par Kannone le Mer 13 Juin 2012 - 18:36, édité 1 fois
Re: Catégories par onglets
Kannone a écrit:Up
Re: Catégories par onglets
Bonjour,
Essayez en passant par :
PA > modules > Gestions des codes javascript > créer un nouveau code js :
Pour ajouter des onglets, en enlever, les renommer, mettre plusieurs catégories ou une seule par onglet, c'est dans le javascript:
Bien sincèrement.
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));
});
});
- 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]]];
Bien sincèrement.
Invité- Invité
Re: Catégories par onglets
Tout marche magnifiquement bien, merci beaucoup *^*
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum