Simple Select Based Star Rating Plugin with jQuery - ComboStars

Simple Select Based Star Rating Plugin with jQuery - ComboStars
File Size: 9.67 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ComboStars is a tiny, fast jQuery plugin used to transform a select list into a basic star rating system.

How to use it:

1. Import jQuery library and the jQuery combostars plugin into your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.combostars.js"></script>

2. Create a normal select list for the rating system.

<select id="combostar">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

3. Call the plugin on the select list and done.

$('#combostar').combostars();

4. Customize the rating stars.

$('#combostar').combostars({

starUrl: 'img/stars.png',
starWidth: 16,
starHeight: 15,
clickMiddle: true

});

5. change() event to handle a click on a rating star.

// output the value of the select list.
$('#combostar').on('change', function () {
  $('#starcount').text($(this).val());
});

Change log:

2015-01-20

  • Add minified js and set hover mouse to pointer

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