Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Les sections optionnelles

Les sections optionnelles sont des parties d'une page web qui vont apparaître ou disparaître en fonction d'une condition. Cette condition peut varier de différentes manières.

Une section optionnelle peut avoir plusieurs formes. Il peut s'agir d'un élément <section>, d'un bloc (<bloc>, <toc>, <coordonnées>...) ou encore d'une source dans un élément <valves>.

La condition est basée sur l'état d'une ou plusieurs options.

Ces options peuvent être activées ou désactivées par différents moyens: des liens hypertextes, des conditions liées à l'Intranet et à la personne connectée, etc.

C'est l'attribut options placé sur la section optionnelle (<section>, <bloc>, <toc>, <coordonnées>, <input>...) qui donne la condition. Cette dernière est une combinaison logique de l'état d'une ou de plusieurs options (si l'option A est active ET que l'option B est inactive, etc.).

Couplées avec l'Intranet de l'ULB, qui peut activer ou non des options en fonction du profil de l'utilisateur connecté, les sections optionnelles permettent de créer des pages web personnalisées qui ne contiendront que l'information utile pour cet utilisateur (étudiant, personnel, enseignant, patgs...).

L'élément <section>

L'élément <section> permet de définir une section dans une page web, qui sera affichée de manière conditionnelle. Si la condition donnée par l'attribut options est vérifiée, le contenu de la section sera affiché, sinon ce contenu sera masqué.

Dans l'exemple qui suit, trois sections seront affichées de manière conditionnelles grâce à deux options option1 et option2. Ces deux options sont activables/désactivables par des liens hypertextes.

Les deux premières sections seront affichées respectivement lorsque l'option option1 et/ou l'option option2 sont activées. La troisième section ne sera affichée que lorsque les deux options sont désactivées (ou inexistantes), grâce à !option1,!option2 (le ! inverse la valeur d'une option, et la , exprime un ET et logique).


Exemple
<bloc style="cadre1" bords="arrondis">

   <section options="option1">
      <p>Ce texte n'apparaîtra que si l'option 1 est activée.</p>
   </section>
   
   <section options="option2">
      <p>Ce texte n'apparaîtra que si l'option 2 est activée.</p>
   </section>
   
   <section options="!option1,!option2">
      <p>Aucune des deux options n'est activée.</p>
   </section>
   
   <p>
     Option 1: <a cible="activer:option1">activer</a> - <a cible="désactiver:option1">désactiver</a>
   </p>
   <p>
     Option 2: <a cible="activer:option2">activer</a> - <a cible="désactiver:option2">désactiver</a>
   </p>
</bloc>

Ce qui donne:

Option 1: activer - désactiver

Option 2: activer - désactiver

Dans cet exemple, le contenu des sections est un simple paragraphe. On peut le remplacer par n'importe quel autre contenu autorisé à cet endroit-là (des blocs, des tables de matières, des images, etc.).

Cet élément <section> peut être placé là où un bloc est autorisé, mais également dans une table des matières, dans une liste, dans un tableau, dans un texte, etc.

Pour plus d'infos, voir:

Les blocs optionnels

Un bloc peut également être affiché de manière optionnelle grâce au même attribut options (c'est comme si le bloc était lui-même placé dans une section: <bloc options="...">...</bloc> est équivalent à <section options="..."><bloc>...</bloc></section>).

Cela fonctionne pour tous les types de bloc (<bloc>, <toc>, <coordonnées>, <form>, <input> etc.) sauf pour les <popup> (cela n'a pas de raison d'être dans le cas d'un popup).

Dans l'exemple ci-contre, trois blocs sont affichés de manière optionnelle grâce à l'attribut options et à deux options bloc1 et bloc2. Ces options sont activées/désactivées via deux liens hypertextes.

code de cet exemple
<bloc options="bloc1" style="colorBar3" bords="arrondis">
   <p>L'option bloc1 est active</p>
</bloc>
<bloc options="bloc2" style="colorBar3" bords="arrondis">						
   <p>L'option bloc2 est active</p>
</bloc>
<bloc options="!bloc1,!bloc2" style="colorBar3" bords="arrondis">						
   <p>Aucune des deux options n'est active</p>
</bloc>

<p>activer/désactiver: <a cible="inverser:bloc1">bloc1</a> - <a cible="inverser:bloc2">bloc2</a></p>

activer/désactiver: bloc1 - bloc2

Les sources optionnelles

Un élément <valves> permet d'afficher de l'informations provenant de plusieurs sources différentes. L'attribut options placé sur chaque source permet également de sélectionner l'une ou l'autre de ces sources de manière optionnelle.


Les options

Le contenu d'une section peut être montré ou caché à l'utilisateur grâce à une condition donnée par l'attribut options. Cette condition fait référence à une ou plusieurs options. Une option n'est rien d'autre qu'un identificateur qui peut représenter trois états:

  • inexistant: l'option n'a pas encore été créée (ni activée, ni désactivée);

  • activé: l'option a été activée lors de la dernière action la concernant;

  • désactivé: l'option a été désactivée lors de la dernière action la concernant.


Nul besoin de créer ou de déclarer une option. Il suffit de l'activer ou de la désactiver pour qu'elle se mette à exister (tant que ce n'est pas le cas, elle se trouve dans l'état inexistant).

Néanmoins, si vous désirez que l'option existe au moment de l'affichage de la page, ou si vous désirez qu'elle adopte un fonctionnement particulier, vous pouvez la déclarer dans un élément <options>.

Vous pouvez choisir librement l'identificateur d'une option (il doit commencer par une lettre, suivi d'autant de lettres, de chiffres, de - et de _ que vous désirez).

Pour activer/désactiver une option, il existe plusieurs possibilités:
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique