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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur 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 !

  2. The Ultimate GetElementsByClassNameDé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.

  3. 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).

  4. 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.

  5. 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).

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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;
        }
    }
    
  12. 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.

  13. 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.

  2. 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";
    }
    
  3. Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :

    function $( element ) {
        return document.getElementById( element );
    }
    
  4. 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 !

  5. 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.

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

  7. 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 !

  8. 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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “21 fonctions Javascript pour l'intégrateur web (et plus à venir…)”

  1. Franck dit :

    Bien au chaud dans mon delicious.

  2. Florent V. dit :

    Je fais mon marché pour ma toolbox Komodo. :)

  3. [...] 21 fonctions Javascript pour l’intégration, compilées par Bruno Bichet [...]

  4. Florent V. dit :

    Et je vois que tu fais ton marché en retour (Twitter pawaa). :D

  5. [...] post: Commentaires sur 21 fonctions Javascript pour l’intégrateur web (et plus à venir…) (In… Related ArticlesBookmarksTags Release history 1.0 1.0.0 1995-06-08 Officially called [...]

  6. [...] les mains dans le cambouis avec le sourire 21 fonctions Javascript pour l’intégrateur web (et plus à venir…) – [...]

  7. [...] 21 fonctions Javascript pour l’intégrateur web — Parce qu’il est parfois nécessaire de se passer des frameworks Javascript, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! [...]

  8. Je travaille avec un générateur de livres virtuels chinois, qui possède un dispositif d’inclusion de scripts JavaScript (sous forme d’un simple conteneur qu’il suffit de remplir) qui fonctionne chez le développeur (et j’en ai la preuve) et pas chez moi.

    Le test est simplissime…

    window.alert(« Hello, I am a Text! »);

    C’est a priori une disparité au niveau de l’environnement système… mais où chercher ?

    Quelqu’un a-t-il une hypothèse ?

    Récompense (symbolique) à la clef.

    Merci d’avance.

  9. pochettes d'album dit :

    facilitent la vie des développeurs web en leur permettant air max pas cher de manipuler le DOM les mains dans les poches

  10. facilitent la vie des développeurs web en leur permettant,Baskets Homme,Bien au chaud dans mon delicious.

  11. est toujours bon dit :

    mais je vous propose quand même cette liste impressionnantes de trouver nike blazer pas cher les éléments avec le même identifiant ou la même classe

  12. echosante dit :

    sélectionner ou désélectionner des checkbox d’un clic ;http://www.echosante.fr ouvrir une fenêtre popup ; avoir plusieurs boutons submit pour un formulaire ;

  13. digitalnectar dit :

    In case you are overweight, http://www.digitalnectar.fr/Ceinture-Gucci-pas-cher-ceinture-gucci-homme-ceinture-gucci-noir.html make an effort to slim down by exercising. This not only enhances your well-being; it’ll also ultimately direct to your own perspiration being minimized.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site