Starify

Starify is a wrapper around github.com/wbotelhos/raty.

Raty is a jQuery extension that lets you turn elements into star ratings.

Starify takes it one step further and lets you specify a secondary element where the rating value will be displayed as you hover over each star. I built this because I wanted to see the value of the star as I hovered over it, for example when I hover over 3/5 stars, I wanted to word “Good” to appear next to the star rating.

Usage

To use starify just pass a config into the new function.

$.starify(config);

Config

Starify supports all the config options of Raty, plus:

el    // the jQuery element you are turning into stars
tipEl // the jQuery element where the tip is placed

Here is an example config:

var config = {
  el : $('#stars'),
  tipEl : $('#tips'),
  hintList:   ['Bad', 'Poor', 'Neutral', 'Good', 'Great'],
	size:       24,
	starHalf:   'star-half-big.png',
	starOff:    'star-off-big.png',
	starOn:     'star-on-big.png',
	scoreName : 'score',
	width: 160,
	click : function(v) {
		alert('Hi, my value is ' + v);
	}
}
$.starify(config);

Here is a barebones config, remember that this still uses all of Raty’s defaults if you don’t specify otherwise:

var config = {
  el : $('#stars'),
  tipEl : $('#tips')
}  
$.starify(config);

This will convert #stars into a star rating, and as you hover over each star, it will display the value in #tips.