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

Articles probablement reliés

1 Trackback

  1. greg.rubyfr.net»Blog Archive » La couleur de l’Ajax… :

    […] Dans un autre poste, plus ancien, Sunny nous proposait de redécouvrir cursor:progress. […]

3 Commentaires

  1. 1 Oliv G. :

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

  2. 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. 3 Oliv G. :

    ahhhhhh ouais! Jquery rulezzzzzzz

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.