一段不错的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;
    }
};
posted @ 2011-05-31 15:48  hellovigoss  阅读(277)  评论(0编辑  收藏  举报