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

jQuery

star-rating-svg

July 4, 2016

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ライセンス

Latest Posts

Related Posts