[7441] | 1 | /************************************************************************
|
---|
| 2 | *************************************************************************
|
---|
| 3 | @Name : jRating - jQuery Plugin
|
---|
| 4 | @Revison : 2.3
|
---|
| 5 | @Date : 07/09/2012
|
---|
| 6 | @Author: ALPIXEL - (www.myjqueryplugins.com - www.alpixel.fr)
|
---|
| 7 | @License : Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
|
---|
| 8 |
|
---|
| 9 | **************************************************************************
|
---|
| 10 | *************************************************************************/
|
---|
| 11 | (function($) {
|
---|
| 12 | $.fn.jRating = function(op) {
|
---|
| 13 | var defaults = {
|
---|
| 14 | /** String vars **/
|
---|
| 15 | bigStarsPath : 'jquery/icons/stars.png', // path of the icon stars.png
|
---|
| 16 | smallStarsPath : 'jquery/icons/small.png', // path of the icon small.png
|
---|
| 17 | phpPath : 'php/jRating.php', // path of the php file jRating.php
|
---|
| 18 | type : 'big', // can be set to 'small' or 'big'
|
---|
| 19 |
|
---|
| 20 | /** Boolean vars **/
|
---|
| 21 | step:false, // if true, mouseover binded star by star,
|
---|
| 22 | isDisabled:false,
|
---|
| 23 | showRateInfo: true,
|
---|
| 24 |
|
---|
| 25 | /** Integer vars **/
|
---|
| 26 | length:5, // number of star to display
|
---|
| 27 | decimalLength : 0, // number of decimals.. Max 3, but you can complete the function 'getNote'
|
---|
| 28 | rateMax : 20, // maximal rate - integer from 0 to 9999 (or more)
|
---|
| 29 | rateInfosX : -45, // relative position in X axis of the info box when mouseover
|
---|
| 30 | rateInfosY : 5, // relative position in Y axis of the info box when mouseover
|
---|
| 31 |
|
---|
| 32 | /** Functions **/
|
---|
| 33 | onSuccess : null,
|
---|
| 34 | onError : null
|
---|
| 35 | };
|
---|
| 36 |
|
---|
| 37 | if(this.length>0)
|
---|
| 38 | return this.each(function() {
|
---|
| 39 | var opts = $.extend(defaults, op),
|
---|
| 40 | newWidth = 0,
|
---|
| 41 | starWidth = 0,
|
---|
| 42 | starHeight = 0,
|
---|
| 43 | bgPath = '';
|
---|
| 44 |
|
---|
| 45 | if($(this).hasClass('jDisabled') || opts.isDisabled)
|
---|
| 46 | var jDisabled = true;
|
---|
| 47 | else
|
---|
| 48 | var jDisabled = false;
|
---|
| 49 |
|
---|
| 50 | getStarWidth();
|
---|
| 51 | $(this).height(starHeight);
|
---|
| 52 |
|
---|
| 53 | var average = parseFloat($(this).attr('id').split('_')[0]),
|
---|
| 54 | idBox = parseInt($(this).attr('id').split('_')[1]), // get the id of the box
|
---|
| 55 | widthRatingContainer = starWidth*opts.length, // Width of the Container
|
---|
| 56 | widthColor = average/opts.rateMax*widthRatingContainer, // Width of the color Container
|
---|
| 57 |
|
---|
| 58 | quotient =
|
---|
| 59 | $('<div>',
|
---|
| 60 | {
|
---|
| 61 | 'class' : 'jRatingColor',
|
---|
| 62 | css:{
|
---|
| 63 | width:widthColor
|
---|
| 64 | }
|
---|
| 65 | }).appendTo($(this)),
|
---|
| 66 |
|
---|
| 67 | average =
|
---|
| 68 | $('<div>',
|
---|
| 69 | {
|
---|
| 70 | 'class' : 'jRatingAverage',
|
---|
| 71 | css:{
|
---|
| 72 | width:0,
|
---|
| 73 | top:- starHeight
|
---|
| 74 | }
|
---|
| 75 | }).appendTo($(this)),
|
---|
| 76 |
|
---|
| 77 | jstar =
|
---|
| 78 | $('<div>',
|
---|
| 79 | {
|
---|
| 80 | 'class' : 'jStar',
|
---|
| 81 | css:{
|
---|
| 82 | width:widthRatingContainer,
|
---|
| 83 | height:starHeight,
|
---|
| 84 | top:- (starHeight*2),
|
---|
| 85 | background: 'url('+bgPath+') repeat-x'
|
---|
| 86 | }
|
---|
| 87 | }).appendTo($(this));
|
---|
| 88 |
|
---|
| 89 |
|
---|
| 90 | $(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
|
---|
| 91 |
|
---|
| 92 | if(!jDisabled)
|
---|
| 93 | $(this).unbind().bind({
|
---|
| 94 | mouseenter : function(e){
|
---|
| 95 | var realOffsetLeft = findRealLeft(this);
|
---|
| 96 | var relativeX = e.pageX - realOffsetLeft;
|
---|
| 97 | if (opts.showRateInfo)
|
---|
| 98 | var tooltip =
|
---|
| 99 | $('<p>',{
|
---|
| 100 | 'class' : 'jRatingInfos',
|
---|
| 101 | html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>',
|
---|
| 102 | css : {
|
---|
| 103 | top: (e.pageY + opts.rateInfosY),
|
---|
| 104 | left: (e.pageX + opts.rateInfosX)
|
---|
| 105 | }
|
---|
| 106 | }).appendTo('body').show();
|
---|
| 107 | },
|
---|
| 108 | mouseover : function(e){
|
---|
| 109 | $(this).css('cursor','pointer');
|
---|
| 110 | },
|
---|
| 111 | mouseout : function(){
|
---|
| 112 | $(this).css('cursor','default');
|
---|
| 113 | average.width(0);
|
---|
| 114 | },
|
---|
| 115 | mousemove : function(e){
|
---|
| 116 | var realOffsetLeft = findRealLeft(this);
|
---|
| 117 | var relativeX = e.pageX - realOffsetLeft;
|
---|
| 118 | if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
|
---|
| 119 | else newWidth = relativeX;
|
---|
| 120 | average.width(newWidth);
|
---|
| 121 | if (opts.showRateInfo)
|
---|
| 122 | $("p.jRatingInfos")
|
---|
| 123 | .css({
|
---|
| 124 | left: (e.pageX + opts.rateInfosX)
|
---|
| 125 | })
|
---|
| 126 | .html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
|
---|
| 127 | },
|
---|
| 128 | mouseleave : function(){
|
---|
| 129 | $("p.jRatingInfos").remove();
|
---|
| 130 | },
|
---|
| 131 | click : function(e){
|
---|
| 132 | var element = this;
|
---|
| 133 | $(this).unbind().css('cursor','default').addClass('jDisabled');
|
---|
| 134 | if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
|
---|
| 135 | e.preventDefault();
|
---|
| 136 | var rate = getNote(newWidth);
|
---|
| 137 | average.width(newWidth);
|
---|
| 138 |
|
---|
| 139 | /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
|
---|
| 140 | $('.datasSent p').html('<strong>idBox : </strong>'+idBox+'<br /><strong>rate : </strong>'+rate+'<br /><strong>action :</strong> rating');
|
---|
| 141 | $('.serverResponse p').html('<strong>Loading...</strong>');
|
---|
| 142 | /** END ONLY FOR THE DEMO **/
|
---|
| 143 |
|
---|
| 144 | $.post(opts.phpPath,{
|
---|
| 145 | idBox : idBox,
|
---|
| 146 | rate : rate,
|
---|
| 147 | action : 'rating'
|
---|
| 148 | },
|
---|
| 149 | function(data) {
|
---|
| 150 | if(!data.error)
|
---|
| 151 | {
|
---|
| 152 | /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
|
---|
| 153 | $('.serverResponse p').html(data.server);
|
---|
| 154 | /** END ONLY FOR THE DEMO **/
|
---|
| 155 |
|
---|
| 156 |
|
---|
| 157 | /** Here you can display an alert box,
|
---|
| 158 | or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify
|
---|
| 159 | exemple : */
|
---|
| 160 | if(opts.onSuccess) opts.onSuccess( element, rate );
|
---|
| 161 | }
|
---|
| 162 | else
|
---|
| 163 | {
|
---|
| 164 |
|
---|
| 165 | /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
|
---|
| 166 | $('.serverResponse p').html(data.server);
|
---|
| 167 | /** END ONLY FOR THE DEMO **/
|
---|
| 168 |
|
---|
| 169 | /** Here you can display an alert box,
|
---|
| 170 | or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify
|
---|
| 171 | exemple : */
|
---|
| 172 | if(opts.onError) opts.onError( element, rate );
|
---|
| 173 | }
|
---|
| 174 | },
|
---|
| 175 | 'json'
|
---|
| 176 | );
|
---|
| 177 | }
|
---|
| 178 | });
|
---|
| 179 |
|
---|
| 180 | function getNote(relativeX) {
|
---|
| 181 | var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);
|
---|
| 182 | switch(opts.decimalLength) {
|
---|
| 183 | case 1 :
|
---|
| 184 | var note = Math.round(noteBrut*10)/10;
|
---|
| 185 | break;
|
---|
| 186 | case 2 :
|
---|
| 187 | var note = Math.round(noteBrut*100)/100;
|
---|
| 188 | break;
|
---|
| 189 | case 3 :
|
---|
| 190 | var note = Math.round(noteBrut*1000)/1000;
|
---|
| 191 | break;
|
---|
| 192 | default :
|
---|
| 193 | var note = Math.round(noteBrut*1)/1;
|
---|
| 194 | }
|
---|
| 195 | return note;
|
---|
| 196 | };
|
---|
| 197 |
|
---|
| 198 | function getStarWidth(){
|
---|
| 199 | switch(opts.type) {
|
---|
| 200 | case 'small' :
|
---|
| 201 | starWidth = 12; // width of the picture small.png
|
---|
| 202 | starHeight = 10; // height of the picture small.png
|
---|
| 203 | bgPath = opts.smallStarsPath;
|
---|
| 204 | break;
|
---|
| 205 | default :
|
---|
| 206 | starWidth = 23; // width of the picture stars.png
|
---|
| 207 | starHeight = 20; // height of the picture stars.png
|
---|
| 208 | bgPath = opts.bigStarsPath;
|
---|
| 209 | }
|
---|
| 210 | };
|
---|
| 211 |
|
---|
| 212 | function findRealLeft(obj) {
|
---|
| 213 | if( !obj ) return 0;
|
---|
| 214 | return obj.offsetLeft + findRealLeft( obj.offsetParent );
|
---|
| 215 | };
|
---|
| 216 | });
|
---|
| 217 |
|
---|
| 218 | }
|
---|
| 219 | })(jQuery); |
---|