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" />

How Does it Work?

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.

Demo: http://www.duarte.com/starry/

Download: Demo: http://www.duarte.com/starry/

Source: http://www.duarte.com/starry/

Related Listings:

1. Mobile Tooltip Widget I am making an Ajax application using GWT and I...
2. YUI – Dialog Alert Widget This widget is designed to be a dropin replacement for...
3. Dojo Fisheye Widget Dojo Fisheye Widget Quantcast A fisheye effect based on Dojo...
4. AJAX Rating Stars Demo AJAX Rating Stars Demo Installation Option. maxRating: integer. The maximum...
5. Rating Widget using Ext Core 3.0 We are very proud to announce the final release of...

Do you like this post?

Email: