jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > resizehandle : une poignée pour agrandir la fenêtre de saisie

resizehandle : une poignée pour agrandir la fenêtre de saisie

lundi 19 mars 2007, par Fil

L’idée de ce plugin provient du projet Dotclear, qui dispose d’une méthode resize.js permettant d’agrandir les zones de saisie texte (textarea). Après que chtitux a intégré cette méthode dans les Crayons de SPIP, j’ai eu envie de la réécrire en jQuery.


La première chose à faire est de mémoriser notre textarea, sous forme d’un objet jQuery : var me = jQuery(this);.

Ensuite, nous allons créer la poignée (on l’ajoutera plus tard juste après l’élément qu’on souhaite agrandir) :

jQuery('<div class="resizehandle"></div>')

Un peu de CSS donne un aspect sympathique à cette poignée, ainsi qu’une taille qui permet de lui cliquer dessus :

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

On aura donc une image dans une div occupant toute la largeur disponible, et sur une hauteur de 16 pixels.

Sur cette poignée, on va ajouter un gestionnaire, qui se déclenchera sur l’événement mousedown.

Ce gestionnaire initialise deux variables : h, la taille de notre textarea au moment où l’on clique sur la poignée ; et y, la coordonnée verticale du clic :

var h = me.height();
var y = e.clientY;

On crée aussi, à ce moment-là (quand la souris est appuyée), deux gestionnaires des mouvements de la souris, qu’on va placer sur l’ensemble de la page via jQuery("html") (il est possible de faire un peu plus subtil, mais si on les place trop localement — par exemple sur la poignée ou sur la div parente — il est possible d’aller « trop vite » avec la souris ; les événements se produisent alors en-dehors de notre objet, ce qui fait que le script semble « lâcher prise »).

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);

Ce code demande donc à la page de suivre les mouvements de la souris (mousemove) et la levée du bouton de clic (mouseup).

Dans le premier cas (mousemove), on adapte simplement la taille de notre textarea de départ à la différence entre la coordonnée courante de la souris (e.clientY) et sa coordonnée initiale (stockée dans y), en conservant un minimum de 20 pixels.

Dans le second cas (mouseup), on supprime les gestionnaires du HTML, de manière à cesser de suivre la souris (jusqu’à la prochaine fois où elle appuiera sur notre poignée).

Dernière étape, on dépose cette poignée sous notre textarea, en l’entourant simplement d’une commande .after().

Le code final est factorisé sous forme de plugin, avec les habituels each(function(){})....

Répondre à cet article

1 Message


Derniers commentaires

Nouveautés sur le Web