star-rating-svg

JavaScript

カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

star-rating-svgは、SVGを使用したカスタマイズ性に優れたレーティング(星評価)機能を実装することができるjQueryプラグインです。画像を用意する必要がないので手軽にレーティング機能を取り入れれるのがいいですね。

star-rating-svg

デモ

デモページでは、ベーシックなタイプものからラウンド型スターのもの、グラデーションを取り入れたもの、ホバーイベントを実装したものなど、いろんなタイプのデモが用意されています。

スターのサイズ、カラー、シェイプなどをオプションから簡単にカスタマイズできるので、自サイトに合わせたレーティングデザインに仕上げることが可能です。

また、レーティングをつけるだけではなく、読み込み専用(あらかじめ評価を固定)として表示させることもできます。ほかにも、レーティングをつけた後に発生させるコールバックや、ホバー時にレーティングの数値を表示させるイベントなど、多彩なカスタマイズが可能です。

オプションには、totalStars、initialRating、starSize、useFullStars、emptyColor、hoverColor、activeColor、ratedColor、useGradient、starGradient、readOnly、disableAfterRate、strokeWidth、strokeColor、starShape、baseUrlが用意されています。

また、イベントにはonHover(ホバーした時)とonLeave(ホバーから離れた時)の2つセッティングが可能です。

star-rating-svg

関連記事

  1. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  6. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP