File indexing completed on 2024-12-22 05:33:20
0001 /************************************************************************ 0002 ************************************************************************* 0003 @Name : jRating - jQuery Plugin 0004 @Revison : 2.2 0005 @Date : 26/01/2011 0006 @Author: ALPIXEL - (www.myjqueryplugins.com - www.alpixel.fr) 0007 @License : Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php 0008 0009 ************************************************************************** 0010 *************************************************************************/ 0011 (function($) { 0012 $.fn.jRating = function(op) { 0013 var defaults = { 0014 /** String vars **/ 0015 bigStarsPath : '/template/jRating/jquery/icons/stars.png', // path of the icon stars.png 0016 smallStarsPath : '/template/jRating/jquery/icons/small.png', // path of the icon small.png 0017 phpPath : '/addScore.php', // path of the php file jRating.php 0018 type : 'big', // can be set to 'small' or 'big' 0019 0020 /** Boolean vars **/ 0021 step:false, // if true, mouseover binded star by star, 0022 isDisabled:false, 0023 showRateInfo: true, 0024 0025 /** Integer vars **/ 0026 length:5, // number of star to display 0027 decimalLength : 0, // number of decimals.. Max 3, but you can complete the function 'getNote' 0028 rateMax : 20, // maximal rate - integer from 0 to 9999 (or more) 0029 rateInfosX : -45, // relative position in X axis of the info box when mouseover 0030 rateInfosY : 5, // relative position in Y axis of the info box when mouseover 0031 0032 /** Functions **/ 0033 onSuccess : null, 0034 onError : null 0035 }; 0036 0037 if(this.length>0) 0038 return this.each(function() { 0039 var opts = $.extend(defaults, op), 0040 newWidth = 0, 0041 starWidth = 0, 0042 starHeight = 0, 0043 bgPath = ''; 0044 0045 if($(this).hasClass('jDisabled') || opts.isDisabled) 0046 var jDisabled = true; 0047 else 0048 var jDisabled = false; 0049 0050 getStarWidth(); 0051 $(this).height(starHeight); 0052 0053 var average = parseFloat($(this).attr('id').split('_')[0]), 0054 idBox = parseInt($(this).attr('id').split('_')[1]), // get the id of the box 0055 widthRatingContainer = starWidth*opts.length, // Width of the Container 0056 widthColor = average/opts.rateMax*widthRatingContainer, // Width of the color Container 0057 0058 quotient = 0059 $('<div>', 0060 { 0061 'class' : 'jRatingColor', 0062 css:{ 0063 width:widthColor 0064 } 0065 }).appendTo($(this)), 0066 0067 average = 0068 $('<div>', 0069 { 0070 'class' : 'jRatingAverage', 0071 css:{ 0072 width:0, 0073 top:- starHeight 0074 } 0075 }).appendTo($(this)), 0076 0077 jstar = 0078 $('<div>', 0079 { 0080 'class' : 'jStar', 0081 css:{ 0082 width:widthRatingContainer, 0083 height:starHeight, 0084 top:- (starHeight*2), 0085 background: 'url('+bgPath+') repeat-x' 0086 } 0087 }).appendTo($(this)); 0088 0089 $(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'}); 0090 0091 if(!jDisabled) 0092 $(this).bind({ 0093 mouseenter : function(e){ 0094 var realOffsetLeft = findRealLeft(this); 0095 var relativeX = e.pageX - realOffsetLeft; 0096 if (opts.showRateInfo) 0097 var tooltip = 0098 $('<p>',{ 0099 'class' : 'jRatingInfos', 0100 html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>', 0101 css : { 0102 top: (e.pageY + opts.rateInfosY), 0103 left: (e.pageX + opts.rateInfosX) 0104 } 0105 }).appendTo('body').show(); 0106 }, 0107 mouseover : function(e){ 0108 $(this).css('cursor','pointer'); 0109 }, 0110 mouseout : function(){ 0111 $(this).css('cursor','default'); 0112 average.width(0); 0113 }, 0114 mousemove : function(e){ 0115 var realOffsetLeft = findRealLeft(this); 0116 var relativeX = e.pageX - realOffsetLeft; 0117 if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth; 0118 else newWidth = relativeX; 0119 average.width(newWidth); 0120 if (opts.showRateInfo) 0121 $("p.jRatingInfos") 0122 .css({ 0123 left: (e.pageX + opts.rateInfosX) 0124 }) 0125 .html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>'); 0126 }, 0127 mouseleave : function(){ 0128 $("p.jRatingInfos").remove(); 0129 }, 0130 click : function(e){ 0131 $(this).unbind().css('cursor','default').addClass('jDisabled'); 0132 if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();}); 0133 e.preventDefault(); 0134 var rate = getNote(newWidth); 0135 average.width(newWidth); 0136 0137 /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/ 0138 $('.datasSent p').html('<strong>idBox : </strong>'+idBox+'<br /><strong>rate : </strong>'+rate+'<br /><strong>action :</strong> rating'); 0139 $('.serverResponse p').html('<strong>Loading...</strong>'); 0140 /** END ONLY FOR THE DEMO **/ 0141 0142 $.post(opts.phpPath,{ 0143 idBox : idBox, 0144 rate : rate, 0145 action : 'rating' 0146 }, 0147 function(data) { 0148 if(!data.error) 0149 { 0150 /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/ 0151 $('.serverResponse p').html(data.server); 0152 /** END ONLY FOR THE DEMO **/ 0153 0154 0155 /** Here you can display an alert box, 0156 or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify 0157 exemple : */ 0158 if(opts.onSuccess) opts.onSuccess(); 0159 } 0160 else 0161 { 0162 0163 /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/ 0164 $('.serverResponse p').html(data.server); 0165 /** END ONLY FOR THE DEMO **/ 0166 0167 /** Here you can display an alert box, 0168 or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify 0169 exemple : */ 0170 if(opts.onError) opts.onError(); 0171 } 0172 }, 0173 'json' 0174 ); 0175 } 0176 }); 0177 0178 function getNote(relativeX) { 0179 var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); 0180 switch(opts.decimalLength) { 0181 case 1 : 0182 var note = Math.round(noteBrut*10)/10; 0183 break; 0184 case 2 : 0185 var note = Math.round(noteBrut*100)/100; 0186 break; 0187 case 3 : 0188 var note = Math.round(noteBrut*1000)/1000; 0189 break; 0190 default : 0191 var note = Math.round(noteBrut*1)/1; 0192 } 0193 return note; 0194 }; 0195 0196 function getStarWidth(){ 0197 switch(opts.type) { 0198 case 'small' : 0199 starWidth = 12; // width of the picture small.png 0200 starHeight = 10; // height of the picture small.png 0201 bgPath = opts.smallStarsPath; 0202 break; 0203 default : 0204 starWidth = 23; // width of the picture stars.png 0205 starHeight = 20; // height of the picture stars.png 0206 bgPath = opts.bigStarsPath; 0207 } 0208 }; 0209 0210 function findRealLeft(obj) { 0211 if( !obj ) return 0; 0212 return obj.offsetLeft + findRealLeft( obj.offsetParent ); 0213 }; 0214 }); 0215 0216 } 0217 })(jQuery);