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. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  2. no-image
  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  5. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP