Javascript non-obstructif

Avant d’entrer dans le vif du sujet, il est important de comprendre plusieurs concepts.

La mise en place de codes Javascript non-obstructif permet de faire fonctionner le site sans l’utilisation du javascript. (aujourd’hui presque tout le monde active le javascript ce qui n’est donc pas l’argument principal).

Cette technique permet surtout de garder le code xhtml propre et de l’utiliser pour ce dont il est conçu, c’est-à-dire, l’organisation du contenu.

Un code xhtml tout basique, il s’agît d’un bouton de formulaire de ce type :

<input type="button" name="youpi" value="Je suis un bouton" />

ce bout de code est sémantiquement correct, il décrit un bouton tel que spécifié dans les standards du W3C.

Mais nous aimerions que le design de celui-ci soit plus … disons …. attractif comme ça :

Et moi un beau bouton

Pour ce faire, il faut donc dynamiquement remplacer le code html du bouton par une balise de type lien. Nous en reparlerons, mais l’utilisation de la technique « sliding-doors » permet d’avoir un bouton redimentionnable.

Le framework jQuery permet facilement d’effectuer ce remplacement.

	  $(document).ready(function() {
        // dès que la page est chargée
        // pour chaque élément contenant la class "submitbutton"
       $('.submitButton').each(function(e){
          //récupéré les attributs suivants
         var val = $(this).attr('value');
         var formsend = $(this).attr('name');
         var bt_id = $(this).attr('id');
          // remplacer le bouton par un lien
         $(this).parent().html('<a href="javascript:void(0);" id="' + bt_id + '" class="bt_link"><b>'+val+'</b></a>').click(function(){
            // comportement du lien lors du clique
             $('form#'+formsend).submit();
           });

       });
     });

La propreté du code dans une page web, c’est surtout les avantages suivants :

Voir la démo

Pour aller plus loin