Faire apparaître une section optionnelle: attribut "options"

Une section optionnelle, que ce soit un élément <section> ou un bloc, doit posséder un attribut options qui définit quelle(s) option(s) entre(nt) en jeu pour que la section soit affichée ou non.

Faire apparaître une section quand une option est activée

Pour faire apparaître le contenu d'une section ou d'un bloc quand une option est activée, il suffit de mentionner dans l'attribut options l'identificateur de cette option.

Exemple

<bloc style="clair" bords="arrondis" options="optionA">
   <p>L'option est activée</p>
</bloc>

activer - désactiver

Faire apparaître une section quand une option est désactivée ou inexistante

Pour faire apparaître le contenu d'une section ou d'un bloc quand une option est désactivée ou est encore inexistante, il suffit de mentionner dans l'attribut options l'identificateur de cette option précédé du caractère !.

Dans cet exemple, le deuxième bloc sera affiché lors du chargement de la page (car l'option n'existe pas encore) ou lorsque vous cliquez sur le lien désactiver.

Exemple

<bloc style="clair" bords="arrondis" options="optionB">
   <p>L'option est activée</p>
</bloc>
<bloc style="important" bords="arrondis" options="!optionB">
   <p>L'option est désactivée</p>
</bloc>

activer - désactiver

Faire apparaître une section quand une option existe et est désactivée

Pour faire apparaître le contenu d'une section ou d'un bloc quand une option existe et est désactivée, il suffit de mentionner dans l'attribut options l'identificateur de cette option précédé du caractère %.

Dans cet exemple, le deuxième bloc ne sera pas affiché lors du chargement de la page (car l'option n'existe pas encore), mais uniquement si vous cliquez sur le lien désactiver.

Exemple

<bloc style="clair" bords="arrondis" options="optionC">
   <p>L'option est activée</p>
</bloc>
<bloc style="important" bords="arrondis" options="%optionC">
   <p>L'option est désactivée</p>
</bloc>

activer - désactiver

Faire apparaître une section quand une option n'existe pas

Pour faire apparaître le contenu d'une section ou d'un bloc quand une option n'existe pas, il suffit de mentionner dans l'attribut options l'identificateur de cette option précédé du caractère -.

Dans cet exemple, le troisième bloc n'apparaitra qu'au moment du chargement de la page (car l'option n'existe pas encore). Dès que vous cliquez sur une des deux liens activer ou désactiver, l'option se met à exister et il n'est plus possible de faire réapparaître ce bloc.

Exemple

<bloc style="clair" bords="arrondis" options="optionD">
   <p>L'option est activée</p>
</bloc>
<bloc style="important" bords="arrondis" options="%optionD">
   <p>L'option est désactivée</p>
</bloc>
<bloc style="important" bords="arrondis" options="-optionD">
   <p>L'option n'existe pas</p>
</bloc>

activer - désactiver

Faire apparaître une section quand plusieurs options sont activées ou désactivées

Pour faire apparaître le contenu d'une section ou d'un bloc quand plusieurs options sont activées ou désactivées, on combine les identificateurs des options (éventuellement précédés des caractères !, % ou -) séparés par des caractères | ou des virgules.

Un | indique un OU logique, tandis que la virgule indique un ET logique (si les deux sont utilisés, les ET seront calculés avant les OU).

Exemple

<section options="o1">
   <p>L'option 1 est activée</p>
</section>
<section options="o2">
   <p>L'option 2 est activée</p>
</section>
<section options="o3">
   <p>L'option 3 est activée</p>
</section>
<section options="!o1,!o2,!o3">
   <p>Aucune des trois options n'est activée</p>
</section>
<section options="o1|o2|o3">
   <p>Une des trois options est activée</p>
</section>
<section options="o1,o2,o3">
   <p>Les trois options sont activées</p>
</section>
<section options="o1,o2|o3">
   <p>Les options 1 et 2 sont activées, ou l'option 3 est activée</p>
</section>
<section options="o1,!o2,!o3">
   <p>L'option 1 est activée et les deux autres désactivées</p>
</section>

option 1 - option 2 - option 3

sommaire

index

page précédente

page suivante

English	中文	Page d'accueil	Contacts	Plan des campus
					pages annuaire