|
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 #*/ |