Rate Yo!

JavaScript

星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

Rate Yo!というjQueryプラグインを使えば、SVGを使った星評価を簡単に実装することができます。予め評価を設定しておくことができる他、ホバーでレーティングが追従してきてクリックでセットすることも可能です。以下は使い方です。

[ads_center]

Rate Yo!の使い方

使い方は、head内にjQuery本体とダウンロードしたプラグインファイル(ここではjquery.rateyo.min.cssとjquery.rateyo.min.js)を読み込みます。

<link href="jquery.rateyo.min.css" rel="stylesheet" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.rateyo.min.js"></script>

続いて星評価を設定していきます。

$(function () {
    $("#rateYo").rateYo({
        rating: 3.8
    });
});

そして星評価を表示させたい場所に以下を記述すれば完了です。

<div id="rateYo"></div>

オプション

オプションもいくか用意されており、スターのサイズ、カラー、数などを設定することができます。

$("#rateYo").rateYo({
    rating: 4.5,
    starWidth: "50px",
    normalFill: "#cccccc",
    ratedFill: "#e51e1e",
    numStars: 10
});
  • rating・・・評価
  • starWidth・・・スター幅のサイズ。幅と高さは同じ。
  • normalFill・・・評価がついていない時の背景色
  • ratedFill・・・スターのカラー
  • numStars・・・スターの数

Rate Yo!

関連記事

  1. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  6. Simple Sidebar

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP