JS et présentation dynamique

Avec le javascript, on peut changer les classes associées à une balise. Les applications sont multiples, et on va en voir 2 : un menu déroulant et la coloration en rouge des champs de formulaires qui ne sont pas bien remplis.

Menu déroulant

Source de la page (xhtml)

Feuille de style

Vous avez besoin d'une image : image pour derouler le menu

Règle de nommage : si le lien 1 a un sous menu, la balise ul du sous menu est appelée (id) "sousmenu1", et l'image correspondante (pour déérouler le menu) a un id="lien1"

Il faut céer un fichier nommé "presentation.js". On créera la fonction "cache_montre()" qui attend comme paramètre le n° du menu

Il faut simplement créer une fonction qui change l'attribut de classe des élements "lien1" et "sousmenu1" lors du clic sur l'image. Pour cela, dans le code XHTML, lors du clic, la même fonction est appelée, avec "1" comme parametre.

<a href="#" id="lien1" class="cache_montre" onclick="cache_montre('1'); return false;">&#160;</a>

Par défaut, le menu est déroulé, il est roulé au chargement de la page par JS, ce qui permet aux utilisateurs n'ayant pas JS d'accéder au sous menu.

<body onload=" cache_montre('1'); cache_montre('1.3'); cache_montre('2'); cache_montre('2.3'); cache_montre('4');">

La fonction appelée est composée de 3 parties :

Coloration des champs non valides

On veut indiquer les champs non valides du formulaire par cette méthode plutôt que par une fenêtre.

C'est exactement la même manière de procéder que pécedemment : il faut changer la classe des champs de formulaires. Sauf que cette fois-ci, pas besoin de l'id de l'objet à changer.