Hot!Ajax

Rating Stars for prototype

Thursday, 22 November 2007

Starbox allows you to easily create all kinds of rating boxes using just one PNG image

by:nickstakenburg

download:http://www.hotajax.org/download/otherjs/starbox.zip

demo:

How to use

Download and include Prototype 1.6 in your header. If you want to use effects, also add Scriptaculous 1.8. Make sure you are using the stable releases and not the release candidates or preview releases. After both are included, add Starbox

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

Make sure these images and your own stars are in the same directory as starbox.css default.png, bigstar.png, pointy.png, default_dotted_background.gif

After that creating a starbox is as easy as:

new Starbox(element, rating);

More advanced Starboxes can be made using a thirth parameter with options, a few examples:

new Starbox(element, rating, { stars: 10, buttons: 20, max: 10 }); 

new Starbox(element, rating, { onRate: yourAjaxSaveFunction, inverse: true });

This are all the options you can use:

new Starbox(    element,                  // the id of your element 

rating,                   // rating to start with 
{ 
background: false,      // or a css background to overwrite the one in class 
buttons: 5,             // the number of buttons (choices) 
className : 'default',  // or your own classname 
color: false,           // color of the colorbar 
duration: 0.6,          // duration of the effect across the bar, if used 
effect: { mouseover: false, mouseout: true } // or your own 
hoverClass: 'hover',    // or your own classname 
hoverColor: false,      // color of the colorbar when hovered 
identity: false,        // used on the return info 
indicator: false,       // adds an indicator after the starbox using a string, 
// #{average}, #{max} and #{total} can be used. 
// example: '#{average}/#{max} out of #{total} votes' 
inverse: false,         // true, false 
locked: false,          // true, false 
lockOnRate: true,       // true, false 
max: 5,                 // maximum rating, that of the last star 
onRate: false,          // or function(element, info){} 
// info = { identity: identity, 
//          rating: rating, 
//          average: average, 
//          max: max, 
//          total: total 
//        } 
overlay: 'default.png', // or other png in same folder as starbox.css 
stars: 5,               // the amount of stars 
total : 0               // the amount of votes cast    }  );

Styling

You can style your starboxes with CSS, in starbox.css you can find a few examples on how to do this. Note that the only thing you can not set through CSS is the overlay image.

This is one of the examples from starbox.css:

.starbox .default { background: #cccccc; } 
.starbox .default .colorbar { background: #1e90ff; } 
.starbox .default .hover .colorbar { background: #ffcc1c; }

And to get a better idea of how Starbox can be styled, a view of it's structure:

<p><div class="starbox" id="yourId">
<div class="stars default"><!-- default or your className --> </p>
<p><div class="hover"><!-- has hover class on mouseover --> </p>
<p><div class="colorbar">
<div><!-- stars --></div></div></div></div> </p>
<p><div class="indicator"><!-- indicator text if used --></div></div> </p>

Set as favorite

Bookmark

Email This

Comments (0) add comment