MooRating

Rating star using Mootools.

As unregisted user cannot download the attachment, so I delete it.

Tested in Mozilla Firefox and IE 7.0.

js
[code]
/*
* Rating star using Mootools.
*
* Modified from Dynamic Rating stars @copyright 2006 Beau D. Scott
* http://beauscott.com
*
* Note:valueBox must use continuous integers.If not, there could be some bugs.
* messageBox and valueBox keys must begin from zero.
*/
Rating = new Class( {

initialize : function(options) {

this.options = $extend( {
bindField : null,
maxRating : 5,
container : null,
imageDirectory : "images/",
callback : null,
actionURL : null,
value : 0,
locked : false,
useOpacityStyle : true,
messageBox : $H( {
0 : "Poor",
1 : "Nothing special",
2 : "Worth watching",
3 : "Pretty cool",
4 : "Awesome!"
}),
valueBox : $H( {
0 : 1,
1 : 2,
2 : 3,
3 : 4,
4 : 5
})
}, options || {});

if (this.options.messageBox.length != this.options.maxRating
|| this.options.valueBox.length != this.options.maxRating) {
alert("messageBox's length and valueBox's length must be equal to maxRating");
return;
}

/**
* hover and empty ratings imageSrc.
*/
this.hoverImages = {
EMPTY : this.options.imageDirectory + "empty.gif",
HALF : this.options.imageDirectory + "hover-half.gif",
FULL : this.options.imageDirectory + "hover.gif"
};

/**
* preload images
*/
for (var x in this.hoverImages) {
var y = document.createElement("img");
y.src = this.hoverImages[x];
}

/**
* selected and empty ratings imageSrc.
*/
this.selectedImages = {
EMPTY : this.options.imageDirectory + "empty.gif",
HALF : this.options.imageDirectory + "selected-half.gif",
FULL : this.options.imageDirectory + "selected.gif"
};
/**
* preload images
*/
for (var x in this.selectedImages) {
var y = document.createElement("img");
y.src = this.selectedImages[x];
}

if ($defined(this.options.container)) {
this.container = $(this.options.container);
} else {
this.id = "ratecontainer" + Math.random(0, 10000);
document.write('<span id="' + this.id + '"></span>');
this.container = $(this.id);
}

this.initialized = false;
this.rated = false;
this.ratings = [];
this.value = -1;
this.locked = this.options.locked ? true : false;
this.useOpacityStyle = this.options.useOpacityStyle ? true : false;

this.display();
this.setValue(this.options.value);
this.initialized = true;
},

display : function() {
for (var i = 0;i < this.options.maxRating; i++) {
var rating = document.createElement("img");
rating.src = this.locked
? this.selectedImages.EMPTY
: this.hoverImages.EMPTY;
rating.style.cursor = "pointer";
rating.title = this.options.messageBox.get(i);
if (!this.locked) {
rating.addEvent("mouseover", this.hover.bind(this));
rating.addEvent("click", this.rate.bind(this));
rating.addEvent("mouseout", this.clear.bind(this));
}
this.ratings.push(rating);
this.container.appendChild(rating);
}
},

setValue : function(val) {
if (this.locked && this.initialized)
return;

// iterate on options.valueBox to search key for val.

for (var i = 0;i < this.options.valueBox.length; i++) {
var value = this.options.valueBox.get(i);
if (value == val + .5) {
this.value = i - .5;
break;
} else if (value == val) {
this.value = i;
break;
}
}
/*
* this.options.valueBox.each(function(value, key) { if (value == val +
* .5) { this.value = key - .5; } else if (value == val) { this.value =
* key; } }, this);
*/
if (this.options.bindField) {
$(this.options.bindField).value = val;
}
if (this.initialized) {
if (this.options.actionURL) {
// ajax submit.
new Ajax(this.options.actionURL + val, {
method : "get",
onComplete : this.options["callback"]
}).request();
} else if (this.options.callback) {
this.options["callback"](val);
}
}
this.clear();
},

hover : function(ev) {
if (this.locked)
return;
var rating = new Event(ev).target;
var greater = false;

this.ratings.each(function(el) {
el.src = greater ? this.hoverImages.EMPTY : this.hoverImages.FULL;
if (rating == el) {
greater = true;
// TODO use opacity style, maybe more beautiful styles should be
// added.
if (this.useOpacityStyle) {
var fx = new Fx.Style(el, "opacity", {
duration : 500,
wait : false
});
fx.start(.5, 1);
}
}
}, this);
},

rate : function(ev) {
if (this.locked)
return;
var rating = new Event(ev).target;
this.rated = true;

this.ratings.some(function(el, i) {
if (el == rating) {
this.setValue(this.options.valueBox.get(i));
return true;
}
}, this);
},

clear : function(ev) {
if (this.locked && this.initialized)
return;
var greater = false;
this.ratings.each(function(el, i) {
if (i > this.value)
greater = true;
if ((this.initialized && this.rated) || this.value == -1)
el.src = greater ? (this.value + .5 == i)
? this.hoverImages.HALF
: this.hoverImages.EMPTY : this.hoverImages.FULL;
else
this.ratings[i].src = greater ? (this.value + .5 == i)
? this.selectedImages.HALF
: this.selectedImages.EMPTY : this.selectedImages.FULL;
}, this)
}
});
[/code]


Usage:
[code]
<script>
var rating = new Rating({
value:0.5,
locked:false,
bindField:'test',
callback:showRate
});

function showRate(val){
rating.locked=true;
}
</script>
[/code]