在好例子网，分享、交流、成长！
您当前所在位置：首页 → js 开发实例 → JavaScript基础 → jQuery Raty星级插件

jQuery Raty星级插件

JavaScript基础

下载此实例
  • 开发语言：js
  • 实例大小：0.14M
  • 下载次数：8
  • 浏览次数：247
  • 发布时间：2019-04-23
  • 实例类别：JavaScript基础
  • 发 布 人：crazycode
  • 文件格式：.zip
  • 所需积分：2
 相关标签： jQuery 插件 星级 JQ
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】

【实例截图】

from clipboard

【核心代码】 

<!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">&lt;div</span> <span class="na">id=</span><span class="s">"star"</span><span class="nt">&gt;&lt;/div&gt;</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">&lt;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">&gt;&lt;/div&gt;</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">&lt;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">&gt;&lt;/div&gt;</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">&lt;div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/div&gt;</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">&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>
                            </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">&lt;textarea</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/textarea&gt;</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">&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>
                            </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">&lt;div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/div&gt;</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">&lt;div</span> <span class="na">id=</span><span class="s">"hint"</span><span class="nt">&gt;&lt;/div&gt;</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>

标签： jQuery 插件 星级 JQ

实例下载地址

jQuery Raty星级插件

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警