Simple Cross-browser jQuery Star Feedback / Rating Plugin - StarWarsJS

StarWarsJS is a lightweight and simple to use jQuery plugin to set stars for feedback. Star icons are based on fonts which gives freedom to change the size and color of a certain icon by re-writing default CSS styles.

Basic usage:

1. First of all download and unpack the zip file. Then include the CSS at the top of your page in your tag:

<link href="path/to/starwars.css" rel="stylesheet">

2. Include the Javascript at the bottom of your page before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="/path/to/starwarsjs.js"></script>

3. The basic html structure. Input element takes rate values from data-value attributes after a certain star was clicked. Therefore you should specify desired rate range there. The code written below will provide rate from 1 to 5, according to values written in data-value attributes.

<div class="rate_row"> 
  <span class="rate_star" data-value="1"></span>
  <span class="rate_star" data-value="2"></span>
  <span class="rate_star" data-value="3"></span>
  <span class="rate_star" data-value="4"></span>
  <span class="rate_star" data-value="5"></span>
  <input type="hidden" class="get_star" value="">
</div> 

4. Initialize the plugin with default options. The class names of row and single star item should be included in selector in order to initialize the plugin. Note: Do not forget to wrap code inside $( document ).ready(). All you need is to fetch values from input fields written in code.

$(' .rate_row ').starwarsjs();

5. Possible plugin options with default values.

$(' .rate_row ').starwarsjs({

  target : this.selector,

  // Set the number of stars per row.
  stars : 1,

  // By default the values of per star are starting from one and ending with the number of stars. 
  // By activating range option it is possible to define different start and end values for rate's range. 
  // The first element of array stands for the start value and the last element of array stands for the end value of range.
  range : [],

  // Initially the values of rate are incrementing by one. In case you want to increment rate values by another number then the choice is yours.
  count : 1,

  // disable option allows to have inactive star icons which are not clickable. 
  // When a number bigger than zero is set for this option then all next values till the end of defined range are becoming disabled. 
  // Note: the number of disabled star icons should not exceed the stars or the value of the last element of a range array.
  disable : 0,

  // In case user wants to have active items by default then default_stars option should be activated. 
  // Just set a desired number of stars here. 
  // Note: the number of disabled star icons should not exceed the stars or the value of the last element of a range array.
  default_stars : 0

});

---

This awesome jQuery plugin is developed by johannesMatevosyan. For more Advanced Usages, please check the demo page or visit the official website.