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. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  2. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  3. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  4. jquery-base-slider
  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP