star-rating-svg | jQuery星级评分插件 A star rating jQuery plugin that uses SVG for easier customization

examples

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

$(".my-rating").starRating({
    initialRating: 4,
    starSize: 25
});

---

// grab rating from a data attribute
<div> class="my-rating-2" data-rating="2.5"></div>

$(".my-rating-2").starRating({
    totalStars: 5,
    starSize: 40,
    emptyColor: 'lightgray',
    hoverColor: 'salmon',
    activeColor: 'crimson',
    useGradient: false
});

---

// define a gradient
<div> class="my-rating-3"></div>

// specify the gradient start and end for the selected stars
$(".my-rating-3").starRating({
    starSize: 80,
    strokeWidth: 9,
    strokeColor: 'black',
    initialRating: 2,
    starGradient: {
        start: '#93BFE2',
        end: '#105694'
    },
});

---

// execute callback when rating
<div> class="my-rating-4"></div>

$(".my-rating-4").starRating({
    totalStars: 5,
    emptyColor: 'lightgray',
    hoverColor: 'salmon',
    activeColor: 'cornflowerblue',
    initialRating: 4,
    strokeWidth: 0,
    useGradient: false,
    callback: function(currentRating, $el){
        alert('rated ', currentRating);
        console.log('DOM element ', $el);
    }
});

---

// read only mode
<div> class="my-rating-4"></div>

$(".my-rating-5").starRating({
    readOnly: true
});

---

// unloading the plugin instance
$(".my-rating").starRating('unload');

---

// use full stars only
<div> class="my-rating-6"></div>

$(".my-rating-6").starRating({
    useFullStars: true
});