The Starry Widget is a simple class that will enable you integrate star-rating fields into your forms with little or no Javascript knowledge.

If you want to make your own custom stars, I've included stars.psd in the zip file so you can modify the stars image yourself.

Upload the scripts and the image files to your website. Add these three lines of code into your HTML HEAD tag. You may need to change the src path depending on how your site is structured.



<script type="text/javascript" src="prototype.lite.js"></script>
 
<script type="text/javascript" src="stars.js"></script>

<link rel="stylesheet" href="stars.css" type="text/css" />

Place stars.gif in the same directory as your javascript and you are ready.

Starry Widgets automatically build star based form elements in your HTML wherever you place the code snippets. This way you can use them in a typical form without having to do any special Javascript code or ajax. To specify the name of this form element, give the Starry widget a name property.

<script>
 new Starry('id_of_container', {name:"name_of_hidden_form_field"}
</script>

Paste this into the HTML where you want the stars to appear. The Javascript will automatically create a form element just like this:

<input type="hidden" name="name_of_hidden_form_field" value="0" />

To use the starry widgets in a form, just put your starry code inside of a FORM tag so that when your users submit the form, the values of the widget will be added to the POST variables.

There are a lot of customizable features which you can change to get the exact look and feel you need in your form.

Options

The second argument when declaring a new Starry object is an object that lets you configure options that will deviate from the defaults.

Here are the options which you can set:

name: the input name that will be used for this widget. Default is "starry##" where ## is an iterating ID number.

sprite: set this URI path to use an alterate graphic ['path']. Default is "duarte_stars.gif"

width: the width of the sprite in pixels[int]. Default is 14

height: the height of a single frame of the sprite in pixels [int]. Default is 20

startAt: set a starting value for the starry set [int]. Default is 0

maxLength: the size of the starry set [int]. Default is 5

multiplier: set the value of a star [int]. Default is 1

showNull: you can choose to not have the null option [true, false]. Default is true

align: horizontal alignment ['left', 'right']. Default is left

feedback: show the live feedback box [true, false]. Default is false.