【jQuery】SVGを使用した星評価jQueryプラグインstar-rating-svg

star-rating-svgはSVGを使用した柔軟なスターレートjQueryプラグイン。画像は使用されておらず、サイズ、色をカスタマイズできるようです。

Usage

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

プラグインのコード

<script src="jquery.star-rating-svg.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="star-rating-svg.css">

Markup

<div class="my-rating"></div>

プラグインを呼び出し

$(".my-rating").starRating({
starSize: 25,
callback: function(currentRating, $el){
// make a server call here
}
});

Methods

unload イベントを削除
setRating 手動での評価を設定
getRating 評価を取得
// unload example
$('your-selector').starRating('unload')
// set rating example
$('your-selector').starRating('setRating', 2.5)
// set rating and round
$('your-selector').starRating('setRating', 2.8, true) // 3.0
// get rating example
$('your-selector').starRating('getRating')

Callbacks

callback レートを選択したときに実行
$('your-selector').starRating({
callback: function(currentRating, $el){
// do something after rating
}
});

Events

onHover マウスオーバーでのコールバックを実行
onLeave マウスアウトでのコールバックを実行
$('your-selector').starRating({
onHover: function(currentIndex, currentRating, $el){
// do something on mouseover
},
onLeave: function(currentIndex, currentRating, $el){
// do something after mouseout
}
});

MITライセンス

 
star-rating-svg

【jQuery】SVGを使用した星評価jQueryプラグインstar-rating-svg

  • LATEST
  • RELATED
  • POPULAR