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. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  4. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  5. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP