JQuery | How to implement Star-Rating system using RateYo
rateYo:- rateYo is a jQuery plugin to create a star-rating widget that allows to fill the background color of the un-rated part of an SVG(scalable vector graphics) based star on mouse hover. It is Fully customizable and scalable to fit any design needs.
Steps to implement Star-Rating system using RateYo:
- Installation:
1. # NPM $ npm install rateYo 2. #Bower $ bower install rateYo
you can also use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of jQuery.
<!-- Latest compiled and minified CSS -->
<
link
rel
=
"stylesheet"
href
=
"https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css"
>
<!-- Latest compiled and minified JavaScript -->
<
script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"
></
script
>
- Add the required stylesheet in the head section of html page.
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.rateyo.min.css"
>
- Create a div that will serve as a star rating container.
<
div
id
=
"rateYo"
></
div
>
- Add the required stylesheet in the body section of html page and link the javaScript file of the rateYo plugin to perform various functions.
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.rateyo.min.js"
></
script
>
- Call a plugin to render a basic star rating into the rateYo div created by you.
$("#rateYo").rateYo();
Example
<!DOCTYPE html> < html > < head > < title >rating</ title > < link rel = "stylesheet" type = "text/css" href = "jquery.rateyo.min.css" > </ head > < body > < div style = "width: 600px; margin: 30px auto" > < div id = "rateYo" ></ div > </ div > < script type = "text/javascript" src = "jquery.min.js" ></ script > < script type = "text/javascript" src = "jquery.rateyo.min.js" ></ script > < script > $("#rateYo").rateYo({ rating: 1.5, spacing: "10px", numStars: 5, minValue: 0, maxValue: 5, normalFill: 'black', ratedFill: 'orange', }) </ script > </ body > </ html > |
OUTPUT