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. jQuery googleslides
  2. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

  3. Glide.js
  4. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  5. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  6. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP