Intégration web

21 fonctions Javascript pour l’intégrateur web (et plus à venir…)

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions *standalone* sous la souris pour se faciliter l’intégration *cross-browser* ! Voici une sélection de plus de 21 scripts pour faire face à toutes les situations (ou presque) :

1. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax pour les débutants travaillant sur des petits projets : SimpleJS ne saurait être comparée avec Prototype ou jQuery ou d’autre framework professionnels. Çà tombe bien, c’est exactement ce que l’on cherche aujourd’hui ! Toutefois, vous y trouverez l’essentiel :

    $ajaxload()
    $ajaxreplace()
    $opacity()
    $shiftOpacity()
    $pulsate()
    $highlight()
    $textColor()
    $morphColor()
    $toggle()
    $blindup(), $blinddown()

Sans compter les plugins simpleslish.js (Slideshow, 1.6k) et simpleacco.js (effet accordéon, 1k).

1. addEvent — cette fonction écrite par John Resig, à l’origine de jQuery, a gagné le concours addEvent() recoding contest. Elle permet tout simplement d’attacher une fonction à un événement (*onload*, *onclick*, *onmouseover*, etc) :

function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj[‘e’+type+fn] = fn;
obj[type+fn] = function(){obj[‘e’+type+fn]( window.event );}
obj.attachEvent( ‘on’+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}

En prime, voici la fonction inverse, au cas où :

function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( ‘on’+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}

Quelques exemples d’utilisation :

addEvent( document.getElementById(‘foo’), ‘click’, doSomething );
addEvent( obj, ‘mouseover’, function(){ alert(‘hello!’); } );
addEvent( window, ‘load’, maFonction );

Le dernier exemple est idéal pour lancer une fonction au chargement de la page sans intrusion dans le code HTML !

1. The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment.

*getElementsByClassName(« info-links »);* — tous les éléments possédant une classe *info-links*,

*getElementsByClassName(« col », « div », document.getElementById(« container »));* — tous les éléments `div` contenus dans ù#container* et possédant la classe *col*,

*getElementsByClassName(« pince-me pince-moi »);* — tous les éléments avec les classes *pince-me* et *pince-moi*.

1. cssQuery — La fonction *cssQuery()* interroge le DOM via les sélecteurs CSS 1 et CSS 2 et une partie de CSS 3. Alternative à jQuery pour accéder aux éléments constitutifs du DOM quelque soit le navigateur !

`var tags = cssQuery(« body > div »);` sélectionne toutes les balises `div` descendants directement de `body`,

`images = cssQuery(« img », tags);` donne la liste des balises `img` présentes dans la variable *tags* vue plus haut,

Devinez-donc ce que donne `var argh = « p>a:first-child+input[type=text]~span »;` 🙂

Pendant que nous sommes chez Dean Edwards, profitez-en pour tester base2 un mini-framework Javascript intelligent (c’est Yves qui le dit sur twitter).

1. XHRConnection — Cette classe Javascript simplifie l’utilisation de l’objet XMLHttpRequest. Elle propose plusieurs méthodes pour gérer les données à envoyer en arrière-plan. Autrement dit, XHRConnection permet d’appréhender facilement AJAX. Nombreux exemples fonctionnels disponibles.

1. Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe *sfHover* sur un élément `li` pour émuler la pseudo-classe `:hover` pour Internet Explorer qui ne l’applique que sur les ancres `a`, notamment.

Léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style elle-même puisqu’il faut doubler le sélecteur `li:hover` avec la classe `li.sfHover`).

1. Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes `:hover`, `:focus`, `:active` et `:target` sur l’élément HTML que vous voulez :

`suckerfish(sfHover, « LI », « nav »);` pour appliquer `:hover` sur un élément `li` placé dans *#nav*.

`suckerfish(sfFocus, « INPUT »);` pour donner le *focus* aux éléments `input`.

1. DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets efficace avec plusieurs menus sur une même page ; la possibilité de faire un lien vers un onglet et la mise en place de liens *suivant* et *précédent* pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.

1. balance_columns — Script astucieux pour équilibrer des colonnes entre elles ! Ce script est non-intrusif : les identifiants des blocs à équilibrer se placent dans l’en-tête du script et il se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.

1. iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Le seul script à ma connaissance à prendre en charge les propriétés *background-repeat* et *background-position* avec iepngfix version 2.0 Alpha 3

Notes : gardez un oeil sur PNGHack de Yves Van Goethem !

Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.

1. FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code :

FlashReplace.replace(« flash-content », « /flash/my-movie.swf », « flash-element-id », 800, 200);

En option : possibilité de préciser la version de Flash requise ou d’ajouter des paramètres à votre animation Flash.

1. ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript (et de jQuery pour la majorité des solutions) pour fixer 12 problèmes liés aux navigateurs. Via Zeubeubeu.

function changeClass(oldClass, newClass) {
var elements = document.getElementsByTagName(« * »);
for( i = 0; i < elements.length; i++ ) {
if( elements[i].className == oldClass ) elements[i].className = newClass;
}
}

1. Effets lightbox sans framework — L’ouverture de « nouvelles fenêtres » laisse peu à peu la place aux effets lightbox. Voici donc plusieurs solutions simples et efficaces pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

1. 9 Javascript à ne pas manquer — sélectionner ou désélectionner des *checkbox* d’un clic ; ouvrir une fenêtre *popup* ; avoir plusieurs boutons *submit* pour un formulaire ; émuler le bouton retour du navigateur ; remplir les valeurs d’un menu *select* selon les choix effectués avec un premier menu, etc.

Voilà pour les 21 premières fonctions. Comme le web est vaste et qu’il ne s’arrête jamais, cette liste va s’allonger au fil de l’eau avec d’autres scripts bien intéressants 😉

1. styleswitcher.js — Proposez des feuilles de style alternatives aux visiteurs.

1. maxWidthFixForIE6.js — Emuler la propriété `max-width` pour IE6 :

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
var container = document.getElementById(« container »);
container.style.width = (document.body.clientWidth > 1100)? « 1100px » : « auto »;
}

1. Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :

function $( element ) {
return document.getElementById( element );
}

1. dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko en version compressée seulement !

1. DOMAssistant — Cette bibliothèque va un peu plus loin que *dLite* et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’élément par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

$(« #container input[type=text] »);

$(« #navigation a »).addEvent(« click », myFunc);

$(« #news-list »).load(« updated-news.php »);

Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.

1. nanotabs — Version légère de idTabs sans jQuery pour faire des menus à onglets à partir de simples listes.

1. ul2finder — Listes dynamiques complexes pour réaliser un menu avec un comportement similaire au Finder de Mac OS X : un clic sur un élément affiche une colonne à côté pour le sous-menu, et ainsi de suite. Par le génial et prolifique Chris Heilmann !

1. Webdesign moderne avec Javascript — Bon, se passer des frameworks comme jQuery, c’est bien, mais je vous propose quand même cette liste impressionnantes de 47 scripts, fonctions ou plugins (jQuery, Mootools, YUI, etc.) pour améliorer l’expérience utilisateur 😉

### Conclusion

Même s’il ne s’agit pas d’un ensemble de fonction « cohérent » dans le sens où certains scripts ont des fonctionnalités redondantes, ces fonctions devraient trouver une place dans votre bibliothèque. J’ai fait l’impasse sur les frameworks mais mon opinion est faite depuis longtemps : Prototype ou jQuery ont redonné ses lettres de noblesse à Javascript.

Publié le par Bruno Bichet