JS 五星评价的代骊实现

/************************************************************************
*************************************************************************
@Name :        jRating - jQuery Plugin
@Revison :     2.2
@Date :   26/01/2011
@Author:       ALPIXEL - ()
@License :   Open Source - MIT License :http://www.poposoft.com 
**************************************************************************
*************************************************************************/
(function($) {
 $.fn.jRating = function(op) {
  var defaults = {
   /** String vars **/
   bigStarsPath : '../statics/images/rating/stars.png', // path of the icon stars.png
   smallStarsPath : '../statics/images/rating/small.png', // path of the icon small.png
   phpPath : 'php/jRating.php', // path of the php file jRating.php
   type : 'big', // can be set to 'small' or 'big'
   
   /** Boolean vars **/
   step:true, // if true,  mouseover binded star by star,
   isDisabled:false,
   showRateInfo: false,
   
   /** Integer vars **/
   length:5, // number of star to display
   decimalLength : 0, // number of decimals.. Max 3, but you can complete the function 'getNote'
   rateMax : 100, // maximal rate - integer from 0 to 9999 (or more)
   rateInfosX : -45, // relative position in X axis of the info box when mouseover
   rateInfosY : 5, // relative position in Y axis of the info box when mouseover
   
   initvalue: 0,
   /** Functions **/
   onSuccess : null,
   onError : null
  };
  
  if(this.length>0)
  return this.each(function() {
   var opts = $.extend(defaults, op),   
   newWidth = 0,
   starWidth = 0,
   starHeight = 0,
   bgPath = '';

   if($(this).hasClass('jDisabled') || opts.isDisabled)
    var jDisabled = true;
   else
    var jDisabled = false;

   getStarWidth();
   $(this).height(starHeight);

   var averagevalue = opts.initvalue,
//   idBox = parseInt($(this).attr('id').split('_')[1]), // get the id of the box
   widthRatingContainer = starWidth*opts.length, // Width of the Container
   widthColor = averagevalue/opts.rateMax*widthRatingContainer, // Width of the color Container
   
   quotient =
   $('<div>',
   {
    'class' : 'jRatingColor',
    css:{
     width:widthColor
     
    }
   }).appendTo($(this)),
   
   average =
   $('<div>',
   {
    'class' : 'jRatingAverage',
    'rate':'0',
    css:{
     width:0,
     top:- starHeight
     
    }
   }).appendTo($(this)),
   
    jstar =
   $('<div>',
   {
    'class' : 'jStar',
    css:{
     width:widthRatingContainer,
     height:starHeight,
     top:- (starHeight*2)
    }
   }).appendTo($(this));

   $(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative','text-align':'left'});
   
   if(!jDisabled)
   $(this).bind({
    mouseenter : function(e){
     var realOffsetLeft = findRealLeft(this);
     var relativeX = e.pageX - realOffsetLeft;
     if (opts.showRateInfo)
     var tooltip =
     $('<p>',{
      'class' : 'jRatingInfos',
      html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>',
      css : {
       top: (e.pageY + opts.rateInfosY),
       left: (e.pageX + opts.rateInfosX)
      }
     }).appendTo('body').show();
    },
    mouseover : function(e){
     $(this).css('cursor','pointer'); 
    },
    mouseout : function(){
     $(this).css('cursor','default');
     //average.width(0);
     var rate = getNote(newWidth);
     
     average.attr('rate',rate);
    },
    mousemove : function(e){
     var realOffsetLeft = findRealLeft(this);
     var relativeX = e.pageX - realOffsetLeft;
     if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
     else newWidth = relativeX;
     average.width(newWidth);     
     if (opts.showRateInfo)
     $("p.jRatingInfos")
     .css({
      left: (e.pageX + opts.rateInfosX)
     })
     .html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
    },
    mouseleave : function(){
     $("p.jRatingInfos").remove();
    },
    click : function(e){
    // $(this).unbind().css('cursor','default').addClass('jDisabled');
     if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
     e.preventDefault();
     var rate = getNote(newWidth);
     average.width(newWidth);
     
     average.attr('rate',rate);
     /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
    //  $('.datasSent p').html('<strong>idBox : </strong>'+idBox+'<br /><strong>rate : </strong>'+rate+'<br /><strong>action :</strong> rating');
    //  $('.serverResponse p').html('<strong>Loading...</strong>');
     /** END ONLY FOR THE DEMO **/
     
      if(undefined != opts.afterClick){ 
      
       opts.afterClick(rate);
       }
      
     
    }
   });

   function getNote(relativeX) {
    var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);
    switch(opts.decimalLength) {
     case 1 :
      var note = Math.round(noteBrut*10)/10;
      break;
     case 2 :
      var note = Math.round(noteBrut*100)/100;
      break;
     case 3 :
      var note = Math.round(noteBrut*1000)/1000;
      break;
     default :
      var note = Math.round(noteBrut*1)/1;
    }
    return note;
   };

   function getStarWidth(){
    switch(opts.type) {
     case 'small' :
      starWidth = 12; // width of the picture small.png
      starHeight = 10; // height of the picture small.png
      bgPath = opts.smallStarsPath;
     break;
     default :
      starWidth = 23; // width of the picture stars.png
      starHeight = 20; // height of the picture stars.png
      bgPath = opts.bigStarsPath;
    }
   };
   
   function findRealLeft(obj) {
     if( !obj ) return 0;
     return obj.offsetLeft + findRealLeft( obj.offsetParent );
   };
  });

 }
})(jQuery);