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 |
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.