Starbox, le star-rater simple d’emploi

Les star-raters, ce système permettant au visiteurs d’un site web de voter en cliquant sur des petites étoiles indiquant le degré d’appréciation, ont le vent en poupe. Seulement voilà: mettre en place un tel système n’est pas toujours à la portée du néophyte. Grâce à Starbox, il est possible de mettre en place ce système rapidement et efficacement.

Construit autour de la désormais célèbre librairie JS Prototype, Starbox se présente sous la forme d’un fichier Javascript et d’une css à linker à votre document html. L’archive téléchargeable contient également quelques images qui dans la plupart des cas, correspondront à l’usage que l’on souhaite en faire.
Outre sa grande simplicité, j’ai fortement apprécié la facilité avec laquelle Starbox permet d’envoyer une requete Ajax: il suffit d’indique, dans le paramètre onRate, la fonction js à appeller pour lancer la requête.

Utilisation de base

La première chose à faire et de lier le fichier starbox.js et starbox.css ainsi que les librairies prototype et scriptaculous (si vous souhaiter utiliser les effets) à votre document html, comme montré ci-dessous:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/starbox.js'></script>
<link rel="stylesheet" type="text/css" href="css/starbox.css" />

Ensuite, il vous faudra éditer le fichier starbox.js et renseigner le chemin des images. Recherchez cette ligne

overlayImages: '../images/starbox/',

et modifier le chemin à votre convenance.
Pour afficher une Starbox, insérez simplement le code suivant dans votre fichier html:

<div id='id_element'></div>
<script type='text/javascript'>
     new Starbox('id_element', 1);
</script>

Le premier paramètre est l’id de l’élément à transformer en Starbox, le second est le nombre auquel commencera la notation.

Un grand nombre d’options sont disponibles et permettent de paramètrer finement le Starbox. Voyez pour celà le site du projet, qui explique également comment utiliser starbox.css pour styler votre Starbox à votre guise.

Un bien beau projet, qui rendra de fiers services au développeurs soucier de réutiliser du code open-source plutot que de toujours réécrire les mêmes fonctions. Merci, Nick Stakenburg!