一段不错的js类定义
var ImgRating=function(options){
options={
atagClass: options.atagClass || "rating", // a tag class
imgGray: options.imgGray ||"inc/icon_star_1.gif", // gary star
imgColor: options.imgColor ||"inc/icon_star_2.gif", // color star
imgPre: options.imgPre || "star_", // image pre
spanId: options.spanId || "myRating", // the rating wrap tag id <span>
valueArea: options.valueArea || "value_area", // the value area id
cleanLabel:options.cleanLabel || "clean_label"
};
this.rating='';
this.graySearch=new Image();
this.lightSearch=new Image();
this.init=function(){
this.graySearch.src="fileadmin/templates/images/search_gray.gif";
this.lightSearch.src="fileadmin/templates/images/search_light.gif";
// if the rating wrap no exist the exit;
var ratingSpan=document.getElementById(options.spanId);
if(!ratingSpan) return;
this.aTags=this.getElementsByClass(options.atagClass,"a",options.spanId);
//document.getElementById(options.valueArea).value='';
ratingSpan.ImgRating=this;
// bind onmouseout to the wrap
ratingSpan.onmouseout=function(){
//alert(options.valueArea);
//alert(document.getElementById(options.valueArea).value);
this.ImgRating.rating=document.getElementById(options.valueArea).value;
for(var i=1;i<=this.ImgRating.rating;i++)
document.getElementById(options.imgPre + i).src=options.imgColor;
}
this.clean_label=document.getElementById(options.cleanLabel);
this.clean_label.ImgRating=this;
this.clean_label.onclick=function(){
this.ImgRating.cleanRating();
}
// loop the a tag and binding event
for(var i=0; i<this.aTags.length; i++)
{
this.aTags[i].ImgRating=this;
this.aTags[i].onmouseover=function(){
this.ImgRating.grayStars();
this.ImgRating.colorStars(this);
};
this.aTags[i].onmouseout=function(){
this.ImgRating.cleanStar(this);
};
this.aTags[i].onclick=function(){
this.ImgRating.setRating(this)
}
}
};
this.grayStars=function(){
for(var i=1;i<6;i++)
{
document.getElementById(options.imgPre + i).src=options.imgGray;
}
};
this.colorStars=function(element){
for(var i=1;i<=element.rel;i++)
{
document.getElementById(options.imgPre + i).src=options.imgColor;
}
};
// when the mouse over remove the color star from the without rating star
this.cleanStar=function(element){
for(var i=1;i<=element.rel;i++)
{
if(i<=this.rating) continue;
document.getElementById(options.imgPre + i).src=options.imgGray;
}
};
// when you click on a star then rating
this.setRating=function(element){
this.rating=element.rel;
document.getElementById(options.valueArea).value=this.rating;
//alert(document.getElementById(options.cleanLabel));
document.getElementById(options.cleanLabel).src=this.lightSearch.src;
};
// clean all the rating ,only for my project
this.cleanRating=function(){
this.rating='';
this.grayStars();
document.getElementById(options.valueArea).value='';
document.getElementById(options.cleanLabel).src=this.graySearch.src;
};
// a method for get all the star <a> tag, it would be better put it in the uility package.
this.getElementsByClass=function(clsName,htmltag,parenNodeId){
var arr = new Array();
var theParentNode=document.getElementById(parenNodeId);
var elems = theParentNode.getElementsByTagName(htmltag);
for ( var cls, i = 0; ( elem = elems[i] ); i++ ){
if ( elem.className == clsName ){
arr[arr.length] = elem;
}
}
return arr;
}
};
options={
atagClass: options.atagClass || "rating", // a tag class
imgGray: options.imgGray ||"inc/icon_star_1.gif", // gary star
imgColor: options.imgColor ||"inc/icon_star_2.gif", // color star
imgPre: options.imgPre || "star_", // image pre
spanId: options.spanId || "myRating", // the rating wrap tag id <span>
valueArea: options.valueArea || "value_area", // the value area id
cleanLabel:options.cleanLabel || "clean_label"
};
this.rating='';
this.graySearch=new Image();
this.lightSearch=new Image();
this.init=function(){
this.graySearch.src="fileadmin/templates/images/search_gray.gif";
this.lightSearch.src="fileadmin/templates/images/search_light.gif";
// if the rating wrap no exist the exit;
var ratingSpan=document.getElementById(options.spanId);
if(!ratingSpan) return;
this.aTags=this.getElementsByClass(options.atagClass,"a",options.spanId);
//document.getElementById(options.valueArea).value='';
ratingSpan.ImgRating=this;
// bind onmouseout to the wrap
ratingSpan.onmouseout=function(){
//alert(options.valueArea);
//alert(document.getElementById(options.valueArea).value);
this.ImgRating.rating=document.getElementById(options.valueArea).value;
for(var i=1;i<=this.ImgRating.rating;i++)
document.getElementById(options.imgPre + i).src=options.imgColor;
}
this.clean_label=document.getElementById(options.cleanLabel);
this.clean_label.ImgRating=this;
this.clean_label.onclick=function(){
this.ImgRating.cleanRating();
}
// loop the a tag and binding event
for(var i=0; i<this.aTags.length; i++)
{
this.aTags[i].ImgRating=this;
this.aTags[i].onmouseover=function(){
this.ImgRating.grayStars();
this.ImgRating.colorStars(this);
};
this.aTags[i].onmouseout=function(){
this.ImgRating.cleanStar(this);
};
this.aTags[i].onclick=function(){
this.ImgRating.setRating(this)
}
}
};
this.grayStars=function(){
for(var i=1;i<6;i++)
{
document.getElementById(options.imgPre + i).src=options.imgGray;
}
};
this.colorStars=function(element){
for(var i=1;i<=element.rel;i++)
{
document.getElementById(options.imgPre + i).src=options.imgColor;
}
};
// when the mouse over remove the color star from the without rating star
this.cleanStar=function(element){
for(var i=1;i<=element.rel;i++)
{
if(i<=this.rating) continue;
document.getElementById(options.imgPre + i).src=options.imgGray;
}
};
// when you click on a star then rating
this.setRating=function(element){
this.rating=element.rel;
document.getElementById(options.valueArea).value=this.rating;
//alert(document.getElementById(options.cleanLabel));
document.getElementById(options.cleanLabel).src=this.lightSearch.src;
};
// clean all the rating ,only for my project
this.cleanRating=function(){
this.rating='';
this.grayStars();
document.getElementById(options.valueArea).value='';
document.getElementById(options.cleanLabel).src=this.graySearch.src;
};
// a method for get all the star <a> tag, it would be better put it in the uility package.
this.getElementsByClass=function(clsName,htmltag,parenNodeId){
var arr = new Array();
var theParentNode=document.getElementById(parenNodeId);
var elems = theParentNode.getElementsByTagName(htmltag);
for ( var cls, i = 0; ( elem = elems[i] ); i++ ){
if ( elem.className == clsName ){
arr[arr.length] = elem;
}
}
return arr;
}
};