UNPKG

raty-js

Version:

Raty - A Star Rating Plugin

github.com/wbotelhos/raty

wbotelhos/raty

1,057 lines • 69.8 kB
<!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 &lt;https://github.com/wbotelhos/raty&gt;" class="i-github" target="blank" href="https://github.com/wbotelhos/raty"></a>
  <a title="Labs &lt;https://www.wbotelhos.com/labs&gt;" class="i-labs" target="blank" href="https://www.wbotelhos.com/labs"></a>

  <a title="Thank you! &lt;3" class="i-heart" href="javascript:void(0);"></a>

<div class="donations">
  <a target="_blank" href="https://www.patreon.com/wbotelhos/creators">Patreon</a>
  <span>•</span>
  <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=X8HEP2878NDEG&amp;item_name=jQuery%20Raty">Paypal</a>
</div>

</nav>


    <div class="clearfix"></div>

<article>
  <div class="article__body">
<h1>Default</h1>

<p>You need just to have a <code>div</code> to build the Raty.</p>

<div id="default"></div>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;div&gt;&lt;/div&gt;</span>
</code></pre></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
</code></pre></div>
<h1>Score</h1>

<p>Used when we want stars with a saved rating.</p>

<div id="score"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">score</span><span class="p">:</span> <span class="mi">3</span> <span class="p">});</span>
</code></pre></div>
<h1>Score callback</h1>

<p>If you need the starting score to be based on a dynamic value, you can use a callback for it.<br>
You can pass any value for it, not necessarily a data value, for example, you can use a field value.</p>

<div id="score-callback"></div>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">data-score=</span><span class="s">"1"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">score</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">2</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Score Name</h1>

<p>Changes the name of the hidden <a href="#score" rel="nofollow">score</a> field.</p>

<div id="scoreName"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">scoreName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">entity[score]</span><span class="dl">'</span> <span class="p">});</span>
</code></pre></div>
<h1>Data Support</h1>

<p>You can pass any <code>data-*</code> attribute via HTML and Raty will parse it and use it as an option.</p>

<div id="data-support" data-score="3" data-score-name="teacher[teacher_categories][0][value]"></div>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">data-score=</span><span class="s">"3"</span> <span class="na">data-score-name=</span><span class="s">"teacher[teacher_categories][0][value]"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
</code></pre></div>
<h1>Number</h1>

<p>Changes the number of stars.</p>

<div id="number"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">number</span><span class="p">:</span> <span class="mi">10</span> <span class="p">});</span>
</code></pre></div>
<h1>Number callback</h1>

<p>You can receive the <a href="#number" rel="nofollow">number</a> of stars dynamic using a callback to set it.</p>

<div id="number-callback"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">number</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">3</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Number Max</h1>

<p>Change the max number of stars that can be created.</p>

<div id="numberMax"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">numberMax</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span>
  <span class="na">number</span><span class="p">:</span>    <span class="mi">100</span>
<span class="p">});</span>
</code></pre></div>
<h1>Read Only</h1>

<p>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.<br>
Move the mouse over the stars to see:</p>

<div id="readOnly"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">readOnly</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">score</span><span class="p">:</span> <span class="mi">3</span> <span class="p">});</span>
</code></pre></div>
<h1>Read-Only callback</h1>

<p>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.</p>

<div id="readOnly-callback"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">readOnly</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Not Rated Message</h1>

<p>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.<br>
Hover the mouse over the star to see:</p>

<div id="noRatedMsg"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">readOnly</span><span class="p">:</span>   <span class="kc">true</span><span class="p">,</span>
  <span class="na">noRatedMsg</span><span class="p">:</span> <span class="dl">"</span><span class="s2">I'm readOnly and I haven't rated yet!</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div>
<h1>Half Show</h1>

<p>You can represent a float <a href="#score" rel="nofollow">score</a> as a half star icon.<br>
This option is just to <strong>show</strong> 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>.<br>
The <code>round</code> options showed below are just for the <strong>icon</strong>, the score remains a <strong>float</strong> always.</p>

<h2>Enabled</h2>

<p>The <code>round</code> rules are:</p>

<ul>
<li>Down: score &lt;= x.25 the star will be rounded down;</li>
<li>Half: score &gt; x.25 and &lt; x.76 the star will be a half star;</li>
<li>Up: score &gt;= x.76 the star will be rounded up.</li>
</ul>

<div id="halfShow-true"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">score</span><span class="p">:</span> <span class="mf">1.26</span> <span class="p">});</span>
</code></pre></div>
<h2>Disabled</h2>

<p>When <code>halfShow</code> is disabled, only the option <code>full</code> (<code>.6</code>) is checked:</p>

<ul>
<li>Down: score &lt; x.6 the star will be rounded down;</li>
<li>Up: score &gt;= x.6 the star will be rounded up;</li>
</ul>

<div id="halfShow-false"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">halfShow</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
  <span class="na">score</span><span class="p">:</span>    <span class="mf">1.59</span>
<span class="p">});</span>
</code></pre></div>
<h1>Round</h1>

<p>You can customize the round values of the <a href="#halfShow" rel="nofollow">halfShow</a> option.<br>
When <code>halfShow</code> is enabled, only <code>down</code> and <code>up</code> is used for round.<br>
You can specify just the attribute you want to change and keep the others as their defaults.</p>

<div id="round"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">round</span><span class="p">:</span> <span class="p">{</span> <span class="na">down</span><span class="p">:</span> <span class="p">.</span><span class="mi">26</span><span class="p">,</span> <span class="na">up</span><span class="p">:</span> <span class="p">.</span><span class="mi">76</span> <span class="p">},</span>
  <span class="na">score</span><span class="p">:</span> <span class="mf">1.26</span>
<span class="p">});</span>
</code></pre></div>
<h1>Half</h1>

<p>Enables the half star mouseover to make voting with half values possible.<br>
If you want to vote with more precision than a half value, please check the option <a href="#precision" rel="nofollow">precision</a>.</p>

<div id="half"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">half</span><span class="p">:</span>  <span class="kc">true</span><span class="p">,</span>
  <span class="na">hints</span><span class="p">:</span> <span class="p">[[</span><span class="dl">'</span><span class="s1">bad 1/2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bad</span><span class="dl">'</span><span class="p">],</span> <span class="p">[</span><span class="dl">'</span><span class="s1">poor 1/2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">poor</span><span class="dl">'</span><span class="p">],</span> <span class="p">[</span><span class="dl">'</span><span class="s1">regular 1/2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">regular</span><span class="dl">'</span><span class="p">],</span> <span class="p">[</span><span class="dl">'</span><span class="s1">good 1/2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">good</span><span class="dl">'</span><span class="p">],</span> <span class="p">[</span><span class="dl">'</span><span class="s1">gorgeous 1/2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">gorgeous</span><span class="dl">'</span><span class="p">]]</span>
<span class="p">});</span>
</code></pre></div>
<h1>Star Half</h1>

<p>Changes the name of the half star.<br>
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.</p>

<div id="starHalf"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">half</span><span class="p">:</span>     <span class="kc">true</span><span class="p">,</span>
  <span class="na">starHalf</span><span class="p">:</span> <span class="dl">'</span><span class="s1">star-half-mono.png</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<p>You can change the star icons.</p>

<div id="size"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span>  <span class="kc">true</span><span class="p">,</span>
  <span class="na">starOff</span><span class="p">:</span>       <span class="dl">'</span><span class="s1">star-off-big.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">starOn</span><span class="p">:</span>        <span class="dl">'</span><span class="s1">star-on-big.png</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Click</h1>

<p>You can write a callback to handle the <a href="#score" rel="nofollow">score</a> and the click <code>event</code> on click events.<br>
You can reference the Raty element (DOM) itself using <code>this</code>.</p>

<div id="click"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">click</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">,</span> <span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">ID: </span><span class="dl">'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">score: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">score</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">event: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Click Prevent</h1>

<p>If you return <code>false</code> into the callback, the click event will be prevented.</p>

<div id="click-prevent"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">click</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">,</span> <span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Score will not change.</span><span class="dl">'</span><span class="p">)</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Hints</h1>

<p>Changes the hint for each star by it position on array.<br>
If you pass <code>null</code>, the <a href="#score" rel="nofollow">score</a> value of this star will be the hint.<br>
If you pass <code>undefined</code>, this position will be ignored and receive the default hint.</p>

<div id="hints"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">hints</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="dl">''</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">,</span> <span class="dl">'</span><span class="s1">*_*</span><span class="dl">'</span><span class="p">]});</span>
</code></pre></div>
<h1>Path</h1>

<p>Changes the path where your icons are located.<br>
Set it only if you want the same path for all icons.<br>
Don't mind about the last slash of the path, if you don't put it, it will be setted for you.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">path</span><span class="p">:</span> <span class="dl">'</span><span class="s1">assets/images</span><span class="dl">'</span> <span class="p">});</span>
</code></pre></div>
<p>Now we have the following full paths: <strong>assets/images/star-on.png</strong>, <strong>assets/images/star-off.png</strong> and so.</p>

<h1>Path Callback</h1>

<p>You can set the path dynamically using callback.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">path</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="dl">'</span><span class="s1">/assets/vendor/raty</span><span class="dl">'</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Star Off and Star On</h1>

<p>Changes the icons.</p>

<div id="star-off-and-star-on"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">starOff</span><span class="p">:</span> <span class="dl">'</span><span class="s1">off.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">starOn</span><span class="p">:</span>  <span class="dl">'</span><span class="s1">on.png</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Cancel Button</h1>

<p>Add a cancel button on the left side of the stars to cancel the <a href="#score" rel="nofollow">score</a>.<br>
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.</p>

<div id="cancelButton"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
</code></pre></div>
<h1>Cancel Button Hint</h1>

<p>Like the stars, the <a href="#cancelButton" rel="nofollow">cancelButton</a> button has a hint too, and you can change it.<br>
Hover the mouse over the cancel button to see:</p>

<div id="cancelButtonHint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">cancelHint</span><span class="p">:</span>   <span class="dl">'</span><span class="s1">My cancel hint!</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Cancel Button Place</h1>

<p>Changes the <a href="#cancelButton" rel="nofollow">cancelButton</a> button to the right side.</p>

<div id="cancelButtonPlace"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">cancelPlace</span><span class="p">:</span>  <span class="dl">'</span><span class="s1">right</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Cancel off and Cancel On</h1>

<p>Changes the on and off icon of the <a href="#cancel" rel="nofollow">cancel</a> button.</p>

<div id="cancel-off-and-cancel-on"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">cancelOff</span><span class="p">:</span>    <span class="dl">'</span><span class="s1">cancel-off.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">cancelOn</span><span class="p">:</span>     <span class="dl">'</span><span class="s1">cancel-on.png</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Icon Range</h1>

<p>Is an array of objects where each one represents a custom icon.<br>
The <code>range</code> attribute is where the icon will be displayed (out of the five stars).<br>
The <code>on</code> attribute is the active icon when hovering.<br>
The <code>off</code> attribute is the default icon.</p>

<div id="iconRange"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">iconRange</span><span class="p">:</span> <span class="p">[</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">1.png</span><span class="dl">'</span><span class="p">,</span> <span class="na">off</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2.png</span><span class="dl">'</span><span class="p">,</span> <span class="na">off</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">3.png</span><span class="dl">'</span><span class="p">,</span> <span class="na">off</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">4</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">4.png</span><span class="dl">'</span><span class="p">,</span> <span class="na">off</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">5.png</span><span class="dl">'</span><span class="p">,</span> <span class="na">off</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span> <span class="p">}</span>
  <span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<p>You can use an interval of the same icon jumping some number.<br>
The <code>range</code> attribute must be in an ascending order.<br>
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.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">starOff</span><span class="p">:</span> <span class="dl">'</span><span class="s1">0.png</span><span class="dl">'</span><span class="p">,</span>

  <span class="na">iconRange</span><span class="p">:</span> <span class="p">[</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">1.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">3.png</span><span class="dl">'</span> <span class="p">},</span>
    <span class="p">{</span> <span class="na">range</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="na">on</span><span class="p">:</span> <span class="dl">'</span><span class="s1">5.png</span><span class="dl">'</span> <span class="p">}</span>
  <span class="p">]</span>
<span class="p">});</span>
</code></pre></div>
<p>Now we have all off icons as <strong>0.png</strong>, icons 1 and 2 as <strong>1.png</strong>, icon 3 as <strong>3.png</strong> and icons 4 and 5 as <strong>5.png</strong>. </p>

<h1>Target</h1>

<p>Displays the <a href="#hints" rel="nofollow">hints</a> or the <a href="#cancelButtonHint" rel="nofollow">cancelButtonHint</a>.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">target</span><span class="p">:</span>       <span class="dl">'</span><span class="s1">#hint</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<p>Your target can be a <code>div</code>.</p>

<div id="target-div"></div>

<div id="target-div-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre></div>
<p>Your target can be a <code>text</code> field.</p>

<div id="target-text"></div>

<p><input id="target-text-hint" type="text" class="input hint"></p>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"hint"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">/&gt;</span>
</code></pre></div>
<p>Your target can be a <code>textarea</code>.</p>

<div id="target-textarea"></div>

<p><textarea id="target-textarea-hint" class="input hint"></textarea></p>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
</code></pre></div>
<p>Your target can be a <code>select</code>.</p>

<div id="target-select"></div>

<p><select id="target-select-hint" class="input hint"><br>
  <option value="">--</option>
<br>
  <option value="bad">bad</option>
<br>
  <option value="poor">poor</option>
<br>
  <option value="regular">regular</option>
<br>
  <option value="good">good</option>
<br>
  <option value="gorgeous">gorgeous</option>
<br>
</select></p>
<div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>--<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"bad"</span><span class="nt">&gt;</span>bad<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"poor"</span><span class="nt">&gt;</span>poor<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"regular"</span><span class="nt">&gt;</span>regular<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"good"</span><span class="nt">&gt;</span>good<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"gorgeous"</span><span class="nt">&gt;</span>gorgeous<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
</code></pre></div>
<h1>Target Type</h1>

<p>You have the options of <code>hint</code> or <code>score</code>:<br>
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.<br>
For the <a href="#cancelButton" rel="nofollow">cancelButton</a> the value is empty.</p>

<div id="targetType"></div>

<div id="targetType-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">target</span><span class="p">:</span>       <span class="dl">'</span><span class="s1">#hint</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">targetType</span><span class="p">:</span>   <span class="dl">'</span><span class="s1">score</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Target Keep</h1>

<p>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.</p>

<div id="targetKeep"></div>

<div id="targetKeep-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">target</span><span class="p">:</span>       <span class="dl">'</span><span class="s1">#hint</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">targetKeep</span><span class="p">:</span>   <span class="kc">true</span>
<span class="p">});</span>
</code></pre></div>
<h1>Target Text</h1>

<p><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.<br>
If you want a message to show by default you can use this option.</p>

<div id="targetText"></div>

<div id="targetText-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">target</span><span class="p">:</span>     <span class="dl">'</span><span class="s1">#hint</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">targetText</span><span class="p">:</span> <span class="dl">'</span><span class="s1">--</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Target Format</h1>

<p>You can choose a template to be merged with your hints and displayed in the <a href="#target-div" rel="nofollow">target</a>.</p>

<div id="targetFormat"></div>

<div id="targetFormat-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">target</span><span class="p">:</span>       <span class="dl">'</span><span class="s1">#hint</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">targetFormat</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Rating: {score}</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Target Score</h1>

<p>You can keep the score value inside the blank element by default or choose where to put it.<br>
If you change the score target, the default score field won't be created.<br>
This is not a <a href="#target-div" rel="nofollow">target</a> option for display only, it is the real current score data.</p>

<div id="targetScore"></div>

<p><input id="target-score" type="text" class="input hint"></p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">targetScore</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#target</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div>
<h1>Mouseover</h1>

<p>You can handle events on mouseover.<br>
The arguments are the same as in the <a href="#click" rel="nofollow">click</a> callback.<br>
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.</p>

<div id="mouseover"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">mouseover</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">,</span> <span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">ID: </span><span class="dl">'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">score: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">score</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">event: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Mouseout</h1>

<p>You can handle the action on mouseout.<br>
The arguments is the same of the <a href="#mouseover" rel="nofollow">mouseover</a> callback.</p>

<div id="mouseout"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">mouseout</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">,</span> <span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">ID: </span><span class="dl">'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">score: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">score</span> <span class="o">+</span> <span class="dl">"</span><span class="se">\n</span><span class="s2">event: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h1>Precision</h1>

<p>You can get the exact position of the cursor to get a precise <a href="#score" rel="nofollow">score</a>.<br>
The score is still represented in full and half stars, but the <a href="#score" rel="nofollow">score</a> is saved as a float.<br>
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>.</p>

<div id="precision"></div>

<div id="precision-hint" class="input hint"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#precision</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">cancelOff</span><span class="p">:</span>   <span class="dl">'</span><span class="s1">cancel-off.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">cancelOn</span><span class="p">:</span>    <span class="dl">'</span><span class="s1">cancel-on.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">path</span><span class="p">:</span>        <span class="dl">'</span><span class="s1">raty/demo/images</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">starHalf</span><span class="p">:</span>    <span class="dl">'</span><span class="s1">star-half.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">starOff</span><span class="p">:</span>     <span class="dl">'</span><span class="s1">star-off.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">starOn</span><span class="p">:</span>      <span class="dl">'</span><span class="s1">star-on.png</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">target</span><span class="p">:</span>      <span class="dl">'</span><span class="s1">#precision-hint</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">targetKeep</span><span class="p">:</span>  <span class="kc">true</span><span class="p">,</span>

  <span class="na">precision</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">});</span>
</code></pre></div>
<h1>Space</h1>

<p>You can remove excess space between stars.</p>

<div id="space"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#space</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">space</span><span class="p">:</span> <span class="kc">false</span> <span class="p">});</span>
</code></pre></div>
<h1>Single</h1>

<p>You can specify the current star being hovered over should be illuminated, instead all preceding stars.</p>

<div id="single"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#single</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="na">single</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
</code></pre></div>
<h1>Star Type</h1>

<p>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>).</p>

<p>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.</p>

<div id="starType"></div>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
  <span class="na">cancelButton</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="na">half</span><span class="p">:</span>         <span class="kc">true</span><span class="p">,</span>
  <span class="na">starType</span><span class="p">:</span>     <span class="dl">'</span><span class="s1">i</span><span class="dl">'</span>  
<span class="p">});</span>
</code></pre></div>
<h1>Changing the settings globally</h1>

<p>You can change any options globally <code>$.fn.raty.defaults.OPTION = VALUE;</code>. It must be called before you bind the plugin.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">.</span><span class="nx">raty</span><span class="p">.</span><span class="nx">cancelButton</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">raty</span><span class="p">.</span><span class="nx">path</span>         <span class="o">=</span> <span class="dl">'</span><span class="s1">assets</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div>
<h1>Options</h1>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelButton</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>Creates a cancel button to cancel the rating.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelClass</span><span class="p">:</span> <span class="dl">'</span><span class="s1">raty-cancel</span><span class="dl">'</span>
</code></pre></div>
<p>Name of cancel's class.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelHint</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Cancel this rating!</span><span class="dl">'</span>
</code></pre></div>
<p>The cancel button's hint.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelOff</span><span class="p">:</span> <span class="dl">'</span><span class="s1">cancel-off.png</span><span class="dl">'</span>
</code></pre></div>
<p>Icon used on active cancel.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelOn</span><span class="p">:</span> <span class="dl">'</span><span class="s1">cancel-on.png</span><span class="dl">'</span>
</code></pre></div>
<p>Icon used inactive cancel.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">cancelPlace</span><span class="p">:</span> <span class="dl">'</span><span class="s1">left</span><span class="dl">'</span>
</code></pre></div>
<p>Cancel's button position.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">click</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Callback executed on rating click.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">half</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>Enables half star selection.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">halfShow</span><span class="p">:</span> <span class="kc">true</span>
</code></pre></div>
<p>Enables half star display.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">hints</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">bad</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">poor</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">regular</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">good</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">gorgeous</span><span class="dl">'</span><span class="p">]</span>
</code></pre></div>
<p>Hints used on each star.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">iconRange</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Object list with position and icon on and off (for mixed icons).</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">mouseout</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Callback executed on mouseout.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">mouseover</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Callback executed on mouseover.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">noRatedMsg</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Not rated yet!</span><span class="dl">'</span>
</code></pre></div>
<p>Hint for non rated elements when it's <a href="#readOnly" rel="nofollow">readOnly</a>.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">number</span><span class="p">:</span> <span class="mi">5</span>
</code></pre></div>
<p>Number of stars that will be presented.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">numberMax</span><span class="p">:</span> <span class="mi">20</span>
</code></pre></div>
<p>Max number of stars the option <a href="#number" rel="nofollow">number</a> will create.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">path</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>A global path where the icon will be found.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">precision</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>Enables the selection of a precise score.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">readOnly</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>Turns the rating read-only.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">round</span><span class="p">:</span> <span class="p">{</span> <span class="nl">down</span><span class="p">:</span> <span class="p">.</span><span class="mi">25</span><span class="p">,</span> <span class="nx">full</span><span class="p">:</span> <span class="p">.</span><span class="mi">6</span><span class="p">,</span> <span class="nx">up</span><span class="p">:</span> <span class="p">.</span><span class="mi">76</span> <span class="p">}</span>
</code></pre></div>
<p>Includes value attributes to do the <a href="#score" rel="nofollow">score</a> rounding math.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">score</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Initial rating.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">scoreName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">score</span><span class="dl">'</span>
</code></pre></div>
<p>Name of the hidden field that holds the score value.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">single</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>Enables single star selection.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">space</span><span class="p">:</span> <span class="kc">true</span>
</code></pre></div>
<p>Puts space between the icons.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">starHalf</span><span class="p">:</span> <span class="dl">'</span><span class="s1">star-half.png</span><span class="dl">'</span>
</code></pre></div>
<p>The name of the half star image.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">starOff</span><span class="p">:</span> <span class="dl">'</span><span class="s1">star-off.png</span><span class="dl">'</span>
</code></pre></div>
<p>Name of the star image off.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">starOn</span><span class="p">:</span> <span class="dl">'</span><span class="s1">star-on.png</span><span class="dl">'</span>
</code></pre></div>
<p>Name of the star image on.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">target</span><span class="p">:</span> <span class="kc">undefined</span>
</code></pre></div>
<p>Element selector where the <a href="#score" rel="nofollow">score</a> will be displayed.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">targetFormat</span><span class="p">:</span> <span class="dl">'</span><span class="s1">{score}</span><span class="dl">'</span>
</code></pre></div>
<p>Template to interpolate the <a href="#score" rel="nofollow">score</a> in.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">targetKeep</span><span class="p">:</span> <span class="kc">false</span>
</code></pre></div>
<p>If the last rating value will be kept on mouseout.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">targetText</span><span class="p">:</span> <span class="dl">''</span>
</code></pre></div>
<p>Default text in a <a href="target" rel="nofollow">target</a>.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">targetType</span><span class="p">:</span> <span class="dl">'</span><span class="s1">hint</span><span class="dl">'</span>
</code></pre></div>
<p>Choose if <a href="target" rel="nofollow">target</a> will receive a hint or the score number.</p>

<h1>Functions</h1>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">score</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div>
<p>Get the current score.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">score</span><span class="dl">'</span><span class="p">,</span> <span class="nx">number</span><span class="p">);</span>
</code></pre></div>
<p>Set a score.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nx">number</span><span class="p">);</span>
</code></pre></div>
<p>Click on a star.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">readOnly</span><span class="dl">'</span><span class="p">,</span> <span class="nx">boolean</span><span class="p">);</span>
</code></pre></div>
<p>Change the read-only state.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">cancel</span><span class="dl">'</span><span class="p">,</span> <span class="nx">boolean</span><span class="p">);</span>
</code></pre></div>
<p>Cancel the rating. The last param force the click callback.</p>
<div class="highlight"><pre class="highlight javascript"><code><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#star</span><span class="dl">'</span><span class="p">).</span><span class="nx">raty</span><span class="p">(</span><span class="dl">'</span><span class="s1">move</span><span class="dl">'</span><span class="p">,</span> <span class="nx">number</span><span class="p">);</span>
</code></pre></div>
<p>Move the mouse to the given score point position.</p>

<h1>Functions demo</h1>

<div class="functions">
  <div class="demo">
    <div id="functions"></div>
    <div id="functions-hint" class="input hint"></div>
  </div>

   <div class="item">
    <label for="score-function">score:</label>
    <input id="score-function" type="text" value="1" class="input">
    <a id="score-function-run" href="javascript:void(0);" title="score">run</a>
  </div>

  <div class="item">
    <label for="cancel-function">cancel:</label>
    <input id="cancel-function" type="text" value="true" class="input">
    <a id="cancel-function-run" href="javascript:void(0);" title="cancel">run</a>
  </div>

  <div class="item">
    <label for="get-score-function">score:</label>
    <input id="get-score-function" type="text" value="get" disabled class="input">
    <a id="get-score-function-run" href="javascript:void(0);" title="get score">run</a>
  </div>

  <div class="item">
    <label for="move-function">move:</label>
    <input id="move-function" type="text" value="3.7" class="input">
    <a id="move-function-run" href="javascript:void(0);" title="move">run</a>
  </div>
</div>
</div>
</article>

<div class="share">
  <p class="share__title">Share it!</p>

  <div class="twitter"><a title="via Twitter" target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?text=%22jQuery+Raty+%7C+A+Star+Rating+Plugin%22+~&amp;url=http%3A%2F%2Fwww.wbotelhos.com%2Fraty&amp;via=wbotelhos"><i class="i-twitter"></i></a></div>
</div>



  </div>

  <script>
  $.raty.path = 'images';

  $(function() {
    $('#default').raty();

$('#data-support').raty();

$('#score').raty({ score: 3 });

$('#score-callback').raty({
  score: function() {
    return $(this).attr('data-score');
  }
});

$('#scoreName').raty({ scoreName: 'entity[score]' });

$('#number').raty({ number: 10 });

$('#number-callback').raty({
  number: function() {
    return 3;
  }
});

$('#numberMax').raty({
  numberMax: 5,
  number:    100
});

$('#readOnly').raty({ readOnly: true, score: 3 });

$('#readOnly-callback').raty({
  readOnly: function() {
    return true;
  }
});

$('#noRatedMsg').raty({
  readOnly:  true,
  noRatedMsg: "I'm readOnly and I haven't rated yet!"
});

$('#halfShow-true').raty({ score: 1.26 });

$('#halfShow-false').raty({
  halfShow: false,
  score:    1.59
});

$('#round').raty({
  round: { down: .27, up: .76 },
  score: 1.26
});

$('#half').raty({
  half:  true,
  hints: [['bad 1/2', 'bad'], ['poor 1/2', 'poor'], ['regular 1/2', 'regular'], ['good 1/2', 'good'], ['gorgeous 1/2', 'gorgeous']]
});

$('#starHalf').raty({
  half:     true,
  path:     null,
  starHalf: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/star-half-mono.png',
  starOff:  'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/lib/images/star-off.png',
  starOn:   'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/lib/images/star-on.png'
});

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

$('#click-prevent').raty({
  click: function(score, evt) {
    alert('Score will not change.')
    return false;
  }
});

$('#hints').raty({ hints: ['a', null, '', undefined, '*_*']});

$('#cancelButton').raty({ cancelButton: true });

$('#cancelButtonHint').raty({
  cancelButton: true,
  cancelHint:   'My cancel hint!'
});

$('#cancelButtonPlace').raty({
  cancelButton: true,
  cancelPlace:  'right'
});

$('#star-off-and-star-on').raty({
  path:     'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images',
  starOff:  'off.png',
  starOn:   'on.png'
});

$('#cancel-off-and-cancel-on').raty({
  cancelButton: true,
  cancelOff:  'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/cancel-custom-off.png',
  cancelOn:   'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/cancel-custom-on.png',
  path:       null,
  starOff:    'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/lib/images/star-off.png',
  starOn:     'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/lib/images/star-on.png'
});

$('#iconRange').raty({
  path      : null,
  starOff   : 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/lib/images/star-off.png',
  iconRange : [
    { range: 1, on: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/1.png', off: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/0.png' },
    { range: 2, on: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/2.png', off: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/0.png' },
    { range: 3, on: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/3.png', off: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/0.png' },
    { range: 4, on: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/4.png', off: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/0.png' },
    { range: 5, on: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/5.png', off: 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images/0.png' }
  ]
});

$('#size').raty({
  path:        'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images',
  cancelButton: true,
  cancelOff:   'cancel-off.png',
  cancelOn:    'cancel-on.png',
  half:        true,
  starHalf:    'star-half.png',
  starOff:     'star-off.png',
  starOn:      'star-on.png'
});

$('#target-div').raty({
  cancelButton: true,
  target:       '#target-div-hint'
});

$('#target-text').raty({
  cancelButton: true,
  target:       '#target-text-hint'
});

$('#target-textarea').raty({
  cancelButton: true,
  target:       '#target-textarea-hint'
});

$('#target-select').raty({
  cancelButton: true,
  target:       '#target-select-hint'
});

$('#targetType').raty({
  cancelButton: true,
  target:       '#targetType-hint',
  targetType:   'score'
});

$('#targetKeep').raty({
  cancelButton: true,
  target:       '#targetKeep-hint',
  targetKeep:    true
});

$('#targetText').raty({
  target:     '#targetText-hint',
  targetText: '--'
});

$('#targetFormat').raty({
  target:       '#targetFormat-hint',
  targetFormat: 'Rating: {score}'
});

$('#targetScore').raty({
  targetScore: '#target-score'
});

$('#mouseover').raty({
  mouseover: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt.type);
  }
});

$('#mouseout').raty({
  mouseout: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt.type);
  }
});

$('#precision').raty({
  cancelButton: true,
  cancelOff:    'cancel-off.png',
  cancelOn:     'cancel-on.png',
  path:         'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images',
  starHalf:     'star-half.png',
  starOff:      'star-off.png',
  starOn:       'star-on.png',
  target:       '#precision-hint',
  targetKeep:  true,

  precision: true
});

$('#space').raty({ space: false });

$('#single').raty({ single: true });

$('#starType').raty({
  cancelButton: true,
  half:         true,
  starType:     'i'
});

$('#functions').raty({
  cancel     : true,
  cancelOff  : 'cancel-off.png',
  cancelOn   : 'cancel-on.png',
  path       : 'https://cdn.jsdelivr.net/npm/raty-js@2.8.0/demo/images',
  precision  : true,
  starHalf   : 'star-half.png',
  starOff    : 'star-off.png',
  starOn     : 'star-on.png',
  target     : '#functions-hint',
  targetKeep : true,
  click: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt.type);
  },
  hints: [
    ['bad 1'      , 'bad 2'      , 'bad 3'      , 'bad 4'      , 'bad 5'      , 'bad 6'      , 'bad 7'      , 'bad 8'      , 'bad 9'      , 'bad'      ], 
    ['poor 1'     , 'poor 2'     , 'poor 3'     , 'poor 4'     , 'poor 5'     , 'poor 6'     , 'poor 7'     , 'poor 8'     , 'poor 9'     , 'poor'     ], 
    ['regular 1'  , 'regular 2'  , 'regular 3'  , 'regular 4'  , 'regular 5'  , 'regular 6'  , 'regular 7'  , 'regular 8'  , 'regular 9'  , 'regular'  ], 
    ['good 1'     , 'good 2'     , 'good 3'     , 'good 4'     , 'good 5'     , 'good 6'     , 'good 7'     , 'good 8'     , 'good 9'     , 'good'     ], 
    ['gorgeous 1' , 'gorgeous 2' , 'gorgeous 3' , 'gorgeous 4' , 'gorgeous 5' , 'gorgeous 6' , 'gorgeous 7' , 'gorgeous 8' , 'gorgeous 9' , 'gorgeous' ]
  ]
});

$('#score-function-run').on('click', function() {
  $('#functions').data('raty').score($('#' + this.id.replace('-run', '')).val());
});

$('#click-function-run').on('click', function() {
  $('#functions').data('raty').click($('#' + this.id.replace('-run', '')).val());
});

$('#readOnly-function-run').on('click', function() {
var isReadOnly = $('#' + this.id.replace('-run', '')).val() === 'true';

  $('#functions').data('raty').readOnly(isReadOnly);
});

$('#cancel-function-run').on('click', function() {
  var isTrigger = $('#' + this.id.replace('-run', '')).val() === 'true';

  $('#functions').data('raty').cancel(isTrigger);
});

$('#get-score-function-run').on('click', function() {
  alert('score: ' + $('#functions').data('raty').score());
});

$('#move-function-run').on('click', function() {
  $('#functions').data('raty').move(document.querySelector('#' + this.id.replace('-run', '')).value);
});
  });
</script>

  
</body>
</html>