Sunfox

Le journal de Sunny Ripert

Rédécouvrons cursor:progress

L’interface utilisateur passe aussi par la forme du curseur. Peu utilisée en CSS, la propriété cursor regorge pourtant de valeurs dont on peut se servir pour aider l’utilisateur dans une application web (wait progress help default pointer text vertical-text crosshair move -moz-grab -moz-grabbing -moz-copy -moz-alias -moz-zoom-in -moz-zoom-out -moz-cell -moz-context-menu not-allowed no-drop nw-resize n-resize se-resize sw-resize s-resize e-resize w-resize ne-resize col-resize row-resize).

Par exemple, pour indiquer qu’un chargement a lieu via Ajax, plutôt que d’afficher une image de loader animée, un style CSS peu suffire :

.loading, .loading a, .loading input, .loading textarea {
	cursor: progress;
}

Ne reste plus qu’à appliquer la classe loading au body dès que la page fait un appel Ajax ou un long traitement.

Si vous utilisez Prototype ajoutez ces quelques lignes pour que la classe soit appliquée automatiquement tant qu’un appel Ajax a lieu :

Ajax.Responders.register({
  onCreate: function() {
    $$('body').first().addClassName('loading');
  },
  onComplete: function() {
    if (Ajax.activeRequestCount == 0)
      $$('body').first().removeClassName('loading');
  }
});

Écrit le 23 avril 2008 à 11h30, dans ajax, css, javascript, prototype, ui

Articles probablement reliés

Boink

3 Commentaires

1 Oliv G. :

Eheh, c’est à bookmarker dans un coin et c’est sympa à utiliser effectivement dans des fonctions javascript :)

2 Sunny :

Le même morceau de JavaScript pour jQuery cette fois, bien plus léger :

$(window).ajaxStart(function() { $('body').addClass('loading') });
$(window).ajaxStop(function() { $('body').removeClass('loading') });

3 Oliv G. :

ahhhhhh ouais! Jquery rulezzzzzzz

Commenter

Sunny Ripert

est un développeur web vivant à Paris, France.

CV, me contacter

Textes et contenus sous licence Creative Commons.
Site crée par mes soins. Questions, informations ? Contactez-moi.