/* ### jQuery star2 rating2 Plugin v2.5 - 2008-09-10 ### * http://www.fyneworks.com/ - diego@fyneworks.com * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html ### Project: http://plugins.jquery.com/project/MultipleFriendlystar2rating2 Website: http://www.fyneworks.com/jquery/star2-rating2/ *//* Based on http://www.phpletter.com/Demo/Jquery-star2-rating2-Plugin/ Original comments: This is hacked version of star2 rating2 created by Ritesh Agrawal It thansform a set of radio type input elements to star2 rating2 type and remain the radio element name and value, so could be integrated with your form. It acts as a normal radio button. modified by : Logan Cai (cailongqun[at]yahoo.com.cn) */ /*# AVOID COLLISIONS #*/ ;if(window.jQuery) (function($){ /*# AVOID COLLISIONS #*/ // default settings $.rating2 = { cancel2: 'cancel2 rating2', // advisory title for the 'cancel' link cancel2Value: '', // value to submit when user click the 'cancel' link split: 0, // split the star2 into how many parts? // Width of star2 image in case the plugin can't work it out. This can happen if // the jQuery.dimensions plugin is not available OR the image is hidden at installation star2Width: 32, //NB.: These don't need to be defined (can be undefined/null) so let's save some code! //half: false, // just a shortcut to settings.split = 2 //required: false, // disables the 'cancel' button so user can only select one of the specified values //readOnly: false, // disable rating2 plugin interaction/ values cannot be changed //focus: function(){}, // executed when star2s are focused //blur: function(){}, // executed when star2s are focused //callback: function(){}, // executed when a star2 is clicked // required properties: groups: {},// allows multiple star2 rating2s on one page event: {// plugin event handlers fill: function(n, el, settings, state){ // fill to the current mouse position. //if(window.console) console.log(['fill', $(el), $(el).prevAll('.star2_group_'+n), arguments]); this.drain(n); $(el).prevAll('.star2_group_'+n).andSelf().addClass('star2_'+(state || 'hover')); // focus handler, as requested by focusdigital.co.uk var lnk = $(el).children('a'); val = lnk.text(); if(settings.focus) settings.focus.apply($.rating2.groups[n].valueElem[0], [val, lnk[0]]); }, drain: function(n, el, settings) { // drain all the star2s. //if(window.console) console.log(['drain', $(el), $(el).prevAll('.star2_group_'+n), arguments]); $.rating2.groups[n].valueElem.siblings('.star2_group_'+n).removeClass('star2_on').removeClass('star2_hover'); }, reset: function(n, el, settings){ // Reset the star2s to the default index. if(!$($.rating2.groups[n].current).is('.cancel2')) $($.rating2.groups[n].current).prevAll('.star2_group_'+n).andSelf().addClass('star2_on'); // blur handler, as requested by focusdigital.co.uk var lnk = $(el).children('a'); val = lnk.text(); if(settings.blur) settings.blur.apply($.rating2.groups[n].valueElem[0], [val, lnk[0]]); }, click: function(n, el, settings){ // Selected a star2 or cancelled $.rating2.groups[n].current = el; var lnk = $(el).children('a'); val = lnk.text(); // Set value $.rating2.groups[n].valueElem.val(val); // Update display $.rating2.event.drain(n, el, settings); $.rating2.event.reset(n, el, settings); // click callback, as requested here: http://plugins.jquery.com/node/1655 if(settings.callback) settings.callback.apply($.rating2.groups[n].valueElem[0], [val, lnk[0]]); } }// plugin events }; $.fn.rating2 = function(instanceSettings){ if(this.length==0) return this; // quick fail instanceSettings = $.extend( {}/* new object */, $.rating2/* global settings */, instanceSettings || {} /* just-in-time settings */ ); // loop through each matched element this.each(function(i){ var settings = $.extend( {}/* new object */, instanceSettings || {} /* current call settings */, ($.metadata? $(this).metadata(): ($.meta?$(this).data():null)) || {} /* metadata settings */ ); ////if(window.console) console.log([this.name, settings.half, settings.split], '#'); // Generate internal control ID // - ignore square brackets in element names var n = (this.name || 'unnamed-rating2').replace(/\[|\]/, "_"); // Grouping if(!$.rating2.groups[n]) $.rating2.groups[n] = {count: 0}; i = $.rating2.groups[n].count; $.rating2.groups[n].count++; // Accept readOnly setting from 'disabled' property $.rating2.groups[n].readOnly = $.rating2.groups[n].readOnly || settings.readOnly || $(this).attr('disabled'); // Things to do with the first element... if(i == 0){ // Create value element (disabled if readOnly) $.rating2.groups[n].valueElem = $(''); // Insert value element into form $(this).before($.rating2.groups[n].valueElem); if($.rating2.groups[n].readOnly || settings.required){ // DO NOT display 'cancel' button } else{ // Display 'cancel' button $(this).before( $('
' + settings.cancel2Value + '
') .mouseover(function(){ $.rating2.event.drain(n, this, settings); $(this).addClass('star2_on'); }) .mouseout(function(){ $.rating2.event.reset(n, this, settings); $(this).removeClass('star2_on'); }) .click(function(){ $.rating2.event.click(n, this, settings); }) ); } }; // if (i == 0) (first element) // insert rating2 option right after preview element estar2 = $('
' + this.value + '
'); $(this).after(estar2); // Half-star2s? if(settings.half) settings.split = 2; // Prepare division settings if(typeof settings.split=='number' && settings.split>0){ var stw = ($.fn.width ? $(estar2).width() : 0) || settings.star2Width; var spi = (i % settings.split), spw = Math.floor(stw/settings.split); $(estar2) // restrict star2's width and hide overflow (already in CSS) .width(spw) // move the star2 left by using a negative margin // this is work-around to IE's stupid box model (position:relative doesn't work) .find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' }) }; // Remember group name so controls within the same container don't get mixed up $(estar2).addClass('star2_group_'+n); // readOnly? if($.rating2.groups[n].readOnly)//{ //save a byte! // Mark star2 as readOnly so user can customize display $(estar2).addClass('star2_readonly'); //} //save a byte! else//{ //save a byte! $(estar2) // Enable hover css effects .addClass('star2_live') // Attach mouse events .mouseover(function(){ $.rating2.event.drain(n, this, settings); $.rating2.event.fill(n, this, settings, 'hover'); }) .mouseout(function(){ $.rating2.event.drain(n, this, settings); $.rating2.event.reset(n, this, settings); }) .click(function(){ $.rating2.event.click(n, this, settings); }); //}; //save a byte! ////if(window.console) console.log(['###', n, this.checked, $.rating2.groups[n].initial]); if(this.checked) $.rating2.groups[n].current = estar2; //remove this checkbox $(this).remove(); // reset display if last element if(i + 1 == this.length) $.rating2.event.reset(n, this, settings); }); // each element // initialize groups... for(n in $.rating2.groups)//{ not needed, save a byte! (function(c, v, n){ if(!c) return; $.rating2.event.fill(n, c, instanceSettings || {}, 'on'); $(v).val($(c).children('a').text()); }) ($.rating2.groups[n].current, $.rating2.groups[n].valueElem, n); //}; not needed, save a byte! return this; // don't break the chain... }; /* ### Default implementation ### The plugin will attach itself to file inputs with the class 'multi' when the page loads */ $(function(){ $('input[@type=radio].star2').rating2(); }); /*# AVOID COLLISIONS #*/ })(jQuery); /*# AVOID COLLISIONS #*/