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!

iTunesのスライダーみたいなギャラリーを実装できるjQueryプラグイン「jQuery Coverflow」前のページ

座席指定の予約シートマップを実装できるjQueryプラグイン「jQuery Seat Charts」次のページjQuery Seat Charts

関連記事

  1. JavaScript

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

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

  2. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  5. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  6. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP