JQuery Raty star Rating plugin how to use

With jquery Raty, it is convenient to embed a scoring component on the page as follows:

Using the method is simple, first download Raty source code from Https://github.com/wbotelhos/raty (dependent on jquery)

Then introduce the corresponding JS file, CSS file, picture resource on the page, add the following jquery code on the element that needs to add the scoring component (such as the span tag):

$(‘span‘).raty();

The above is the default usage for jquery Raty, which also supports rich incoming parameters and callback functions, such as:

Set the initial score for jquery Raty:

Scoring callback function

If you need to set the initial score dynamically based on the background, you can use a callback function. For example, use the Data-attribute property in the div:

<div data-score= "1" ></div>

$(‘div‘).raty({  score: function() {    return $(this).attr(‘data-score‘); }});

You can also change the number of stars:

$(‘div‘).raty({ number: 10 });

Read-only mode:

$(‘div‘).raty({ readOnly: true, score: 3 });

Click events:

$(‘div‘).raty({  click: function(score, evt) {    alert(‘ID: ‘ + this.id + "\nscore: " + score + "\nevent: " + evt); }});

Path:

Change the location of the icon save, all icons need to be in the same directory, the end of the path/not add can also

<div data-path= "Assets/images" ></div>

$(‘div‘).raty({  path: function() {    return this.getAttribute(‘data-path‘); }});

To cancel a rating:

$(‘div‘).raty({ cancel: true });

Global Change settings:

You can globally change all of the above mentioned settings $.fn.raty.defaults.option = VALUE;. The statement must be added before the plug-in binding.

true;

Parameter list:

Cancel:FalseCreates a Cancel button to cancel the rating.Cancelclass:' Raty-cancel 'Name of the Cancel ' s class.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:UndefinedCallback executed on rating click.Half:FalseEnables half star selection.Halfshow:TrueEnables half star display.Hints:[' Bad ',' Poor ',' Regular ',' Good ',' Gorgeous ']Hints used on each star.Iconrange:UndefinedThe Object list with position and icon on and off to do a mixed icons.Mouseout:UndefinedCallback executed on mouseout.MouseOver:UndefinedCallback executed on mouseover.Noratedmsg:' Not rated yet! 'Hint for no rated elements when it ' s readOnly.Number:5Number of stars that would be presented.Numbermax:20Max of Star The option number can creates.Path:UndefinedA Global locate where the icon would be looked.Precision:FalseEnables the selection of a precision score.ReadOnly:FalseTurns the rating read-only.Round:{Down:.25,Full:.6,Up:.76}Included values attributes to do the score round math.Score:UndefinedInitial rating.Scorename:' Score 'Name of the hidden field that holds the score value.Single:FalseEnables just a single star selection.Space:TruePuts 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:UndefinedElement selector where the score would be displayed.Targetformat:  ' {score} ' //Template to interpolate the score in. targetkeep : false //If the last rating value would Be keeped after mouseout. targetscore : undefined //Element selector where The score would be filled, instead of creating a new hidden field (scorename option). targettext :  "//Default text setted on target.< Span class= "NX" >targettype :  ' hint ' //Option to choose if Target would Receive hint O ' score ' type. startype :  ' img ' //Element used to represent a star . 

List of callback functions:

$(' Div ').Raty(' Score ');Get the current score.$(' Div ').Raty(' Score ',Number);Set the score.$(' Div ').Raty(' Click ',Number);Click on some star.$(' Div ').Raty(' ReadOnly ',Boolean);Change the read-only state.$(' Div ').Raty(' Cancel ',Boolean);Cancel the rating. The last param force the click Callback.$(' Div ').Raty(' Reload ');Reload the rating with the current configuration.$( ' div ' ). raty ( ' Set ' { option: value }); //Reset the rating with new configurations. $ ( ' div ' ).  Raty ( ' destroy ' //Destroy the bind and give you the raw element. $ ( ' div ' ).  Raty ( ' move ' number//Move the mouse to the given score point position.         

This article reprinted, Link address: http://bookshadow.com/weblog/2014/08/16/jquery-raty-star-plugin/

JQuery Raty star Rating plugin how to use