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

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  2. stickUp
  3. stickyNavbar.js
  4. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  5. jQuery Text Fade Delay
  6. Slight Submenu

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP