Sunfox


Articles mot-clétés ui

Rédécouvrons cursor:progress

avril 23rd, 2008 , 4 commentaires.

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

:D Sunny Ripert

est un développeur web vivant à Paris. Contact


Textes et contenus sous licence Creative Commons. Site propulsé par WordPres