Rate_Yo_プラグインのデモページ

【jQUery】小数点まで星形レーティングが可能なRate Yo!プラグイン

2014.10.29   969


良くある星形レーティング。
点数を付けるのに楽ですよね。
ただいざ実装となるとなかなか面倒なもの。
今回は小数点第二位までレーティング可能なRate Yo!プラグインを紹介します。


 

Rate Yo!プラグインのオススメ/ポイント

  •   星形レーティングが簡単に実装出来る
  •   小数点第二位までのレーティングが可能
  •   スマホにも対応

Rate Yo!プラグインのデモ


Rate Yo!プラグインのページ


Rate Yo!プラグインの使い方

それではRate Yo!プラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="rateYo1"></div>
<div id="rateYo2"></div>
<div id="rateYo3"></div>

CSSコード

<link rel="stylesheet" href="../min/jquery.rateyo.min.css"/>

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- rete yo本体 -->
<script type="text/javascript" src="../src/jquery.rateyo.js"></script>

<script>
$(function () {
    // 星の大きさ変更&クリックイベント取得
    $("#rateYo1").rateYo({
        starWidth: "20px",
        })
        .on("rateyo.set", function (e, data) {
            alert("The rating is set to " + data.rating + "!");
        }
    );
    // 色変更
    $("#rateYo2").rateYo({
        ratedFill: "#E74C3C"
    });
    // 星の数を変更
    $("#rateYo3").rateYo({
        numStars: 10
    });
});
</script>

プラグインへ一言

小数点第二位まで出来るのはあまりないね

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております