Modèle d'artisanat catégories.

[YouGa-]

Traductions :
Ce mod a été écrit par nhtera888xxx et modifié par Joey_Pham de http://mybbvn.com
Il s'agit d'une modification du modèle d'artisanat pour vous aider à faire les onglets pour vos catégories, nous allons commencer:

Démo en ligne: http://www.forumese.com/

Tout d'abord, vous devez télécharger la pièce jointe ci-dessous, puis décompressez-le et télécharger dans JScript dossier.

Étape 1:
Aller à forumbit_depth1_cat modèle et ajouter la balise div pour couvrir tous les modèles:

Code :

id="cat_{$forum['fid']}" <div class="content">
....
</ Div>

Étape 2:
Aller à l'index modèle et à rechercher:

Code :

{$ Forum}

Ensuite, ajoutez-dessus:

Code :

<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript">
. NoConflict $ ();
</ Script>
<script type="text/javascript">
jQuery (document). ready (function ($) {
(Onglet '.') $. Cliquez sur (function () {
$ RemoveClass ('at') ('à.').
$ (Ce) addClass ('at').
(«Contenu».) $ SlideUp ().
catshow var = $ (this) attr ('rel').
$('#'+ Catshow) slideDown ().
});
});
</ Script>
<table border="0" width="100%" cellspacing="0" class="tborder" cellpadding="4" style="margin-bottom: 3px;">
<tr align="center">
class="tcat <td à title="Category tab" 1" style="cursor: pointer;" rel="cat_1"> Catégorie 1 </ td>
tab" class="tcat <td title="Category 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Catégorie 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Catégorie 9 </ td>
</ Tr>
</ Table>

Avis:
Le "cat_1" , "cat_4" , "cat_6" , "cat_9" , "cat_11" ont été prises à partir du code de l'étape 1 div ci-dessus:

Code :

"Cat_ {$ forum ['fid']}"

Et les chiffres sont 1,4,6,9,11 l'ID des catégories que vous souhaitez vous rendre onglet.

Ces cat_1, cat_4, cat_9 seront les onglets principaux qui montrent sur la page d'index.

Le # cat_6 sera la catégorie qui restent dans les mêmes onglets avec le cat_4, à quoi il ressemble ci-dessus,
et le # cat_11 sera la catégorie qui restent dans les mêmes onglets avec le cat_9.
=> Ne pas oublier le # pour les sous-catégories, si vous oubliez, alors ils l'habitude de voir après les principales catégories.

Vous sorte de l'idée, non?


Puis ajouter ces code CSS à global.css:

Code :

. {Au
    background: # 026CB1 url (images / thead_bg.gif) en haut à gauche repeat-x;
    color: # ffffff;
}

# {Cat_4
display: none;
}

# {Cat_6
display: none;
}

# {Cat_9
display: none;
}

# {Cat_11
display: none;
}

(Et continue)

Avis: Nous permet de masquer tous les onglets (pas vraiment cacher), sauf le premier onglet ou l'onglet que vous voulez être l'onglet principal.
Par exemple, à partir du code ci-dessus, il montre la cat_1 et cacher le reste d'entre eux.

Si vous souhaitez afficher ou modifier un autre onglet, il suffit d'ajouter le cat_1 et supprimer le css de l'onglet que vous souhaitez afficher.
EX: Maintenant, je veux montrer la cat_4 , puis je vais avoir ce code pour mon CSS:

Code :

. {Au
    background: # 026CB1 url (images / thead_bg.gif) en haut à gauche repeat-x;
    color: # ffffff;
}

# {Cat_1
display: none;
}

# {Cat_6
display: none;
}

# {Cat_9
display: none;
}

# {Cat_11
display: none;
}

P / S: Rappelez-vous, vous ne pouvez choisir 1 des css les onglets principaux "pour le rendre visible.
Comme ici, je ne peux choisir pour cat_1, cat_4, ou cat_9, parce qu'ils sont les onglets principaux, j'ai choisi avant.

et puis je vais changer le code de l'index de ce modèle:

Code :

<table border="0" width="100%" cellspacing="0" class="tborder" cellpadding="4" style="margin-bottom: 3px;">
<tr align="center">
class="tcat <td à title="Category tab" 1" style="cursor: pointer;" rel="cat_1"> Catégorie 1 </ td>
tab" class="tcat <td title="Category 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Catégorie 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Catégorie 9 </ td>
</ Tr>
</ Table>

Pour cela:

Code :

<table border="0" width="100%" cellspacing="0" class="tborder" cellpadding="4" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat tab" title="Category 1" style="cursor: pointer;" rel="cat_1"> Catégorie 1 </ td>
class="tcat <td à title="Category tab" 4 & 6" style="cursor: pointer;" rel="cat_4, #cat_6"> Catégorie 4 & 6 </ td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11"> Catégorie 9 </ td>
</ Tr>
</ Table>

C'est tout.



Espérons que cette modification sera utile pour vous.


Tutoriels traduit par YouGa- pour Mybb.fr, aucune reproductions sans mon autorisations.