Pitchoune
11/07/2005, 20h04
Le système de style vBulletin vous permet de créer des éléments dans les templates qui peuvent être réduit (caché) quand un visiteur clique sur un bouton. L'état réduit des éléments est sauvegardé dans un cookie, donc quand le visiteur revient sur cette page, les éléments qui ont été réduits le restent jusqu'à ce que le visiteur clique sur le même bouton pour développer l'élément.
http://forum.vbulletin-fr.org/tutorial/styles/collapsible_element.png
Pour ajouter des éléments réductibles dans votre propre template est très simple, et demande de respecter certaines règles.
Premièrement, vous devez décider d'un unique identifiant pour votre élément réductible. Le nom peut contenir des nombres, des lettres (en majuscule ou minuscule) et des sous-tirests ( _ ). L'utilisation de tout autre caractère dans l'identifiant peut causer des problèmes.
Ici, nous l'appelerons MonELEMENT.
Un élément réductible est consistué de deux parties - un bouton (habituellement) qui contrôle le développement et la réduction, et le contenu actuel qui doit être développé ou réduit.
Un bouton de contrôle ressemble à ceci :
<a href="#top" onclick="return toggle_collapse('MonELEMENT')"><img
id="collapseimg_MonELEMENT"
src="$stylevar/collapse_thead$vbcollapse[collapseimg_MonELEMENT].gif"
alt="" border="0" /></a>
Dans cet exemple, vous pouvez voir que l'identifiant MonELEMENT surgit à certains endroits dans le code XHTML. Ceci doit être remplacé avec n'importe quel mot que vous aurez choisi pour votre propre identifiant.
Note :
Dans cet exemple, l'image utilisée est utilisée pour le bouton de contrôle avec le préfixe collapse_thead. Ceci est parce que l'image est conçu pour être introduit avec la couleur de l'arrière-plan des éléments utilisant la classe CSS « .thead ».
Il existe aussi des images introduient avec les classes CSS « .tcat » et « .alt1 » / « .alt2 », avec le préfixe collapse_tcat et collapse_alt respectif.
La seconde partie de l'élément réductible est un morceau de code dans lequle le contenu réductible est placé.
Un très simple exemple d'un élément réductible pour MonELEMENT est celui-ci :
<div id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<!-- tout code HTML qui sera caché quand le bouton de contrôle « MonELEMENT » est cliqué -->
</div>
Si vous souhaitez ajouter un style additionnel dans l'attribut « style » de l'élément, vous pouvez ajouter un point virgule après le code $vbcollapse[collapse_MonELEMENT] et continuez normalement.
L'exemple suivant montre un élément réductible complet.
<div class="tborder">
<div class="tcat" style="padding:4px">
<a href="#top" style="float:$stylevar[right]" onclick="return toggle_collapse('MonELEMENT')"><img id="collapseimg_MonELEMENT" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_MonELEMENT].gif" alt="" border="0" /></a>
Cliquez sur ce bouton pour montrer/cacher le contenu suivant :
</div>
<div id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<div class="alt1" style="padding:8px">
<p><strong>Bonjour !</strong> Bienvenue, $bbuserinfo[username].</p>
<p>Si vous souhaitez vérifier vos messages privés, <a href="private.php?$session[sessionurl]">cliquez ici</a>.</p>
</div>
</div>
</div>
Quand le contenu est développé, cette exemple reproduit un élément comme ceci :
[img]http://forum.vbulletin-fr.org/tutorial/styles/collapse_example_open.png
Et une fois réduit, vous pouvez voir ça :
http://forum.vbulletin-fr.org/tutorial/styles/collapse_example_closed.png
Réduction de lignes dans la balise <table>
Ci-dessus, vous avez vu la création d'éléments réductibles dans vos templates personnalisés.
Quelquefois, vous voudriez vouloir permettre à vos utilisateurs de réduire des lignes individuelles (ou groupe de lignes) dans une balise <table>. Afin que les navigateurs soient compatibles, et pour vous assurer que vos pages soient compatible XHTML, il y a quelques règles à suivre.
Il est pas possible de réduire toutes les balises HTML. Pour pouvoir réduire des lignes dans une balise <table>, vous devez entourer ces lignes avec la balise très connu <tbody>.
L'idée originale de la balise <tbody> était de pouvoir afficher l'en-tête et le pied d'un tableau, et de charger le contenu du tableau entre l'en-tête et le pied. Malheureusement, très peu de navigateurs utilisent ce système.
Cependant, la balise <tbody> est très utile pour nous, car il nous permet de définir un élément pour une ou plusieurs lignes, et nous pouvons réduire ou développer chaque élément qui utilisent notre système d'éléments réductibles.
Il y a un avertissement. Afin d'avoir un code XHTML correct, nous ne pouvons pas entourer les balises <tbody> sélectivement autour des groupes de lignes d'un tableau, et laisser les autres lignes sans élément. Nous devons inclure la balise <thead>, et nous assurer que toutes les lignes dans un tableau soient introduites soit dans la balise <thead> ou la balise <tbody>.
Le code suivant n'est pas compatible XHTML parce qu'il n'inclut pas la balise <thead>, et que des lignes ne sont pas entourées par les balises <thead>, <tbody> ou <tfoot> :
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<tr><td class="tcat"><strong>Titre du tableau</strong></td></tr>
<tbody>
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</table>
D'un autre côté, le prochain bloc est compatible XHTML. Notez que la première ligne est enfermé dans une balise <thead>, et que les autres lignes sont enfermés dans une balise <tbody>.
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<thead>
<tr><td class="tcat"><strong>Titre du tableau</strong></td></tr>
</thead>
<tbody>
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</tbody>
</table>
Ceci est le même bloc de code avec les deux premières lignes de contenu réductible :
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<thead>
<tr><td class="tcat">
<a href="#top" style="float:$stylevar[right]" onclick="return toggle_collapse('MonELEMENT')"><img id="collapseimg_MonELEMENT" src="$stylevar/collapse_tcat$vbcollapse[collapseimg_MonELEMENT].gif" alt="" border="0" /></a>
<strong>Titre du tableau</strong>
</td></tr>
</thead>
<tbody id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</tbody>
</table>
Quand le contenu est développé, cette exemple reproduit un élément comme ceci :
[img]http://forum.vbulletin-fr.org/tutorial/styles/collapse_table_open.png
... Et une fois réduit, vous pouvez voir ça :
http://forum.vbulletin-fr.org/tutorial/styles/collapse_table_closed.png
http://forum.vbulletin-fr.org/tutorial/styles/collapsible_element.png
Pour ajouter des éléments réductibles dans votre propre template est très simple, et demande de respecter certaines règles.
Premièrement, vous devez décider d'un unique identifiant pour votre élément réductible. Le nom peut contenir des nombres, des lettres (en majuscule ou minuscule) et des sous-tirests ( _ ). L'utilisation de tout autre caractère dans l'identifiant peut causer des problèmes.
Ici, nous l'appelerons MonELEMENT.
Un élément réductible est consistué de deux parties - un bouton (habituellement) qui contrôle le développement et la réduction, et le contenu actuel qui doit être développé ou réduit.
Un bouton de contrôle ressemble à ceci :
<a href="#top" onclick="return toggle_collapse('MonELEMENT')"><img
id="collapseimg_MonELEMENT"
src="$stylevar/collapse_thead$vbcollapse[collapseimg_MonELEMENT].gif"
alt="" border="0" /></a>
Dans cet exemple, vous pouvez voir que l'identifiant MonELEMENT surgit à certains endroits dans le code XHTML. Ceci doit être remplacé avec n'importe quel mot que vous aurez choisi pour votre propre identifiant.
Note :
Dans cet exemple, l'image utilisée est utilisée pour le bouton de contrôle avec le préfixe collapse_thead. Ceci est parce que l'image est conçu pour être introduit avec la couleur de l'arrière-plan des éléments utilisant la classe CSS « .thead ».
Il existe aussi des images introduient avec les classes CSS « .tcat » et « .alt1 » / « .alt2 », avec le préfixe collapse_tcat et collapse_alt respectif.
La seconde partie de l'élément réductible est un morceau de code dans lequle le contenu réductible est placé.
Un très simple exemple d'un élément réductible pour MonELEMENT est celui-ci :
<div id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<!-- tout code HTML qui sera caché quand le bouton de contrôle « MonELEMENT » est cliqué -->
</div>
Si vous souhaitez ajouter un style additionnel dans l'attribut « style » de l'élément, vous pouvez ajouter un point virgule après le code $vbcollapse[collapse_MonELEMENT] et continuez normalement.
L'exemple suivant montre un élément réductible complet.
<div class="tborder">
<div class="tcat" style="padding:4px">
<a href="#top" style="float:$stylevar[right]" onclick="return toggle_collapse('MonELEMENT')"><img id="collapseimg_MonELEMENT" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_MonELEMENT].gif" alt="" border="0" /></a>
Cliquez sur ce bouton pour montrer/cacher le contenu suivant :
</div>
<div id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<div class="alt1" style="padding:8px">
<p><strong>Bonjour !</strong> Bienvenue, $bbuserinfo[username].</p>
<p>Si vous souhaitez vérifier vos messages privés, <a href="private.php?$session[sessionurl]">cliquez ici</a>.</p>
</div>
</div>
</div>
Quand le contenu est développé, cette exemple reproduit un élément comme ceci :
[img]http://forum.vbulletin-fr.org/tutorial/styles/collapse_example_open.png
Et une fois réduit, vous pouvez voir ça :
http://forum.vbulletin-fr.org/tutorial/styles/collapse_example_closed.png
Réduction de lignes dans la balise <table>
Ci-dessus, vous avez vu la création d'éléments réductibles dans vos templates personnalisés.
Quelquefois, vous voudriez vouloir permettre à vos utilisateurs de réduire des lignes individuelles (ou groupe de lignes) dans une balise <table>. Afin que les navigateurs soient compatibles, et pour vous assurer que vos pages soient compatible XHTML, il y a quelques règles à suivre.
Il est pas possible de réduire toutes les balises HTML. Pour pouvoir réduire des lignes dans une balise <table>, vous devez entourer ces lignes avec la balise très connu <tbody>.
L'idée originale de la balise <tbody> était de pouvoir afficher l'en-tête et le pied d'un tableau, et de charger le contenu du tableau entre l'en-tête et le pied. Malheureusement, très peu de navigateurs utilisent ce système.
Cependant, la balise <tbody> est très utile pour nous, car il nous permet de définir un élément pour une ou plusieurs lignes, et nous pouvons réduire ou développer chaque élément qui utilisent notre système d'éléments réductibles.
Il y a un avertissement. Afin d'avoir un code XHTML correct, nous ne pouvons pas entourer les balises <tbody> sélectivement autour des groupes de lignes d'un tableau, et laisser les autres lignes sans élément. Nous devons inclure la balise <thead>, et nous assurer que toutes les lignes dans un tableau soient introduites soit dans la balise <thead> ou la balise <tbody>.
Le code suivant n'est pas compatible XHTML parce qu'il n'inclut pas la balise <thead>, et que des lignes ne sont pas entourées par les balises <thead>, <tbody> ou <tfoot> :
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<tr><td class="tcat"><strong>Titre du tableau</strong></td></tr>
<tbody>
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</table>
D'un autre côté, le prochain bloc est compatible XHTML. Notez que la première ligne est enfermé dans une balise <thead>, et que les autres lignes sont enfermés dans une balise <tbody>.
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<thead>
<tr><td class="tcat"><strong>Titre du tableau</strong></td></tr>
</thead>
<tbody>
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</tbody>
</table>
Ceci est le même bloc de code avec les deux premières lignes de contenu réductible :
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%">
<thead>
<tr><td class="tcat">
<a href="#top" style="float:$stylevar[right]" onclick="return toggle_collapse('MonELEMENT')"><img id="collapseimg_MonELEMENT" src="$stylevar/collapse_tcat$vbcollapse[collapseimg_MonELEMENT].gif" alt="" border="0" /></a>
<strong>Titre du tableau</strong>
</td></tr>
</thead>
<tbody id="collapseobj_MonELEMENT" style="$vbcollapse[collapseobj_MonELEMENT]">
<tr><td class="alt1">Première ligne d'un élément réductible</td></tr>
<tr><td class="alt2">Seconde ligne d'un élément réductible</td></tr>
</tbody>
<tbody>
<tr><td class="alt1">Une autre ligne</td></tr>
</tbody>
</table>
Quand le contenu est développé, cette exemple reproduit un élément comme ceci :
[img]http://forum.vbulletin-fr.org/tutorial/styles/collapse_table_open.png
... Et une fois réduit, vous pouvez voir ça :
http://forum.vbulletin-fr.org/tutorial/styles/collapse_table_closed.png