Sunfox


Articles mot-clétés prototype

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

Prototype and scriptaculous

novembre 8th, 2007 .

[Couverture du livre 'Prototype and script.aculo.us']

Le livre Prototype and scriptaculous: You never knew JavaScript could do all this bungee jumping, de Christophe Porteneuve est sorti ! Il est totalement à jour avec Prototype 1.6 et script.aculo.us 1.8 fraîchement sortis également.

Cela a été un réel plaisir d’être relecteur technique sur ce livre. C’est une excellente référence pleine de bons exemples d’utilisations de ces deux librairies JavaScript immanquables. Un bon livre de chevet de développeur Web ! :)

Gouttes


:D Sunny Ripert

est un développeur web vivant à Paris. Contact


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