Simple HTML5 Rating Plugin For jQuery - rating-system

File Size: 3.58 KB
Views Total: 2187
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple HTML5 Rating Plugin For jQuery - rating-system

A simple, lightweight, cross-browser jQuery/HTML5 rating system that supports arbitrary rating symbols and is built on top of plain HTML structure.

How to use it:

1. Create a hidden input field to store the rating value picked by your users.

<input type="hidden" name="rat" id="rat-value" value="0"/>

2. Create a container element to display the rating information.

<label id="rating-label">Rate me: </label>

3. Create the rating symbols for the rating system.

<h2>
  <span id="rat-1" name="rat" class="glyphicon glyphicon-star-empty rating"></span>
  <span id="rat-2" name="rat" class="glyphicon glyphicon-star-empty rating"></span>
  <span id="rat-3" name="rat" class="glyphicon glyphicon-star-empty rating"></span>
  <span id="rat-4" name="rat" class="glyphicon glyphicon-star-empty rating"></span>
  <span id="rat-5" name="rat" class="glyphicon glyphicon-star-empty rating"></span>
</h2>

4. By default, the plugin uses Bootstrap Glyphicons for the rating symbols.

<link href="bootstrap.min.css" rel="stylesheet">

5. Include jQuery JavaScript library and the jQuery rating-system's script at the bottom of the webpage. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/rating.js"></script>

6. Change the default color of the rating symbol.

.glyphicon-star { 
  color: #e67e22; 
}

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