Framework JQuery pour écrire du Javascript non-intrusif

Mise en place de plugins trouvés sur jquery.info

En me balladant sur le site, je n’ai pas résisté à l’envie de tester les deux scripts suivants :

resizehandle : une poignée pour agrandir un textarea

Après les commentaires concernant la hauteur du textarea pour améliorer la saisie des textes longs, j’ai mis jQuery à contribution avec resizehandle.

Il suffit de suivre les indications et d’afficher le code source de l’exemple, mais comme vous êtes là, je vous donne le code Javascript à placer idéalement dans un fichier externe. Le bonheur est dans le pre : commençons par installer la bibliothèque :

<script type="text/javascript" src="/ecrire/js/jquery-latest.pack.js"></script>

Vous avez remarqué le terme pack ? Et oui, jQuery existe en deux versions : une pour comprendre comment ça marche (env. 55 ko), et une version compressée (environ 20 ko), à placer sur votre serveur de production… C’est donc vraiment léger.

Ensuite, voici le code à placer également dans un autre fichier dans lequel vous mettrez idéalement toutes les fonctions jQuery que vous trouverez :

/*  * resizehandle.js (c) Fil 2007, plugin pour jQuery ecrit  * a partir du fichier resize.js du projet DotClear  * (c) 2005 Nicolas Martin & Olivier Meunier and contributors  */
jQuery.fn.resizehandle = function() {
   return this.each(function() {
     var me = jQuery(this);
     me.after(
       jQuery('<div class="resizehandle"></div>')
       .bind('mousedown', function(e) {
         var h = me.height();
         var y = e.clientY;
         var moveHandler = function(e) {
           me.height(Math.max(20, e.clientY + h - y));
         };
         var upHandler = function(e) {
           jQuery('html')
           .unbind('mousemove',moveHandler)
           .unbind('mouseup',upHandler);
         };
         jQuery('html')
         .bind('mousemove', moveHandler)
         .bind('mouseup', upHandler);
       })
     );
   });
 }

$(document).ready(function() {
   $("#c_content")
   .resizehandle();
 });

Reste à ajouter une déclaration CSS à placer dans votre feuille de style :

.resizehandle {
     background: transparent url("http://www.jquery.info/images/resizer.png") no-repeat scroll 45%;
     cursor: s-resize;
     font-size: 0.1em;
     height: 16px;
     width: 100%;
}

Comme vous le voyez, j’ai gardé l’icône resizer.png d’origine, mais rien ne vous empêche de la changer. Ce que je vais faire également sous peu.

Equilibrer les colonnes

Pendant que j’y étais, j’en ai profité pour mettre en place les quelques lignes nécessaires pour équilibrer une ou plusieurs colonnes filles en fonction de la hauteur du bloc qui les contient, et auquel on a appliqué la classe CSS qui va bien.

En l’occurence, je voulais que la hauteur de la sidebar s’allonge en fonction de la colonne contenant les billets afin que mon zebra background web 2.0 suive le mouvement

Pour cela, il faut qu’une balise div englobe les éléments que l’on désire équilibrer. J’ai donc ajouté une <div class= »equilibre »> qui sert de container pour div id= »content »> et div id= »sidebar »>.

$(document).ready(function() {
    $(".equilibre").each(function() {
        var h=0;
        $(">*", this)
        .each(function() { h=Math.max(h,this.offsetHeight);
    })
        .css({'height': h+'px'});
    });
});

Rien qu’avec ces quelques lignes, vous rentabilisez vos 20 ko et pouvez débarrasser la table 😉 Enfin… il y a des comportements indésirables qui ne sautent pas aux yeux sur le moment. Par exemple, sur Firefox, l’équilibrage des colonnes s’effectue correctement lors du premier chargement de la page, mais la hauteur ne s’adapte pas ensuite lorsque la liste des billets est réduite…

Ce comportement vient peut-être de l’image de fond de la sidebar et au fait que le DOM est considéré comme chargé même si toutes les images ne le sont pas. En même temps comme c’est tout l’intérêt de spécifier $(document).ready(function()… J’ai essayé le plugin vjustify qui me semblait une bonne alternative, mais le problème reste entier. Je suis revenu au bon vieux background en largeur qui se répète… Et ça le fait bien 😉 Si vous avez une idée sur la question, n’hésitez pas !

*Sur la page plugin de jquery.com »*