Line 0
Link Here
|
|
|
1 |
/* |
2 |
### jQuery Star Rating Plugin v3.10 - 2009-03-23 ### |
3 |
* Home: http://www.fyneworks.com/jquery/star-rating/ |
4 |
* Code: http://code.google.com/p/jquery-star-rating-plugin/ |
5 |
* |
6 |
* Dual licensed under the MIT and GPL licenses: |
7 |
* http://www.opensource.org/licenses/mit-license.php |
8 |
* http://www.gnu.org/licenses/gpl.html |
9 |
### |
10 |
*/ |
11 |
|
12 |
/*# AVOID COLLISIONS #*/ |
13 |
;if(window.jQuery) (function($){ |
14 |
/*# AVOID COLLISIONS #*/ |
15 |
|
16 |
// IE6 Background Image Fix |
17 |
if ($.browser.msie) try { document.execCommand("BackgroundImageCache", false, true)} catch(e) { } |
18 |
// Thanks to http://www.visualjquery.com/rating/rating_redux.html |
19 |
|
20 |
// plugin initialization |
21 |
$.fn.rating = function(options){ |
22 |
if(this.length==0) return this; // quick fail |
23 |
|
24 |
// Handle API methods |
25 |
if(typeof arguments[0]=='string'){ |
26 |
// Perform API methods on individual elements |
27 |
if(this.length>1){ |
28 |
var args = arguments; |
29 |
return this.each(function(){ |
30 |
$.fn.rating.apply($(this), args); |
31 |
}); |
32 |
}; |
33 |
// Invoke API method handler |
34 |
$.fn.rating[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []); |
35 |
// Quick exit... |
36 |
return this; |
37 |
}; |
38 |
|
39 |
// Initialize options for this call |
40 |
var options = $.extend( |
41 |
{}/* new object */, |
42 |
$.fn.rating.options/* default options */, |
43 |
options || {} /* just-in-time options */ |
44 |
); |
45 |
|
46 |
// loop through each matched element |
47 |
this |
48 |
.not('.star-rating-applied') |
49 |
.addClass('star-rating-applied') |
50 |
.each(function(){ |
51 |
|
52 |
// Load control parameters / find context / etc |
53 |
var eid = (this.name || 'unnamed-rating').replace(/\[|\]+/g, "_"); |
54 |
var context = $(this.form || document.body); |
55 |
var input = $(this); |
56 |
var raters = context.data('rating') || { count:0 }; |
57 |
var rater = raters[eid]; |
58 |
var control; |
59 |
|
60 |
// if rater is available, verify that the control still exists |
61 |
if(rater) control = rater.data('rating'); |
62 |
|
63 |
if(rater && control){ |
64 |
// add star to control if rater is available and the same control still exists |
65 |
control.count++; |
66 |
|
67 |
} |
68 |
else{ |
69 |
// create new control if first star or control element was removed/replaced |
70 |
|
71 |
// Initialize options for this raters |
72 |
control = $.extend( |
73 |
{}/* new object */, |
74 |
options || {} /* current call options */, |
75 |
($.metadata? input.metadata(): ($.meta?input.data():null)) || {}, /* metadata options */ |
76 |
{ count:0, stars: [], inputs: [] } |
77 |
); |
78 |
|
79 |
// increment number of rating controls |
80 |
control.serial = raters.count++; |
81 |
|
82 |
// create rating element |
83 |
rater = $('<span class="star-rating-control"/>'); |
84 |
input.before(rater); |
85 |
|
86 |
// Mark element for initialization (once all stars are ready) |
87 |
rater.addClass('rating-to-be-drawn'); |
88 |
|
89 |
// Accept readOnly setting from 'disabled' property |
90 |
if(input.attr('disabled')) control.readOnly = true; |
91 |
|
92 |
// Create 'cancel' button |
93 |
rater.append( |
94 |
control.cancel = $('<div class="rating-cancel"><a title="' + control.cancel + '">' + control.cancelValue + '</a></div>') |
95 |
.mouseover(function(){ |
96 |
$(this).rating('drain'); |
97 |
$(this).addClass('star-rating-hover'); |
98 |
//$(this).rating('focus'); |
99 |
}) |
100 |
.mouseout(function(){ |
101 |
$(this).rating('draw'); |
102 |
$(this).removeClass('star-rating-hover'); |
103 |
//$(this).rating('blur'); |
104 |
}) |
105 |
.click(function(){ |
106 |
$(this).rating('select'); |
107 |
}) |
108 |
.data('rating', control) |
109 |
); |
110 |
|
111 |
}; // first element of group |
112 |
|
113 |
// insert rating star |
114 |
var star = $('<div class="star-rating rater-'+ control.serial +'"><a title="' + (this.title || this.value) + '">' + this.value + '</a></div>'); |
115 |
rater.append(star); |
116 |
|
117 |
// inherit attributes from input element |
118 |
if(this.id) star.attr('id', this.id); |
119 |
if(this.className) star.addClass(this.className); |
120 |
|
121 |
// Half-stars? |
122 |
if(control.half) control.split = 2; |
123 |
|
124 |
// Prepare division control |
125 |
if(typeof control.split=='number' && control.split>0){ |
126 |
var stw = ($.fn.width ? star.width() : 0) || control.starWidth; |
127 |
var spi = (control.count % control.split), spw = Math.floor(stw/control.split); |
128 |
star |
129 |
// restrict star's width and hide overflow (already in CSS) |
130 |
.width(spw) |
131 |
// move the star left by using a negative margin |
132 |
// this is work-around to IE's stupid box model (position:relative doesn't work) |
133 |
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' }) |
134 |
}; |
135 |
|
136 |
// readOnly? |
137 |
if(control.readOnly)//{ //save a byte! |
138 |
// Mark star as readOnly so user can customize display |
139 |
star.addClass('star-rating-readonly'); |
140 |
//} //save a byte! |
141 |
else//{ //save a byte! |
142 |
// Enable hover css effects |
143 |
star.addClass('star-rating-live') |
144 |
// Attach mouse events |
145 |
.mouseover(function(){ |
146 |
$(this).rating('fill'); |
147 |
$(this).rating('focus'); |
148 |
}) |
149 |
.mouseout(function(){ |
150 |
$(this).rating('draw'); |
151 |
$(this).rating('blur'); |
152 |
}) |
153 |
.click(function(){ |
154 |
$(this).rating('select'); |
155 |
}) |
156 |
; |
157 |
//}; //save a byte! |
158 |
|
159 |
// set current selection |
160 |
if(this.checked) control.current = star; |
161 |
|
162 |
// hide input element |
163 |
input.hide(); |
164 |
|
165 |
// backward compatibility, form element to plugin |
166 |
input.change(function(){ |
167 |
$(this).rating('select'); |
168 |
}); |
169 |
|
170 |
// attach reference to star to input element and vice-versa |
171 |
star.data('rating.input', input.data('rating.star', star)); |
172 |
|
173 |
// store control information in form (or body when form not available) |
174 |
control.stars[control.stars.length] = star[0]; |
175 |
control.inputs[control.inputs.length] = input[0]; |
176 |
control.rater = raters[eid] = rater; |
177 |
control.context = context; |
178 |
|
179 |
input.data('rating', control); |
180 |
rater.data('rating', control); |
181 |
star.data('rating', control); |
182 |
context.data('rating', raters); |
183 |
}); // each element |
184 |
|
185 |
// Initialize ratings (first draw) |
186 |
$('.rating-to-be-drawn').rating('draw').removeClass('rating-to-be-drawn'); |
187 |
|
188 |
return this; // don't break the chain... |
189 |
}; |
190 |
|
191 |
/*--------------------------------------------------------*/ |
192 |
|
193 |
/* |
194 |
### Core functionality and API ### |
195 |
*/ |
196 |
$.extend($.fn.rating, { |
197 |
|
198 |
focus: function(){ |
199 |
var control = this.data('rating'); if(!control) return this; |
200 |
if(!control.focus) return this; // quick fail if not required |
201 |
// find data for event |
202 |
var input = $(this).data('rating.input') || $( this.tagName=='INPUT' ? this : null ); |
203 |
// focus handler, as requested by focusdigital.co.uk |
204 |
if(control.focus) control.focus.apply(input[0], [input.val(), $('a', input.data('rating.star'))[0]]); |
205 |
}, // $.fn.rating.focus |
206 |
|
207 |
blur: function(){ |
208 |
var control = this.data('rating'); if(!control) return this; |
209 |
if(!control.blur) return this; // quick fail if not required |
210 |
// find data for event |
211 |
var input = $(this).data('rating.input') || $( this.tagName=='INPUT' ? this : null ); |
212 |
// blur handler, as requested by focusdigital.co.uk |
213 |
if(control.blur) control.blur.apply(input[0], [input.val(), $('a', input.data('rating.star'))[0]]); |
214 |
}, // $.fn.rating.blur |
215 |
|
216 |
fill: function(){ // fill to the current mouse position. |
217 |
var control = this.data('rating'); if(!control) return this; |
218 |
// do not execute when control is in read-only mode |
219 |
if(control.readOnly) return; |
220 |
// Reset all stars and highlight them up to this element |
221 |
this.rating('drain'); |
222 |
this.prevAll().andSelf().filter('.rater-'+ control.serial).addClass('star-rating-hover'); |
223 |
},// $.fn.rating.fill |
224 |
|
225 |
drain: function() { // drain all the stars. |
226 |
var control = this.data('rating'); if(!control) return this; |
227 |
// do not execute when control is in read-only mode |
228 |
if(control.readOnly) return; |
229 |
// Reset all stars |
230 |
control.rater.children().filter('.rater-'+ control.serial).removeClass('star-rating-on').removeClass('star-rating-hover'); |
231 |
},// $.fn.rating.drain |
232 |
|
233 |
draw: function(){ // set value and stars to reflect current selection |
234 |
var control = this.data('rating'); if(!control) return this; |
235 |
// Clear all stars |
236 |
this.rating('drain'); |
237 |
// Set control value |
238 |
if(control.current){ |
239 |
control.current.data('rating.input').attr('checked','checked'); |
240 |
control.current.prevAll().andSelf().filter('.rater-'+ control.serial).addClass('star-rating-on'); |
241 |
} |
242 |
else |
243 |
$(control.inputs).removeAttr('checked'); |
244 |
// Show/hide 'cancel' button |
245 |
control.cancel[control.readOnly || control.required?'hide':'show'](); |
246 |
// Add/remove read-only classes to remove hand pointer |
247 |
this.siblings()[control.readOnly?'addClass':'removeClass']('star-rating-readonly'); |
248 |
},// $.fn.rating.draw |
249 |
|
250 |
select: function(value){ // select a value |
251 |
var control = this.data('rating'); if(!control) return this; |
252 |
// do not execute when control is in read-only mode |
253 |
if(control.readOnly) return; |
254 |
// clear selection |
255 |
control.current = null; |
256 |
// programmatically (based on user input) |
257 |
if(typeof value!='undefined'){ |
258 |
// select by index (0 based) |
259 |
if(typeof value=='number') |
260 |
return $(control.stars[value]).rating('select'); |
261 |
// select by literal value (must be passed as a string |
262 |
if(typeof value=='string') |
263 |
//return |
264 |
$.each(control.stars, function(){ |
265 |
if($(this).data('rating.input').val()==value) $(this).rating('select'); |
266 |
}); |
267 |
} |
268 |
else |
269 |
control.current = this[0].tagName=='INPUT' ? |
270 |
this.data('rating.star') : |
271 |
(this.is('.rater-'+ control.serial) ? this : null); |
272 |
|
273 |
// Update rating control state |
274 |
this.data('rating', control); |
275 |
// Update display |
276 |
this.rating('draw'); |
277 |
// find data for event |
278 |
var input = $( control.current ? control.current.data('rating.input') : null ); |
279 |
// click callback, as requested here: http://plugins.jquery.com/node/1655 |
280 |
if(control.callback) control.callback.apply(input[0], [input.val(), $('a', control.current)[0]]);// callback event |
281 |
},// $.fn.rating.select |
282 |
|
283 |
readOnly: function(toggle, disable){ // make the control read-only (still submits value) |
284 |
var control = this.data('rating'); if(!control) return this; |
285 |
// setread-only status |
286 |
control.readOnly = toggle || toggle==undefined ? true : false; |
287 |
// enable/disable control value submission |
288 |
if(disable) $(control.inputs).attr("disabled", "disabled"); |
289 |
else $(control.inputs).removeAttr("disabled"); |
290 |
// Update rating control state |
291 |
this.data('rating', control); |
292 |
// Update display |
293 |
this.rating('draw'); |
294 |
},// $.fn.rating.readOnly |
295 |
|
296 |
disable: function(){ // make read-only and never submit value |
297 |
this.rating('readOnly', true, true); |
298 |
},// $.fn.rating.disable |
299 |
|
300 |
enable: function(){ // make read/write and submit value |
301 |
this.rating('readOnly', false, false); |
302 |
}// $.fn.rating.select |
303 |
|
304 |
}); |
305 |
|
306 |
/*--------------------------------------------------------*/ |
307 |
|
308 |
/* |
309 |
### Default Settings ### |
310 |
eg.: You can override default control like this: |
311 |
$.fn.rating.options.cancel = 'Clear'; |
312 |
*/ |
313 |
$.fn.rating.options = { //$.extend($.fn.rating, { options: { |
314 |
cancel: 'Cancel Rating', // advisory title for the 'cancel' link |
315 |
cancelValue: '', // value to submit when user click the 'cancel' link |
316 |
split: 0, // split the star into how many parts? |
317 |
|
318 |
// Width of star image in case the plugin can't work it out. This can happen if |
319 |
// the jQuery.dimensions plugin is not available OR the image is hidden at installation |
320 |
starWidth: 16//, |
321 |
|
322 |
//NB.: These don't need to be pre-defined (can be undefined/null) so let's save some code! |
323 |
//half: false, // just a shortcut to control.split = 2 |
324 |
//required: false, // disables the 'cancel' button so user can only select one of the specified values |
325 |
//readOnly: false, // disable rating plugin interaction/ values cannot be changed |
326 |
//focus: function(){}, // executed when stars are focused |
327 |
//blur: function(){}, // executed when stars are focused |
328 |
//callback: function(){}, // executed when a star is clicked |
329 |
}; //} }); |
330 |
|
331 |
/*--------------------------------------------------------*/ |
332 |
|
333 |
/* |
334 |
### Default implementation ### |
335 |
The plugin will attach itself to file inputs |
336 |
with the class 'multi' when the page loads |
337 |
*/ |
338 |
$(function(){ $('input[type=radio].star').rating(); }); |
339 |
|
340 |
|
341 |
|
342 |
/*# AVOID COLLISIONS #*/ |
343 |
})(jQuery); |
344 |
/*# AVOID COLLISIONS #*/ |