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. Responsive Sidebar Navigation
  2. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  3. no-image
  4. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  5. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  6. lightGallery

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP