Unobtrusivelib est un ensemble de petits comportements javascripts dits "non-intrusifs", dans le sens où ils ont pour but de remplacer la présence de script dans le corps de la page, comme pour ouvrir une popup ou vider un champ de formulaire au clic.
Pour activer tous les modules, il faut appeler la méthode jQuery.unobtrusivelib() au chargement de la page :
jQuery(function(){
jQuery.unobtrusivelib();
});
Il est également possible de ne lister que les modules utilisés dans un tableau :
jQuery(function(){
jQuery.unobtrusivelib(["inputAutoFocus", "inputAutoClear", "popup", "external"]);
});
Description des différents modules :
Permet de donner le focus à un champ de formulaire au chargement.
Le contenu du champ suivant devrait prendre le focus au chargement de la page :
<input type="text" name="test" class="autofocus test test" />
Permet de vider le contenu d'un champ de formulaire au focus.
Le contenu du champ suivant devrait se vider lorsqu'il reçoit le focus :
Ce comportement ne se déclenche qu'au premier focus.
<input type="text" name="test" value="Entrez une valeur..." class="autoclear test test" /> <textarea rows="5" cols="10" class="autoclear test test">Entrez une valeur...</textarea>
Au clic sur un lien contenu dans ce paragraphe, une popup devrait s'ouvrir.
Voici la syntaxe d'un lien ouvrant une popup :
<a href="http://www.example.com" rel="popup[400-200]">Example</a>
Le premier nombre indique la largeur, le second la hauteur (en pixels).
Si l'utilisateur n'utilise pas Javascript ou s'il ouvre le lien dans un nouvel onglet, le lien fonctionnera normalement et renverra vers la popup.
Le trop célèbre attribut target="_blank" sur un lien n'est plus valide depuis XHTML 1, pour de bonnes raisons.
Unobtrusivelib permet néanmoins de reproduire ce comportement en conservant la validité du document, s'il n'est pas possible de faire autrement.
Le lien contenu dans cette phrase devrait s'ouvrir dans une nouvelle fenêtre (ou un nouvel onglet) de votre navigateur.
L'attribut rel peut également contenir d'autres valeurs séparées par des espaces, pour appliquer des microformats par exemple.
Voici la syntaxe d'un lien ouvrant une nouvelle fenêtre :
<a href="http://www.example.com" rel="external">Example</a>
Unobtrusivelib - compressé (1.3ko)
Unobtrusivelib - source (1.8ko)
Vous pouvez me contacter à l'adresse suivante : contact@pierrebertet.net