raty-js

<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="author" content="Washington Botelho"> <meta name="description" content="A Star Rating Plugin"> <meta name="google" content="notranslate"> <meta name="keywords" content="jquery,rating,raty,voto,star,staring,classificacao,classificar,votar,plugin,javascript,library"> <meta name="robots" content="ALL"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <title>Artigos sobre Ruby, Rails, Java, VRaptor, Python, jQuery, JavaScript, CSS e muito mais. - Washington Botelho</title> <meta name="csrf-param" content="authenticity_token"> <meta name="csrf-token" content="vJ9+LH0W7XbiuSADVEdw9hITYLQkvubFx/ohuANnFyGef0qx7IiKBz2tnk9LrxQefQssnRfyjTqrxbu0wkRCXw=="> <link rel="stylesheet" media="screen" href="stylesheets/labs.css"> <link rel="stylesheet" href="../lib/jquery.raty.css"> <style>.functions .demo { margin-bottom: 10px; } .functions .item { background-color: #FEFEFE; border-radius: 4px; display: inline-block; margin-bottom: 5px; padding: 5px 10px; } .functions .item a { border: 1px solid #CCC; margin-left: 10px; padding: 5px; text-decoration: none; } .functions .item input { display: inline-block; margin-left: 2px; padding: 5px 6px; width: 120px; } .functions .item label { display: inline-block; font-size: 1.1em; font-weight: bold; } .hint { font-size: 16px; padding: 5px 10px; text-align: center; width: 160px; } div.hint { margin-top: 10px; } </style> <script src="../node_modules/jquery/dist/jquery.min.js"></script><script src="../lib/jquery.raty.js"></script> <script src="javascripts/labs.js"></script> </head> <body> <div class="container"> <div role="banner" class="header"> <a class="header__title" href="https://www.wbotelhos.com/raty">jQuery Raty</a> <div class="header__subtitle"> A Star Rating Plugin </div> </div> <nav role="navigation" class="navigation"> <a title="Download vv3.0.0" class="i-file-zip" href="https://github.com/wbotelhos/raty/archive/v3.0.0.zip"></a> <a title="Github <https://github.com/wbotelhos/raty>" class="i-github" target="blank" href="https://github.com/wbotelhos/raty"></a> <a title="Labs <https://www.wbotelhos.com/labs>" class="i-labs" target="blank" href="https://www.wbotelhos.com/labs"></a> <a title="Thank you! <3" class="i-heart" href="javascript:void(0);"></a> <div class="donations"> <a target="_blank" href="https://www.patreon.com/wbotelhos/creators">Patreon</a> • <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Raty">Paypal</a> </div> </nav> <div class="clearfix"></div> <article> <div class="article__body"> <h1>Default</h1> You need just to have a <code>div</code> to build the Raty. <div id="default"></div> <div class="highlight"><pre class="highlight html"><code><div></div> </code></pre></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty(); </code></pre></div> <h1>Score</h1> Used when we want stars with a saved rating. <div id="score"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ score: 3 }); </code></pre></div> <h1>Score callback</h1> If you need the starting score to be based on a dynamic value, you can use a callback for it. You can pass any value for it, not necessarily a data value, for example, you can use a field value. <div id="score-callback"></div> <div class="highlight"><pre class="highlight html"><code><div data-score="1"></div> </code></pre></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ score: function() { return 2 * 2; } }); </code></pre></div> <h1>Score Name</h1> Changes the name of the hidden <a href="#score" rel="nofollow">score</a> field. <div id="scoreName"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ scoreName: 'entity[score]' }); </code></pre></div> <h1>Data Support</h1> You can pass any <code>data-*</code> attribute via HTML and Raty will parse it and use it as an option. <div id="data-support" data-score="3" data-score-name="teacher[teacher_categories][0][value]"></div> <div class="highlight"><pre class="highlight html"><code><div data-score="3" data-score-name="teacher[teacher_categories][0][value]"></div> </code></pre></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty(); </code></pre></div> <h1>Number</h1> Changes the number of stars. <div id="number"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ number: 10 }); </code></pre></div> <h1>Number callback</h1> You can receive the <a href="#number" rel="nofollow">number</a> of stars dynamic using a callback to set it. <div id="number-callback"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ number: function() { return 3; } }); </code></pre></div> <h1>Number Max</h1> Change the max number of stars that can be created. <div id="numberMax"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ numberMax: 5, number: 100 }); </code></pre></div> <h1>Read Only</h1> You can prevent users from voting. It can be applied with or without a <a href="#score" rel="nofollow">score</a> and all additional stars will show the "<a href="#hints" rel="nofollow">hint</a>" stars. Move the mouse over the stars to see: <div id="readOnly"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ readOnly: true, score: 3 }); </code></pre></div> <h1>Read-Only callback</h1> You can decide if the rating will be <a href="#readOnly" rel="nofollow">readOnly</a> dynamically returning <code>true</code> of <code>false</code> on callback. <div id="readOnly-callback"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ readOnly: function() { return true; } }); </code></pre></div> <h1>Not Rated Message</h1> If <a href="#readOnly" rel="nofollow">readOnly</a> is enabled and there is no <a href="#score" rel="nofollow">score</a>, the <a href="#hint" rel="nofollow">hint</a> "Not rated yet!" will be shown for all stars. But you can change it. Hover the mouse over the star to see: <div id="noRatedMsg"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ readOnly: true, noRatedMsg: "I'm readOnly and I haven't rated yet!" }); </code></pre></div> <h1>Half Show</h1> You can represent a float <a href="#score" rel="nofollow">score</a> as a half star icon. This option is just to show the half star. If you want to enable voting with half stars on mouseover, please check the option <a href="#half" rel="nofollow">half</a>. The <code>round</code> options showed below are just for the icon, the score remains a float always. <h2>Enabled</h2> The <code>round</code> rules are: <ul> <li>Down: score <= x.25 the star will be rounded down;</li> <li>Half: score > x.25 and < x.76 the star will be a half star;</li> <li>Up: score >= x.76 the star will be rounded up.</li> </ul> <div id="halfShow-true"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ score: 1.26 }); </code></pre></div> <h2>Disabled</h2> When <code>halfShow</code> is disabled, only the option <code>full</code> (<code>.6</code>) is checked: <ul> <li>Down: score < x.6 the star will be rounded down;</li> <li>Up: score >= x.6 the star will be rounded up;</li> </ul> <div id="halfShow-false"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ halfShow: false, score: 1.59 }); </code></pre></div> <h1>Round</h1> You can customize the round values of the <a href="#halfShow" rel="nofollow">halfShow</a> option. When <code>halfShow</code> is enabled, only <code>down</code> and <code>up</code> is used for round. You can specify just the attribute you want to change and keep the others as their defaults. <div id="round"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ round: { down: .26, up: .76 }, score: 1.26 }); </code></pre></div> <h1>Half</h1> Enables the half star mouseover to make voting with half values possible. If you want to vote with more precision than a half value, please check the option <a href="#precision" rel="nofollow">precision</a>. <div id="half"></div> <div class="highlight"><pre class="highlight javascript"><code>$('#star').raty({ half: true, hints: [['bad 1/2', 'bad'], ['poor 1/2', 'poor'], ['regular 1/2', 'regular'], ['good 1/2', 'good'], ['gorgeous 1/2', 'gorgeous']] }); </code></pre></div> <h1>Star Half</h1> Changes the name of the half star. Pay attention, when you want to specify a different icon with a different directory, you must to set the <a href="#path" rel="nofollow">path</a> option to <code>null</code> to prepending the star's original path to your path. You will then have to specify all other icons with their explicit original path. <div id="starHalf"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ half: true, starHalf: 'star-half-mono.png' }); </code></pre></div> You can change the star icons. <div id="size"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, starOff: 'star-off-big.png', starOn: 'star-on-big.png' }); </code></pre></div> <h1>Click</h1> You can write a callback to handle the <a href="#score" rel="nofollow">score</a> and the click <code>event</code> on click events. You can reference the Raty element (DOM) itself using <code>this</code>. <div id="click"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ click: function(score, evt) { alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt); } }); </code></pre></div> <h1>Click Prevent</h1> If you return <code>false</code> into the callback, the click event will be prevented. <div id="click-prevent"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ click: function(score, evt) { alert('Score will not change.') return false; } }); </code></pre></div> <h1>Hints</h1> Changes the hint for each star by it position on array. If you pass <code>null</code>, the <a href="#score" rel="nofollow">score</a> value of this star will be the hint. If you pass <code>undefined</code>, this position will be ignored and receive the default hint. <div id="hints"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ hints: ['a', null, '', undefined, '*_*']}); </code></pre></div> <h1>Path</h1> Changes the path where your icons are located. Set it only if you want the same path for all icons. Don't mind about the last slash of the path, if you don't put it, it will be setted for you. <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ path: 'assets/images' }); </code></pre></div> Now we have the following full paths: assets/images/star-on.png, assets/images/star-off.png and so. <h1>Path Callback</h1> You can set the path dynamically using callback. <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ path: function() { return '/assets/vendor/raty'; } }); </code></pre></div> <h1>Star Off and Star On</h1> Changes the icons. <div id="star-off-and-star-on"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ starOff: 'off.png', starOn: 'on.png' }); </code></pre></div> <h1>Cancel Button</h1> Add a cancel button on the left side of the stars to cancel the <a href="#score" rel="nofollow">score</a>. Inside the <a href="#click" rel="nofollow">click</a> callback the argument code receives the value <code>null</code> when we click on the cancel button. <div id="cancelButton"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true }); </code></pre></div> <h1>Cancel Button Hint</h1> Like the stars, the <a href="#cancelButton" rel="nofollow">cancelButton</a> button has a hint too, and you can change it. Hover the mouse over the cancel button to see: <div id="cancelButtonHint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, cancelHint: 'My cancel hint!' }); </code></pre></div> <h1>Cancel Button Place</h1> Changes the <a href="#cancelButton" rel="nofollow">cancelButton</a> button to the right side. <div id="cancelButtonPlace"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, cancelPlace: 'right' }); </code></pre></div> <h1>Cancel off and Cancel On</h1> Changes the on and off icon of the <a href="#cancel" rel="nofollow">cancel</a> button. <div id="cancel-off-and-cancel-on"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, cancelOff: 'cancel-off.png', cancelOn: 'cancel-on.png' }); </code></pre></div> <h1>Icon Range</h1> Is an array of objects where each one represents a custom icon. The <code>range</code> attribute is where the icon will be displayed (out of the five stars). The <code>on</code> attribute is the active icon when hovering. The <code>off</code> attribute is the default icon. <div id="iconRange"></div> <div class="highlight"><pre class="highlight javascript"><code>$('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' } ] }); </code></pre></div> You can use an interval of the same icon jumping some number. The <code>range</code> attribute must be in an ascending order. If the value <code>on</code> or <code>off</code> is omitted then the attribute <code>starOn</code> and <code>starOff</code> will be used. <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ starOff: '0.png', iconRange: [ { range: 1, on: '1.png' }, { range: 3, on: '3.png' }, { range: 5, on: '5.png' } ] }); </code></pre></div> 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. <h1>Target</h1> Displays the <a href="#hints" rel="nofollow">hints</a> or the <a href="#cancelButtonHint" rel="nofollow">cancelButtonHint</a>. <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, target: '#hint' }); </code></pre></div> Your target can be a <code>div</code>. <div id="target-div"></div> <div id="target-div-hint" class="input hint"></div> <div class="highlight"><pre class="highlight html"><code><div id="hint"></div> </code></pre></div> Your target can be a <code>text</code> field. <div id="target-text"></div> <input id="target-text-hint" type="text" class="input hint"> <div class="highlight"><pre class="highlight html"><code><input id="hint" type="text" /> </code></pre></div> Your target can be a <code>textarea</code>. <div id="target-textarea"></div> <textarea id="target-textarea-hint" class="input hint"></textarea> <div class="highlight"><pre class="highlight html"><code><textarea id="hint"></textarea> </code></pre></div> Your target can be a <code>select</code>. <div id="target-select"></div> <select id="target-select-hint" class="input 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> <div class="highlight"><pre class="highlight html"><code><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> </code></pre></div> <h1>Target Type</h1> You have the options of <code>hint</code> or <code>score</code>: If you choose to see the <a href="#score" rel="nofollow">score</a> instead of the <a href="#hints" rel="nofollow">hints</a> using the value <code>score</code> you will get the numerical value of the star. For the <a href="#cancelButton" rel="nofollow">cancelButton</a> the value is empty. <div id="targetType"></div> <div id="targetType-hint" class="input hint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, target: '#hint', targetType: 'score' }); </code></pre></div> <h1>Target Keep</h1> If you want the <a href="#score" rel="nofollow">score</a> to remain in the hint box after providing the rating, turn on this option. <div id="targetKeep"></div> <div id="targetKeep-hint" class="input hint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, target: '#hint', targetKeep: true }); </code></pre></div> <h1>Target Text</h1> <a href="#target-div" rel="nofollow">Target</a> will blank if you don't use the <a href="#targetKeep" rel="nofollow">targetKeep</a> option, after rolling the mouse away from the ratings. If you want a message to show by default you can use this option. <div id="targetText"></div> <div id="targetText-hint" class="input hint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ target: '#hint', targetText: '--' }); </code></pre></div> <h1>Target Format</h1> You can choose a template to be merged with your hints and displayed in the <a href="#target-div" rel="nofollow">target</a>. <div id="targetFormat"></div> <div id="targetFormat-hint" class="input hint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ target: '#hint', targetFormat: 'Rating: {score}' }); </code></pre></div> <h1>Target Score</h1> You can keep the score value inside the blank element by default or choose where to put it. If you change the score target, the default score field won't be created. This is not a <a href="#target-div" rel="nofollow">target</a> option for display only, it is the real current score data. <div id="targetScore"></div> <input id="target-score" type="text" class="input hint"> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ targetScore: '#target' }); </code></pre></div> <h1>Mouseover</h1> You can handle events on mouseover. The arguments are the same as in the <a href="#click" rel="nofollow">click</a> callback. The options <a href="#target-div" rel="nofollow">target</a>, <a href="#targetFormat" rel="nofollow">targetFormat</a>, <a href="#targetKeep" rel="nofollow">targetKeep</a>, <a href="#targetText" rel="nofollow">targetText</a> and <a href="#targetType" rel="nofollow">targetType</a> are abstractions of this callback. You can do it by yourself. <div id="mouseover"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ mouseover: function(score, evt) { alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt); } }); </code></pre></div> <h1>Mouseout</h1> You can handle the action on mouseout. The arguments is the same of the <a href="#mouseover" rel="nofollow">mouseover</a> callback. <div id="mouseout"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ mouseout: function(score, evt) { alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt); } }); </code></pre></div> <h1>Precision</h1> You can get the exact position of the cursor to get a precise <a href="#score" rel="nofollow">score</a>. The score is still represented in full and half stars, but the <a href="#score" rel="nofollow">score</a> is saved as a float. When you enable this option the <a href="#half" rel="nofollow">half</a> option is automatically enabled and <a href="#targetType" rel="nofollow">targetType</a> is changed to <code>score</code>. <div id="precision"></div> <div id="precision-hint" class="input hint"></div> <div class="highlight"><pre class="highlight javascript"><code>$('#precision').raty({ cancelButton: true, cancelOff: 'cancel-off.png', cancelOn: 'cancel-on.png', path: 'raty/demo/images', starHalf: 'star-half.png', starOff: 'star-off.png', starOn: 'star-on.png', target: '#precision-hint', targetKeep: true, precision: true }); </code></pre></div> <h1>Space</h1> You can remove excess space between stars. <div id="space"></div> <div class="highlight"><pre class="highlight javascript"><code>$('#space').raty({ space: false }); </code></pre></div> <h1>Single</h1> You can specify the current star being hovered over should be illuminated, instead all preceding stars. <div id="single"></div> <div class="highlight"><pre class="highlight javascript"><code>$('#single').raty({ single: true }); </code></pre></div> <h1>Star Type</h1> Lets you to change the star element type. Changing it from <code>img</code> to <code>i</code>, for example, changes from an image to a glyph. There is a sample stylesheet (<code>demo/stylesheets/jquery.raty.css</code>) using a sample fonts (<code>demo/fonts/jquery.raty.[eot|svg|ttf|woff]</code>). To be easier to use, we replaced the dot (.) extension to a hyphen (-), so you do not need to change the original names, just set the names to your fonts. We recommend you use the <a href="http://icomoon.io" rel="nofollow">Ico Moon</a> app which allows you to download only the relevant icons only and rename them. <div id="starType"></div> <div class="highlight"><pre class="highlight javascript"><code>$('div').raty({ cancelButton: true, half: true, starType: 'i' }); </code></pre></div> <h1>Changing the settings globally</h1> You can change any options globally <code>$.fn.raty.defaults.OPTION = VALUE;</code>. It must be called before you bind the plugin. <div class="highlight"><pre class="highlight javascript"><code>$.raty.cancelButton = true; $.raty.path = 'assets'; </code></pre></div> <h1>Options</h1> <div class="highlight"><pre class="highlight javascript"><code>cancelButton: false </code></pre></div> Creates a cancel button to cancel the rating. <div class="highlight"><pre class="highlight javascript"><code>cancelClass: 'raty-cancel' </code></pre></div> Name of cancel's class. <div class="highlight"><pre class="highlight javascript"><code>cancelHint: 'Cancel this rating!' </code></pre></div> The cancel button's hint. <div class="highlight"><pre class="highlight javascript"><code>cancelOff: 'cancel-off.png' </code></pre></div> Icon used on active cancel. <div class="highlight"><pre class="highlight javascript"><code>cancelOn