Defaulthttp:///raty You need just to have a <div></div> $('div').raty(); ScoreUsed when we want starts with a saved rating. $('div').raty({ score: 3 }); Score callbackIf you need to start you score depending of a dynamic value, you can to use callback for it. <div data-score="1"></div> $('div').raty({ score: function() { return $(this).attr('data-score'); } }); Score NameChanges the name of the hidden score field. $('div').raty({ scoreName: 'entity[score]' }); NumberChanges the number of stars. $('div').raty({ number: 10 }); Number callbackYou can receive the number of stars dynamic using callback to set it. <div data-number="3"></div> $('div').raty({ number: function() { return $(this).attr('data-number'); } }); Number MaxChange the maximum of start that can be created. $('div').raty({ numberMax : 5, number : 100 }); Read OnlyYou can prevent users to vote. It can be applied with or without score and all stars will receives the hint corresponding of the selected star. $('div').raty({ readOnly: true, score: 3 }); Read Only callbackYou can decide if the rating will be readOnly dynamically returning $('div').raty({ readOnly: function() { return 'true becomes readOnly' == 'true becomes readOnly'; } }); No Rated MessageIf readOnly is enabled and there is no score, the hint "Not rated yet!" will be shown for all stars. But you can change it. $('div').raty({ readOnly : true, noRatedMsg : "I'am readOnly and I haven't rated yet!" }); Half ShowYou can represent a float score as a half star icon. EnabledThe round rules are:
$('div').raty({ score: 3.26 }); DisabledThe rules becomes:
$('div').raty({ halfShow : false, score : 3.26 }); RoundYou can customize the round values of the halfShow option. $('div').raty({ round : { down: .26, full: .6, up: .76 }, score : 3.26 }); HalfEnables the half star mouseover to be possible vote with half values. $('#star').raty({ half: true }); Star HalfChanges the name of the half star. $('div').raty({ half : true, starHalf : 'star-half-mono.png' }); ClickCallback to handle the score and the click $('div').raty({ click: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } }); HintsChanges the hint for each star by it position on array. $('div').raty({ hints: ['a', null, '', undefined, '*_*']}); PathChanges the path where your icons are located. $('div').raty({ path: 'assets/images' }); Now we have the following full paths: assets/images/star-on.png, assets/images/star-off.png and so. Star Off and Star OnChanges the name of the star on and star off. $('div').raty({ starOff : 'off.png', starOn : 'on.png' }); CancelAdd a cancel button on the left side of the stars to cacel the score. $('div').raty({ cancel: true }); Cancel HintLike the stars, the cancel button have a hint too, and you can change it. $('div').raty({ cancel : true, cancelHint : 'My cancel hint!' }); Cancel PlaceChanges the cancel button to the right side. $('div').raty({ cancel : true, cancelPlace : 'right' }); Cancel off and Cancel OnChanges the on and off icon of the cancel button. $('div').raty({ cancel : true, cancelOff : 'cancel-off.png', cancelOn : 'cancel-on.png' }); Icon RangeIt's an array of objects where each one represents a custom icon. $('div').raty({ iconRange: [ { range: 1, on: '1.png', off: '0.png' }, { range: 2, on: '2.png', off: '0.png' }, { range: 3, on: '3.png', off: '0.png' }, { range: 4, on: '4.png', off: '0.png' }, { range: 5, on: '5.png', off: '0.png' } ] }); You can use an interval of the same icon jumping some number. $('div').raty({ starOff : '0.png', iconRange : [ { range : 1, on: '1.png' }, { range : 3, on: '3.png' }, { range : 5, on: '5.png' } ] }); Now we have all off icons as 0.png, icons 1 and 2 as 1.png, icon 3 as 3.png and icons 4 and 5 as 5.png. SizeThe size in pixel of the icon you will to use. $('div').raty({ cancel : true, half : true, size : 24 }); WidthBy default Raty calculates the width calculating the size of the stars plus the spaces. $('div').raty({ width: 150 }); TargetSome place to display the hints or the cancelHint. $('div').raty({ cancel : true, target : '#hint' }); Your target can be a <div id="hint"></div> Your target can be a <input id="hint" type="text" /> Your target can be a
<textarea id="hint"></textarea> Your target can be a
<select id="hint"> <option value="">--</option> <option value="bad">bad</option> <option value="poor">poor</option> <option value="regular">regular</option> <option value="good">good</option> <option value="gorgeous">gorgeous</option> </select> Target TypeYou have the option $('div').raty({ cancel : true, target : '#hint', targetType : 'number' }); Target KeepIf you want to keep the score into the hint box after you do the rating, turn on this option. $('div').raty({ cancel : true, target : '#hint', targetKeep : true }); Target TextNormally all target is keeped blank if you don't use the targetKeep option. --
$('div').raty({ target : '#hint', targetText : '--' }); Target FormatYou can choose a template to be merged with your hints and displayed on target. $('div').raty({ target : '#hint', targetFormat : 'Rating: {score}' }); MouseoverYou can handle the action on mouseover. $('div').raty({ mouseover: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } }); MouseoutYou can handle the action on mouseout. $('div').raty({ mouseout: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } }); PrecisionYou can get the right position of the cursor to get a precision score. $('#precision').raty({ cancel : true, cancelOff : 'cancel-off.png', cancelOn : 'cancel-on.png', path : 'raty/demo/images', size : 24, starHalf : 'star-half.png', starOff : 'star-off.png', starOn : 'star-on.png', target : '#precision-hint', targetKeep : true, precision : true }); SpaceYou can take off the space between the star. $('#space').raty({ space: false }); SingleYou can turn on just the mouseovered star instead all from the first until that one. $('#single').raty({ single: true }); Changing the settings globallyYou can change any option mentioning the scope $.fn.raty.defaults.path = assets; $.fn.raty.defaults.cancel = true; Optionscancel: false Creates a cancel button to cancel the rating. cancelHint: 'Cancel this rating!' The cancel's button hint. cancelOff: 'cancel-off.png' Icon used on active cancel. cancelOn: 'cancel-on.png' Icon used inactive cancel. cancelPlace: 'left' Cancel's button position. click: undefined Callback executed on rating click. half: false Enables half star selection. halfShow: true Enables half star display. hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'] Hints used on each star. iconRange: undefined Object list with position and icon on and off to do a mixed icons. mouseout: undefined Callback executed on mouseout. mouseover: undefined Callback executed on mouseover. noRatedMsg: 'Not rated yet!' Hint for no rated elements when it's readOnly. number: 5 Number of stars that will be presented. numberMax: 20 Max of star the option number can creates. path: undefined A global locate where the icon will be looked. precision: false Enables the selection of a precision score. readOnly: false Turns the rating read-only. round: { down: .25, full: .6, up: .76 } Included values attributes to do the score round math. score: undefined Initial rating. scoreName: 'score' Name of the hidden field that holds the score value. single: false Enables just a single star selection. size: 16 The size of the icons that will be used. space: true Puts space between the icons. starHalf: 'star-half.png' The name of the half star image. starOff: 'star-off.png' Name of the star image off. starOn: 'star-on.png' Name of the star image on. target: undefined Element selector where the score will be displayed. targetFormat: '{score}' Template to interpolate the score in. targetKeep: false If the last rating value will be keeped after mouseout. targetText: '' Default text setted on target. targetType: 'hint' Option to choose if target will receive hint or the score number. width: undefined Manually adjust the width for the project. Functions$('#star').raty('score'); Get the current score. If there is no score then undefined will be returned. $('#star').raty('score', number); Set a score. $('#star').raty('click', number); Click on some star. It always call the click callback if it exists. $('.star').raty('readOnly', boolean); Change the read-only state. $('#star').raty('cancel', boolean); Cancel the rating. The boolean parameter tells if the click will be called or not. If you ommit it, false it will be. $('#star').raty('reload'); Reload the rating with the same configuration it was binded. $('#star').raty('set', { option: value }); Reset the rating with new configurations. Only options especified will be overrided. $('#star').raty('destroy'); Destroy the bind and gives you the raw element before the bind. $('#star').raty('move', number); Move the mouse to the given score point position. |
|