基本信息
源码名称：jQuery Raty星级插件
源码大小：0.14M
文件格式：.zip
开发语言：js
更新时间：2019-04-23
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport"/>
<title>jQuery Raty星级插件</title>
<link type="text/css" rel="stylesheet" href="demo/css/application.css"/>
<script type="text/javascript" src="demo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.raty.min.js"></script>
</head>
<body>
<div id="wrapper">
<header role="banner">
<div id="logo">
<h1><a href="#" title="jQuery Raty">jQuery Raty星级插件</a></h1>
</div>
</header>
<div id="container">
<section role="main">
<article>
<h2 id="default">
<a href="#default">默认</a>
</h2>
<p>你只需要有一个 div构建Raty。</p>
<div class="demo">
<div id="default-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"star"</span><span class="nt">></div></span>
</pre>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
</pre>
</div>
<h2 id="score">
<a href="#score">初始化星星分数</a>
</h2>
<div class="demo">
<div id="score-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">score</span><span class="o">:</span> <span class="mi">3</span> <span class="p">});</span>
</pre>
</div>
<h2 id="score-callback">
<a href="#score-callback">分数回调</a>
</h2>
<p>
对应分数不同的动态值,您可以使用回调.<br/>
</p>
<div class="demo">
<div id="score-callback-demo" data-score="1"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"star"</span> <span class="na">data-score=</span><span class="s">"1"</span><span class="nt">></div></span>
</pre>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">score</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-score'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="number">
<a href="#number">数量</a>
</h2>
<p>改变星星的数量为10个。</p>
<div class="demo">
<div id="number-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">number</span><span class="o">:</span> <span class="mi">10</span> <span class="p">});</span>
</pre>
</div>
<h2 id="numberMax">
<a href="#numberMax">设置星星最多数量</a>
</h2>
<div class="demo">
<div id="numberMax-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#numberMax-demo'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">numberMax</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span>
<span class="nx">number</span> <span class="o">:</span> <span class="mi">500</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="scoreName">
<a href="#scoreName">可更改分数名称字段</a>
</h2>
<div class="demo">
<div id="scoreName-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">scoreName</span><span class="o">:</span> <span class="s1">'entity[score]'</span> <span class="p">});</span>
</pre>
</div>
<h2 id="number-callback">
<a href="#number-callback">数量的回调</a>
</h2>
<p>你可以使用回调函数来设置星星数量。</p>
<div class="demo">
<div id="number-callback-demo" data-number="3"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"star"</span> <span class="na">data-number=</span><span class="s">"3"</span><span class="nt">></div></span>
</pre>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">number</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-number'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="readOnly">
<a href="#readOnly">只读</a>
</h2>
<p>
在用户已投完票不可再点击
</p>
<div class="demo">
<div id="readOnly-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">readOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">score</span><span class="o">:</span> <span class="mi">3</span> <span class="p">});</span>
</pre>
</div>
<h2 id="readOnly-callback">
<a href="#readOnly-callback">只读回调</a>
</h2>
<p>
根据评级只读返回true或false进行回调
</p>
<div class="demo">
<div id="readOnly-callback-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">readOnly</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s1">'true becomes readOnly'</span> <span class="o">==</span> <span class="s1">'true becomes readOnly'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="noRatedMsg">
<a href="#noRatedMsg">没有评级的消息提示</a>
</h2>
<div class="demo">
<div id="noRatedMsg-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">readOnly</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">noRatedMsg</span><span class="o">:</span> <span class="s2">"I'am readOnly and I haven't rated yet!"</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="halfShow">
<a href="#halfShow">设置带有半颗星星</a>
</h2>
<h3>启用</h3>
<p>
这个选项只是显示半颗星
</p>
<p>规则如下:<br />
<ul>
<li>分数< = x.25,星星将被四舍五入</li>
<li>一半: 分数 >= x.26 and <= x.75，星星将变成半颗;</li>
<li>满星: 分数 >= x.76 星星将变成满颗星.</li>
</ul>
<div class="demo">
<div id="halfShow-true-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty({ score</span><span class="o">:</span> <span class="mf">3.26</span> <span class="p">});</span>
</pre>
</div>
<h3>禁用</h3>
<p>规则如下:</p>
<ul>
<li>分数 < x.6，星星将被四舍五入</li>
<li>满星: score >= x.6，星星将变成满颗星;</li>
</ul>
<div class="demo">
<div id="halfShow-false-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#halfShow-demo'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">halfShow</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">score</span> <span class="o">:</span> <span class="mf">3.26</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="round">
<a href="#round">满颗星</a>
</h2>
<p>
您可以自定义halfShow<br />
我们改变了默认的区间[x。25 . .x。76年),现在x。26日将一轮下来,而不是半星。<br />
提示：full属性只有当halfShow是禁用的
</p>
<div class="demo">
<div id="round-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">round</span><span class="o">:</span> <span class="p">{</span> <span class="nx">down</span><span class="o">:</span> <span class="p">.</span><span class="mi">26</span><span class="p">,</span> <span class="nx">full</span><span class="o">:</span> <span class="p">.</span><span class="mi">6</span><span class="p">,</span> <span class="nx">up</span><span class="o">:</span> <span class="p">.</span><span class="mi">76</span> <span class="p">},</span>
<span class="nx">score</span><span class="o">:</span> <span class="mf">3.26</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="half">
<a href="#half">半颗星</a>
</h2>
<p>点击的星星值在input[name='score']隐藏框里面。
</p>
<div class="demo">
<div id="half-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">half</span><span class="o">:</span> <span class="kc">true</span> });</span>
</pre>
</div>
<h2 id="starHalf">
<a href="#starHalf">改变星星的图片名称</a>
</h2>
<div class="demo">
<div id="starHalf-demo"></div>
</div>
<div class="highlight">
<pre>
$('#starHalf-demo').raty({
path: 'demo/img',
half: true,
starOff: 'cookie-off.png',
starOn: 'cookie-on.png',
starHalf: 'cookie-half.png'
});
</pre>
</div>
<h2 id="click">
<a href="#click">点击事件</a>
</h2>
<p>
回调处理分数和点击 event
</p>
<div class="demo">
<div id="click-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">click</span><span class="o">:</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="s1">'ID: '</span> <span class="o"> </span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">)</span> <span class="o"> </span> <span class="s1">"\nscore: "</span> <span class="o"> </span> <span class="nx">score</span> <span class="o"> </span> <span class="s1">"\nevent: "</span> <span class="o"> </span> <span class="nx">evt</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="path">
<a href="#path">路径</a>
</h2>
<p>
更改图标所在的路径。
</p>
<div class="demo">
<div id="path-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</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="s1">'assets/images'</span> <span class="p">});</span>
</pre>
</div>
<h2 id="star-off-and-star-on">
<a href="#star-off-and-star-on">Star Off 和 Star On</a>
</h2>
<p>改变 star on 和 star off的名称</p>
<div class="demo">
<div id="star-off-and-star-on-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">starOff</span><span class="o">:</span> <span class="s1">'img/off.png'</span><span class="p">,</span>
<span class="nx">starOn</span> <span class="o">:</span> <span class="s1">'http://icons.com/on.png'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="cancel">
<a href="#cancel">取消</a>
</h2>
<p>
添加一个取消按钮.
</p>
<div class="demo">
<div id="cancel-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">cancel</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
</pre>
</div>
<h2 id="cancelHint">
<a href="#cancelHint">取消提示</a>
</h2>
<div class="demo">
<div id="cancelHint-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">cancelHint</span><span class="o">:</span> <span class="s1">'My cancel hint!'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="cancelPlace">
<a href="#cancelPlace">设置取消按钮的位置</a>
</h2>
<p>把 <a href="#cancel">取消按钮</a> 放在右边</p>
<div class="demo">
<div id="cancelPlace-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">cancelPlace</span><span class="o">:</span> <span class="s1">'right'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="iconRange">
<a href="#iconRange">设置每个星星的图标</a>
</h2>
<div class="demo">
<div id="iconRange-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">iconRange</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span> <span class="nx">range</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">on</span><span class="o">:</span> <span class="s1">'1.png'</span><span class="p">,</span> <span class="nx">off</span><span class="o">:</span> <span class="s1">'0.png'</span> <span class="p">},</span>
<span class="p">{</span> <span class="nx">range</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">on</span><span class="o">:</span> <span class="s1">'2.png'</span><span class="p">,</span> <span class="nx">off</span><span class="o">:</span> <span class="s1">'0.png'</span> <span class="p">},</span>
<span class="p">{</span> <span class="nx">range</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nx">on</span><span class="o">:</span> <span class="s1">'3.png'</span><span class="p">,</span> <span class="nx">off</span><span class="o">:</span> <span class="s1">'0.png'</span> <span class="p">},</span>
<span class="p">{</span> <span class="nx">range</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> <span class="nx">on</span><span class="o">:</span> <span class="s1">'4.png'</span><span class="p">,</span> <span class="nx">off</span><span class="o">:</span> <span class="s1">'0.png'</span> <span class="p">},</span>
<span class="p">{</span> <span class="nx">range</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">on</span><span class="o">:</span> <span class="s1">'5.png'</span><span class="p">,</span> <span class="nx">off</span><span class="o">:</span> <span class="s1">'0.png'</span> <span class="p">}</span>
<span class="p">]</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="size">
<a href="#size">设置星星的尺寸</a>
</h2>
<div class="demo">
<div id="size-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">cancelOff</span><span class="o">:</span> <span class="s1">'cancel-off-big.png'</span><span class="p">,</span>
<span class="nx">cancelOn</span> <span class="o">:</span> <span class="s1">'cancel-on-big.png'</span><span class="p">,</span>
<span class="nx">half</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">size</span> <span class="o">:</span> <span class="mi">24</span><span class="p">,</span>
<span class="nx">starHalf</span> <span class="o">:</span> <span class="s1">'star-half-big.png'</span><span class="p">,</span>
<span class="nx">starOff</span> <span class="o">:</span> <span class="s1">'star-off-big.png'</span><span class="p">,</span>
<span class="nx">starOn</span> <span class="o">:</span> <span class="s1">'star-on-big.png'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="width">
<a href="#width">设置星星区域的宽度</a>
</h2>
<div class="demo">
<div id="width-demo" style="background-color: #FFF"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">width</span><span class="o">:</span> <span class="mi">150</span> <span class="p">});</span>
</pre>
</div>
<h2 id="target">
<a href="#target">目标地址target</a>
</h2>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">target</span><span class="o">:</span> <span class="s1">'#hint'</span>
<span class="p">});</span>
</pre>
</div>
<p>你的目标可以是一个 div.</p>
<div class="demo">
<div id="target-div-demo" class="target-demo"></div>
<div id="target-div-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">></div></span>
</pre>
</div>
<p>你的目标可以是一个 text字段。</p>
<div class="demo">
<div id="target-text-demo" class="target-demo"></div>
<input id="target-text-hint" type="text" class="hint" />
</div>
<div class="highlight">
<pre>
<span class="nt"><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">/></span>
</pre>
</div>
<p>你的目标可以是一个 textarea.</p>
<div class="demo">
<div id="target-textarea-demo" class="target-demo"></div>
<textarea id="target-textarea-hint" class="hint"></textarea>
</div>
<div class="highlight">
<pre>
<span class="nt"><textarea</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">></textarea></span>
</pre>
</div>
<p>你的目标可以是一个 select</p>
<div class="demo">
<div id="target-select-demo" class="target-demo"></div>
<select id="target-select-hint" class="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>
<div class="highlight">
<pre>
<span class="nt"><select</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>--<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"bad"</span><span class="nt">></span>bad<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"poor"</span><span class="nt">></span>poor<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"regular"</span><span class="nt">></span>regular<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"good"</span><span class="nt">></span>good<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"gorgeous"</span><span class="nt">></span>gorgeous<span class="nt"></option></span>
<span class="nt"></select></span>
</pre>
</div>
<h2 id="targetType">
<a href="#targetType">目标类型</a>
</h2>
<div class="demo">
<div id="targetType-demo" class="target-demo"></div>
<div id="targetType-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">></div></span>
</pre>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#targetType-demo'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">target</span> <span class="o">:</span> <span class="s1">'#hint'</span><span class="p">,</span>
<span class="nx">targetType</span><span class="o">:</span> <span class="s1">'number'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="targetKeep">
<a href="#targetKeep">目标保持</a>
</h2>
<div class="demo">
<div id="targetKeep-demo" class="target-demo"></div>
<div id="targetKeep-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">></div></span>
</pre>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">cancel</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">target</span> <span class="o">:</span> <span class="s1">'#hint'</span><span class="p">,</span>
<span class="nx">targetKeep</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="targetText">
<a href="#targetText">目标 Text</a>
</h2>
<div class="demo">
<div id="targetText-demo" class="target-demo"></div>
<div id="targetText-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">target</span> <span class="o">:</span> <span class="s1">'#hint'</span><span class="p">,</span>
<span class="nx">targetText</span><span class="o">:</span> <span class="s1">'--'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="targetFormat">
<a href="#targetFormat">目标格式</a>
</h2>
<div class="demo">
<div id="targetFormat-demo" class="target-demo"></div>
<div id="targetFormat-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">target</span> <span class="o">:</span> <span class="s1">'#hint'</span><span class="p">,</span>
<span class="nx">targetFormat</span><span class="o">:</span> <span class="s1">'Rating: {score}'</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="mouseover">
<a href="#mouseover">鼠标悬浮</a>
</h2>
<div class="demo">
<div id="mouseover-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">mouseover</span><span class="o">:</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="s1">'ID: '</span> <span class="o"> </span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">)</span> <span class="o"> </span> <span class="s2">"\nscore: "</span> <span class="o"> </span> <span class="nx">score</span> <span class="o"> </span> <span class="s2">"\nevent: "</span> <span class="o"> </span> <span class="nx">evt</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="mouseout">
<a href="#mouseout">鼠标离开</a>
</h2>
<div class="demo">
<div id="mouseout-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span>
<span class="nx">mouseout</span><span class="o">:</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="s1">'ID: '</span> <span class="o"> </span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">)</span> <span class="o"> </span> <span class="s2">"\nscore: "</span> <span class="o"> </span> <span class="nx">score</span> <span class="o"> </span> <span class="s2">"\nevent: "</span> <span class="o"> </span> <span class="nx">evt</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre>
</div>
<h2 id="precision">
<a href="#precision">精确到小数</a>
</h2>
<div class="demo">
<div id="precision-demo" class="target-demo"></div>
<div id="precision-hint" class="hint"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">precision</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
</pre>
</div>
<h2 id="space">
<a href="#space">设置星星之间的距离</a>
</h2>
<div class="demo">
<div id="space-demo"></div>
</div>
<div class="highlight">
<pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#star'</span><span class="p">).</span><span class="nx">raty</span><span class="p">({</span> <span class="nx">space</span><span class="o">:</span> <span class="kc">false</span> <span class="p">});</span>
</pre>
</div>
</article>
</section>
</div>
</div>
<script type="text/javascript">
$(function() {
$.fn.raty.defaults.path = 'lib/img';
$('#default-demo').raty();
$('#score-demo').raty({score: 3});
$('#number-demo').raty({number: 10});
$('#numberMax-demo').raty({
numberMax: 5,
number: 500
});
$('#number-callback-demo').raty({
number: function() {
return $(this).attr('data-number');
}
});
$('#scoreName-demo').raty({scoreName: 'entity[score]'});
$('#readOnly-demo').raty({readOnly: true, score: 3});
$('#readOnly-callback-demo').raty({
readOnly: function() {
return 'true becomes readOnly' == 'true becomes readOnly';
}
});
$('#noRatedMsg-demo').raty({
readOnly: true,
noRatedMsg: "I'am readOnly and I haven't rated yet!"
});
$('#score-callback-demo').raty({
score: function() {
return $(this).attr('data-score');
}
});
$('#halfShow-true-demo').raty({score: 3.26});
$('#halfShow-false-demo').raty({
halfShow: false,
score: 3.26
});
$('#half-demo').raty({half: true});
$('#starHalf-demo').raty({
path: 'demo/img',
half: true,
starOff: 'cookie-off.png',
starOn: 'cookie-on.png',
starHalf: 'cookie-half.png'
});
$('#round-demo').raty({
round: {down: .26, full: .6, up: .76},
score: 3.26
});
$('#click-demo').raty({
click: function(score, evt) {
alert('ID: ' $(this).attr('id') "\nscore: " score "\nevent: " evt.type);
}
});
$('#cancel-demo').raty({cancel: true});
$('#cancelHint-demo').raty({
cancel: true,
cancelHint: 'My cancel hint!'
});
$('#cancelPlace-demo').raty({
cancel: true,
cancelPlace: 'right'
});
$('#star-off-and-star-on-demo').raty({
path: 'demo/img',
starOff: 'off.png',
starOn: 'on.png'
});
$('#iconRange-demo').raty({
path: 'demo/img',
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'}
]
});
$('#size-demo').raty({
path: 'demo/img',
cancel: true,
cancelOff: 'cancel-off-big.png',
cancelOn: 'cancel-on-big.png',
half: true,
size: 24,
starHalf: 'star-half-big.png',
starOff: 'star-off-big.png',
starOn: 'star-on-big.png'
});
$('#width-demo').raty({width: 150});
$('#target-div-demo').raty({
cancel: true,
target: '#target-div-hint'
});
$('#target-text-demo').raty({
cancel: true,
target: '#target-text-hint'
});
$('#target-textarea-demo').raty({
cancel: true,
target: '#target-textarea-hint'
});
$('#target-select-demo').raty({
cancel: true,
target: '#target-select-hint'
});
$('#targetType-demo').raty({
cancel: true,
target: '#targetType-hint',
targetType: 'score'
});
$('#targetKeep-demo').raty({
cancel: true,
target: '#targetKeep-hint',
targetKeep: true
});
$('#targetText-demo').raty({
target: '#targetText-hint',
targetText: '--'
});
$('#targetFormat-demo').raty({
target: '#targetFormat-hint',
targetFormat: 'Rating: {score}'
});
$('#mouseover-demo').raty({
mouseover: function(score, evt) {
alert('ID: ' $(this).attr('id') "\nscore: " score "\nevent: " evt.type);
}
});
$('#mouseout-demo').raty({
mouseout: function(score, evt) {
alert('ID: ' $(this).attr('id') "\nscore: " score "\nevent: " evt.type);
}
});
$('#precision-demo').raty({
path: 'demo/img',
cancelOff: 'cancel-off-big.png',
cancelOn: 'cancel-on-big.png',
size: 24,
starHalf: 'star-half-big.png',
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
target: '#precision-hint',
cancel: true,
targetKeep: true,
precision: true
});
});
</script>
</div>