RatingStars a simple but powerful jQuery plugin for rating stars. you can design the entire UI yourself by customizing CSS. Using this plugin you can easily select rating and submit ratings using stars or some other icons you choose.
Libraries
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> script> <script src="jquery.rating-stars.js">script> |
HTML
Create the rating stars and add simple input box that will display selected rating you can make it hidden and store rating in your database.
|
JS
Initialize the rating plugin.
$(function() { $(".rating-stars").ratingStars(); }); |
List of options you can use to customize the start rating system.
$(function() { $(".rating-stars").ratingStars({ selectors: { starsSelector: '.rating-stars', // the main container starSelector: '.rating-star', // the container for a single star starActiveClass: 'is--active', // the css-class for the active stars starHoverClass: 'is--hover', // the css-class for the hover stars starNoHoverClass: 'is--no-hover', // the css class for the other stars (only in the hover effect) targetFormElementSelector: '.rating-value' // the selector for the input } }); }); |
See live demo and download source code.
This awesome jQuery plugin is developed by lk-code. Visit their official github repository for more information and follow for future updates.