Skip to content
lorenzos edited this page Jan 30, 2011 · 3 revisions

Examples rule! See also Docs.

JS sample:

	// Basic usage, give only form name or ID
	var basicRating = new MooStarRating({ form: 'basic' });
	
	// Event callback
	basicRating.addEvent('click', function (value) {
		alert("Selected " + value);
	}); 
	
	// If you want more control, you can use some options
	var customRating = new MooStarRating({
		form: 'custom',
		radios: 'my_rating',                // Radios name
		half: true,                         // That means one star for two values!
		imageEmpty: 'my_star_empty.png',    // Different image
		imageFull:  'my_star_full.png',     // Different image
		imageHover: 'my_star_hover.png',    // Different image
		tip: 'Rate [VALUE] / 3.0',          // Mouse rollover tip
		tipTarget: $('simpleTip')           // Tip element
	}).addEvent('click', function (value) {
		alert("Selected " + value);
	});

HTML code:

	<!-- Basic form with "rating" radios -->
	<form name="basic">
	    <input type="radio" name="rating" value="1">
	    <input type="radio" name="rating" value="2">
	    <input type="radio" name="rating" value="3">
	    <input type="radio" name="rating" value="4">
	    <input type="radio" name="rating" value="5">
	</form>
	
	<!-- Here radios have a default value, 1.5 -->
	<form name="simple">
	    <label>Some options:</label>
	    <input type="radio" name="my_rating" value="0.5">
	    <input type="radio" name="my_rating" value="1.0">
	    <input type="radio" name="my_rating" value="1.5" checked>
	    <input type="radio" name="my_rating" value="2.0">
	    <input type="radio" name="my_rating" value="2.5">
	    <input type="radio" name="my_rating" value="3.0">
	    <span id="simpleTip"></span>
	</form>
Clone this wiki locally