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); |
---|