Pitchoune
11/07/2005, 20h13
Introduction
Les styles vBulletin 3 fournissent un mécanisme pour créer des menus contextuels, appelés vBMenu. Ce système permet à des fonctions complexes ou moins utilisés d'être cachées immédiatement, qui aboutit à une interface utilisateur moins chargée et intimidante pour les utilisateurs novices.
http://forum.vbulletin-fr.org/tutorial/styles/vbmenu_example.png
Vous pouvez ajouter un nouveau menu contextuel vBMenu à vos templates personnalisés en suivant de simples règles.
Un menu contextuel vBMenu est constitué de deux éléments : Le contrôle du menu contextuel, et le menu contextuel lui-même. Tout menu contextuel peut avoir n'importe quel nombre de contrôles, et cliquer sur un des contrôles ouvrira immédiatement le menu contextuel sous le contrôle du menu contextuel.
Chaque menu contextuel vBMenu doit avoir un identifiant unique, qui sera utilisé par le système vBMenu pour distinquer les popups des autres et permet au contrôle du menu contextuel de communiquer avec son élément associé.
Pour notre exemple, nous appelerons notre vBMenu MonMENU.
Le code HTML pour un contrôle du menu contextuel vBMenu ressemblera à ceci :
<td id="MonMENU" class="vbmenu_control">
<a href="#">Mon vBMenu d'exemple</a>
<script type="text/javascript">
vbmenu_register("MonMENU");
</script>
</td>
Les constituants d'un contrôle du menu contextuel vBMenu, comme vu dans le code ci-dessus, sont :
Une balise bloc (<td>, <div>, etc...) avec un attribut id utilisant l'identifiant vBMenu (dans notre cas, MonMENU).
Un lien (l'attribut href devrait pointer quelque part sur le menu).
Un bloc Javascript contenant un appel vers la fonction vbmenu_register(), utilisant l'identifiant vBMenu comme argument pour la fonction.
Si vous souhaitez ne pas faire apparaître une petite image à côté du texte dans le contrôle du menu contextuel, vous pouvez le réaliser en ajoutant un deuxième argument pour la fonction Javascript vbmenu_register() comme ceci :
<script type="text/javascript">
vbmenu_register("MonMENU", true);
</script>
Le code HTML pour l'élément du menu contextuel vBMenu serait comme ceci :
<div class="vbmenu_popup" id="MonMENU_menu" style="display:none">
<!-- Tout code HTML ici sera une partie du
popup vBMenu identifié comme « MonMENU » -->
</div>
Les constituants de l'élément du menu contextuel vBMenu lui-même sont très simples, et sont basés autour des attributs appliqués à la balise <div>, qui entourera n'importe quel contenu qoue nous souhaitons faire apparaître dans le menu contextuel. La balise <div> doit obéir les règles suivantes :
Il doit utiliser la classe CSS vbmenu_popup,
Il doit avoir l'identification « MenuName_menu » (dans notre exemple, « MonMenu_menu » est un id correct),
Et il doit avoir l'attribut CSS style="display:none".
Tout contenu HTML peut être placé entre les balises d'ouverture et de fermeture de l'élément <div>, et agira en tant que contenu de notre menu contextuel.
Contenu d'un menu contextuel vBMenu
Tandis que n'importe quel code valide HTML peut être inséré dans l'élément <div> qui définit les lignes d'un menu contextuel vBMenu, il y a quelques systèmes et standards en place pour vous aider à réaliser une apparence cohérente et un sens pour vos menus.
Les menus contextuels vBMenu prend habituellement forme avec la balise <table> avec des lignes individuelles pour séparer les options du menu, avec un simple lien dans chaque cellule, qui pointe sur la page désirée.
http://forum.vbulletin-fr.org/tutorial/styles/css_vbmenu_hilite.gif
Comme vous pouvez le voir dans l'image précédente, chaque ligne alterne d'affichage quand le pointeur de la souris est dessus. Cet effet mouse-over est réalisée automatiquement avec le système vBMenu, et permet l'utilisation de la classe « Lignes d'option dans les menus contextuels » (.vbmenu_option) et son associé, la classe CSS « Options survolées dans les menus contextuels » (.vbmenu_hilite).
Un exemple de contenu pour un élément du menu contextuel vBMenu peut ressembler à ceci :
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Ceci est mon exemple vBMenu</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="index.php">Page d'accueil</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
Si pour n'imprte quel raison vous souhaitez éviter le changement de couleur des éléments en utilisant la classe CSS .vbmenu_option, vous pouvez le faire en ajoutant l'attribut title avec la valeur nohilite de l'élément approprié, comme ceci :
<tr>
<td class="vbmenu_option" title="nohilite">
Cette ligne n'aura pas d'effet mouse-over.
</td>
</tr>
Multiple ou simple contrôle de menu
Comme mentionné récédemment, toute menu contextuel vBMenu peut avoir n'importe quel nombre de contrôle de menu.
http://files.vbulletin.com/doc_images/styles/vbmenu_multicontrols.gif
Pour faire ceci, il est nécessaire de modifier légèrement le code pour chaque contrôle de menu.
Avec un simple contrôle, l'attribut id d'un contrôle de menu utilise l'unique identifiant que le menu vBMenu contrôle, comme ceci :
<td id="MonMENU" class="vbmenu_control">
<a href="#">Simple Contrôle de Menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU");
</script>
</td>
Pour permettre de multiples contrôles dans le même menu, il est nécessaire d'ajouter un unique suffixe à chaque identifiant de contrôle, qui prendra la forme d'une période suivie par un unique suffixe, comme suit :
<td id="MonMENU.premier" class="vbmenu_control">
<a href="#">Premier contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU.premier");
</script>
</td>
<td id="MonMENU.second" class="vbmenu_control">
<a href="#">Second contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU.second");
</script>
</td>
La condition $show['popups']
Certains navigateurs web n'incluent pas la possibilité d'utiliser le système vBMenu.
Afin d'éviter que les navigateurs qui sont dans ce cas chargent une partie du code inutilisable pour eux, une condition de template spécial est utilisée.
$show['popups']
En incluant tous les contrôles et menus contextuels vBMenu dans une condition qui vérifit la valeur de $show['popups'], des erreurs Javascript peuvent être évitées, et du code HTML alternatif est visible pour les navigateurs qui peuvent pas utiliser les menus contextuels.
Par exemple :
<if condition="$show['popups']">
<!-- ici est placé le contenu pour les navigateurs qui
sont capable d'utiliser le système vBMenu -->
<else />
<!-- ici est placé le contenu pour les navigateurs qui
ne sont pas capable d'utiliser le système vBMenu -->
</if>
Exemple de code HTML vBMenu
Le code suivant génèrera un menu complet vBMenu et un simple contrôle associé, et affichera aussi un bout de code HTML alternatif pour els navigateurs incompatibles.
<if condition="$show['popups']">
<!-- début d'élément de contrôle vBMenu -->
<table class="tborder" cellpadding="4" cellspacing="1">
<tr>
<td id="MonMENU" class="vbmenu_control">
<a href="#">Second contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
<!--
vbmenu_register("MonMENU");
//-->
</script>
</td>
</tr>
</table>
<!-- fin d'élément de contrôle vBMenu -->
<!-- début d'élément de menu vBMenu -->
<div class="vbmenu_popup" id="MonMENU_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Ceci est mon vBMenu d'exemple</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="index.php">Page d'accueil</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
</div>
<!-- fin d'élément de menu vBMenu -->
<else />
<!-- début du contenu alternatif non-vBMenu -->
<table class="tborder" cellpadding="4" cellspacing="1">
<tr>
<td class="vbmenu_control"><a href="index.php">Page d'accueil</a></td>
<td class="vbmenu_control"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
<!-- fin du contenu alternatif -->
</if>
Désactiver le système vBMenu
Si vous souhaitez désactiver complètement le système de menu vBMenu, afficher du contenu en menus contextuels sans savoir si les navigateurs sont compatibles, vous pouvez le faire en allant dans « Options vBulletin > Style & Langue » et paramétrez l'option « Activer les menus popup DHTML » sur Non.
http://forum.vbulletin-fr.org/tutorial/styles/vbmenu_disabled.png
Après avoir cliqué sur le bouton « Enregistrer », la condition $show['popups'] retournera la valeur false pour tous les visiteurs, et tout ceux qui visiteront votre forum auront du texte alternatif, et pas de menus contextuels.
Les styles vBulletin 3 fournissent un mécanisme pour créer des menus contextuels, appelés vBMenu. Ce système permet à des fonctions complexes ou moins utilisés d'être cachées immédiatement, qui aboutit à une interface utilisateur moins chargée et intimidante pour les utilisateurs novices.
http://forum.vbulletin-fr.org/tutorial/styles/vbmenu_example.png
Vous pouvez ajouter un nouveau menu contextuel vBMenu à vos templates personnalisés en suivant de simples règles.
Un menu contextuel vBMenu est constitué de deux éléments : Le contrôle du menu contextuel, et le menu contextuel lui-même. Tout menu contextuel peut avoir n'importe quel nombre de contrôles, et cliquer sur un des contrôles ouvrira immédiatement le menu contextuel sous le contrôle du menu contextuel.
Chaque menu contextuel vBMenu doit avoir un identifiant unique, qui sera utilisé par le système vBMenu pour distinquer les popups des autres et permet au contrôle du menu contextuel de communiquer avec son élément associé.
Pour notre exemple, nous appelerons notre vBMenu MonMENU.
Le code HTML pour un contrôle du menu contextuel vBMenu ressemblera à ceci :
<td id="MonMENU" class="vbmenu_control">
<a href="#">Mon vBMenu d'exemple</a>
<script type="text/javascript">
vbmenu_register("MonMENU");
</script>
</td>
Les constituants d'un contrôle du menu contextuel vBMenu, comme vu dans le code ci-dessus, sont :
Une balise bloc (<td>, <div>, etc...) avec un attribut id utilisant l'identifiant vBMenu (dans notre cas, MonMENU).
Un lien (l'attribut href devrait pointer quelque part sur le menu).
Un bloc Javascript contenant un appel vers la fonction vbmenu_register(), utilisant l'identifiant vBMenu comme argument pour la fonction.
Si vous souhaitez ne pas faire apparaître une petite image à côté du texte dans le contrôle du menu contextuel, vous pouvez le réaliser en ajoutant un deuxième argument pour la fonction Javascript vbmenu_register() comme ceci :
<script type="text/javascript">
vbmenu_register("MonMENU", true);
</script>
Le code HTML pour l'élément du menu contextuel vBMenu serait comme ceci :
<div class="vbmenu_popup" id="MonMENU_menu" style="display:none">
<!-- Tout code HTML ici sera une partie du
popup vBMenu identifié comme « MonMENU » -->
</div>
Les constituants de l'élément du menu contextuel vBMenu lui-même sont très simples, et sont basés autour des attributs appliqués à la balise <div>, qui entourera n'importe quel contenu qoue nous souhaitons faire apparaître dans le menu contextuel. La balise <div> doit obéir les règles suivantes :
Il doit utiliser la classe CSS vbmenu_popup,
Il doit avoir l'identification « MenuName_menu » (dans notre exemple, « MonMenu_menu » est un id correct),
Et il doit avoir l'attribut CSS style="display:none".
Tout contenu HTML peut être placé entre les balises d'ouverture et de fermeture de l'élément <div>, et agira en tant que contenu de notre menu contextuel.
Contenu d'un menu contextuel vBMenu
Tandis que n'importe quel code valide HTML peut être inséré dans l'élément <div> qui définit les lignes d'un menu contextuel vBMenu, il y a quelques systèmes et standards en place pour vous aider à réaliser une apparence cohérente et un sens pour vos menus.
Les menus contextuels vBMenu prend habituellement forme avec la balise <table> avec des lignes individuelles pour séparer les options du menu, avec un simple lien dans chaque cellule, qui pointe sur la page désirée.
http://forum.vbulletin-fr.org/tutorial/styles/css_vbmenu_hilite.gif
Comme vous pouvez le voir dans l'image précédente, chaque ligne alterne d'affichage quand le pointeur de la souris est dessus. Cet effet mouse-over est réalisée automatiquement avec le système vBMenu, et permet l'utilisation de la classe « Lignes d'option dans les menus contextuels » (.vbmenu_option) et son associé, la classe CSS « Options survolées dans les menus contextuels » (.vbmenu_hilite).
Un exemple de contenu pour un élément du menu contextuel vBMenu peut ressembler à ceci :
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Ceci est mon exemple vBMenu</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="index.php">Page d'accueil</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
Si pour n'imprte quel raison vous souhaitez éviter le changement de couleur des éléments en utilisant la classe CSS .vbmenu_option, vous pouvez le faire en ajoutant l'attribut title avec la valeur nohilite de l'élément approprié, comme ceci :
<tr>
<td class="vbmenu_option" title="nohilite">
Cette ligne n'aura pas d'effet mouse-over.
</td>
</tr>
Multiple ou simple contrôle de menu
Comme mentionné récédemment, toute menu contextuel vBMenu peut avoir n'importe quel nombre de contrôle de menu.
http://files.vbulletin.com/doc_images/styles/vbmenu_multicontrols.gif
Pour faire ceci, il est nécessaire de modifier légèrement le code pour chaque contrôle de menu.
Avec un simple contrôle, l'attribut id d'un contrôle de menu utilise l'unique identifiant que le menu vBMenu contrôle, comme ceci :
<td id="MonMENU" class="vbmenu_control">
<a href="#">Simple Contrôle de Menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU");
</script>
</td>
Pour permettre de multiples contrôles dans le même menu, il est nécessaire d'ajouter un unique suffixe à chaque identifiant de contrôle, qui prendra la forme d'une période suivie par un unique suffixe, comme suit :
<td id="MonMENU.premier" class="vbmenu_control">
<a href="#">Premier contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU.premier");
</script>
</td>
<td id="MonMENU.second" class="vbmenu_control">
<a href="#">Second contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
vbmenu_register("MonMENU.second");
</script>
</td>
La condition $show['popups']
Certains navigateurs web n'incluent pas la possibilité d'utiliser le système vBMenu.
Afin d'éviter que les navigateurs qui sont dans ce cas chargent une partie du code inutilisable pour eux, une condition de template spécial est utilisée.
$show['popups']
En incluant tous les contrôles et menus contextuels vBMenu dans une condition qui vérifit la valeur de $show['popups'], des erreurs Javascript peuvent être évitées, et du code HTML alternatif est visible pour les navigateurs qui peuvent pas utiliser les menus contextuels.
Par exemple :
<if condition="$show['popups']">
<!-- ici est placé le contenu pour les navigateurs qui
sont capable d'utiliser le système vBMenu -->
<else />
<!-- ici est placé le contenu pour les navigateurs qui
ne sont pas capable d'utiliser le système vBMenu -->
</if>
Exemple de code HTML vBMenu
Le code suivant génèrera un menu complet vBMenu et un simple contrôle associé, et affichera aussi un bout de code HTML alternatif pour els navigateurs incompatibles.
<if condition="$show['popups']">
<!-- début d'élément de contrôle vBMenu -->
<table class="tborder" cellpadding="4" cellspacing="1">
<tr>
<td id="MonMENU" class="vbmenu_control">
<a href="#">Second contrôle de plusieurs contrôle de menu</a>
<script type="text/javascript">
<!--
vbmenu_register("MonMENU");
//-->
</script>
</td>
</tr>
</table>
<!-- fin d'élément de contrôle vBMenu -->
<!-- début d'élément de menu vBMenu -->
<div class="vbmenu_popup" id="MonMENU_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Ceci est mon vBMenu d'exemple</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="index.php">Page d'accueil</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
</div>
<!-- fin d'élément de menu vBMenu -->
<else />
<!-- début du contenu alternatif non-vBMenu -->
<table class="tborder" cellpadding="4" cellspacing="1">
<tr>
<td class="vbmenu_control"><a href="index.php">Page d'accueil</a></td>
<td class="vbmenu_control"><a href="usercp.php">Tableau de bord</a></td>
</tr>
</table>
<!-- fin du contenu alternatif -->
</if>
Désactiver le système vBMenu
Si vous souhaitez désactiver complètement le système de menu vBMenu, afficher du contenu en menus contextuels sans savoir si les navigateurs sont compatibles, vous pouvez le faire en allant dans « Options vBulletin > Style & Langue » et paramétrez l'option « Activer les menus popup DHTML » sur Non.
http://forum.vbulletin-fr.org/tutorial/styles/vbmenu_disabled.png
Après avoir cliqué sur le bouton « Enregistrer », la condition $show['popups'] retournera la valeur false pour tous les visiteurs, et tout ceux qui visiteront votre forum auront du texte alternatif, et pas de menus contextuels.