SVG Star Rating In jQuery Plugin – Star-rating-svg.js

File Size:26.7 KB
Views Total:277
Last Update:December 31, 2017
Publish Date:December 29, 2017
Official Website:Go to website
License:MIT

A plugin that renders a SVG based star rating system on the webpage of the website that supports the main arbitary star fractions and the variable star sizes and the different kind of colours as it is a lightweight jQuery plugin.

How to use :

1. Import the star-rating-svg.css stylesheet for the basic CSS styles :

<link rel="stylesheet" thref="path/to/star-rating-svg.css">

2. Add the required CSS class ‘jq-stars’ to an empty DIV element :

<div class="demo jq-stars"></div>

3. Add jQuery library and the jQuery star-rating-svg.js script :

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/jquery.star-rating-svg.js"></script>

4. Call the function to render a basic star rating :

$(".demo").starRating();

5. Available options to customize Plugin :

$(".demo").starRating({

  // the number of stars
  totalStars: 5,

  // rate using whole stars
  useFullStars: false,

  // 'straight' or 'rounded'
  starShape: 'straight',

  // the color of empty star
  emptyColor: 'lightgray',

  // star color on hover
  hoverColor: 'orange',

  // star color on active
  activeColor: 'gold',

  // star color on rated
  ratedColor: 'crimson',

  // use gradient color
  useGradient: true,

  // readonly mode
  readonly: false,

  // auto disable after rate
  disableAfterRate: true,
  
  // when enabled (true), enables compatibility with the base tag in your head section
  baseUrl: false,

  // gradient color
  starGradient: {
    start: '#FEF7CD',
    end: '#FF9511'
  },

  // the thickness of the border
  strokeWidth: 0,

  // the color for the border
  strokeColor: 'black',

  // Initial rating
  initialRating: 0,

  // star size
  starSize: 40,

  // if true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0)
  forceRoundUp: true

  // callback
  callback: function(currentRating){
    // do something after rating
  }

  // more callbacks
  onHover: noop,
  onLeave: noop
  
});

6. API methods :

// Destroys the instance and removes events attached to it
$('.demo').starRating('unload');

// Gets the current rating from instance
$('.demo').starRating('getRating');

// 0 to max stars (int), round (Boolean)
$('.demo').starRating('setRating', VALUE, ROUND);

// Resize the stars on the fly
// value: 1 to 200
$('.demo').starRating('resize',VALUE);

// disable/enable stars manually
$('.demo').starRating('setReadOnly', true);

7. Events :

$('.demo').starRating({
  onHover: function(currentIndex, currentRating, $el){
    // do something on mouseover
  },
  onLeave: function(currentIndex, currentRating, $el){
    // do something after mouseout
  }
});

Change Log

V1.2.1

  • Adds color for manually rated stars 'ratedColor'

V1.2.0

  • Adds public method to disable & enable stars manually

V1.1.1

  • Fixes issue when using SVG + base tag

V1.1.0

  • Change the star type
  • Adds method to resize star on the fly

V1.0.1

  • Fixes Firefox hover issues

V1.0.0

  • Adds set rating, and get rating
  • Adds onHover event
  • Adds onLeave event

V0.9.4

  • Fixes support for enabling full stars

V0.9.3

  • Returns element on callback
  • Fixed typos

V0.8.2

  • Fixed bugs related to rendering in retina

V0.8.0

  • Added readonly mode