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

no-imageシンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」前のページ

スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」次のページno-image

関連記事

  1. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  3. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  4. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  5. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP