Updated March 30, 2023
Introduction to jQuery Star Rating
jQuery start rating is a very lightweight jQuery plugin that uses Font Awesome Icon to render the stars in a star-quality rating. Users or reviewers use star ratings to give input on items like movies, restaurants, hotels, TV shows, specific services, and specific products with a number of stars. Star Rating SVN enables us to use an SVG-based component for easier customization.
Top jQuery star rating
- Many individuals enjoy seeing qualifications or ratings for products, articles, and other qualifiable items. If our application requires such a component, we may be concerned that implementing it will be difficult and time-consuming.
- Below is the top jQuery start rating plugin is as follows.
- Bootstrap star rating
- RateYo
- jQuery Bar
- Star rating SVG
- Starr
1. Bootstrap star rating
- Make a star rating control out of any HTML input. Accessibility is enabled, and the keyboard can be used to navigate and modify ratings.
- Below is the example of bootstrap star rating is as follows.
Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> Bootstrap star rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jQuery/2.1.1/jQuery.min.js"></script>
<body>
<div class="container">
<div class="page-header">
<h2>Bootstrap Star rating
</h2>
</div>
<form>
<div class="p-header">
<h3>Bootstrap star rating</h3>
</div>
<input type="text" class="R1" value="3.5" dir="rt" data-size="xl" title="">
<div class="cl"></div>
<br>
<input type="text" class="R2" value="5" dir="rt" data-size="lg" title="">
<div class="cl"></div>
<br>
<input type="text" class="R3" value="4.5" dir="rt" data-size="md" title="">
<div class="cl"></div>
<br>
<input type="text" class="R4" value="4" dir="rt" data-size="sm" data- title="">
<div class="cl"></div>
<br>
<input type="text" class="R5" value="3" dir="rt" data-size="xs" data- title="">
<div class="cl"></div>
<br>
<div class="pheader">
</body>
<script>
$(document).on('ready', function () {
$('star').rating({
containerClass: 'is-star'
});
'change', function () {
console.log(Select rating: ' + $(this).val());
});
});
</script>
</html>
2. RateYo
- RateYo is a lightweight and adaptable jQuery star rating plugin that renders ratings using SVG rather than pictures.
- It’s as simple as creating a div element, applying styles, and initializing it. We now have a fantastic rating component to use in our app.
- Below is the example of RateYo star rating is as follows.
Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> RateYo star rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jQuery/2.1.1/jQuery.min.js"></script>
<body>
<div class="container">
<div class="page-header">
<h2>RateYo Star rating
</h2>
</div>
<form>
<div class="p-header">
<h3>RateYo star rating</h3>
</div>
<input type="text" class="R1" value="4.5" dir="rt" data-size="xl" title="">
<div class="cl"></div>
<br>
<input type="text" class="R2" value="5" dir="rt" data-size="lg" title="">
<div class="cl"></div>
<br>
<input type="text" class="R3" value="3.5" dir="rt" data-size="md" title="">
<div class="cl"></div>
<br>
<input type="text" class="R4" value="4" dir="rt" data-size="sm" data- title="">
<div class="cl"></div>
<br>
<input type="text" class="R5" value="2" dir="rt" data-size="xs" data- title="">
<div class="cl"></div>
<br>
<div class="pheader">
</body>
<script>
$(document).on('ready', function () {
$('#rateyo').rating({
containerClass: 'rating'
});
'change', function () {
console.log('Select the rating: ' + $(this).val());
});
});
</script>
</html>
3. jQuery Bar star rating
- The jQuery Bar Rating Plugin converts a select field into a rating widget. CSS can be used to customize the appearance of the rating widget.
- The plugin has a few different star rating styles that are compatible with popular libraries, as well as the ability to display fractional star ratings.
- Below is the example of jQuery bar star rating are as follows.
Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> jQuery bar star rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jQuery/2.1.1/jQuery.min.js"></script>
<body>
<div class="container">
<div class="page-header">
<h2>jQuery bar star rating
</h2>
</div>
<form>
<div class="p-header">
<h3>jQuery bar star rating</h3>
</div>
<input type="text" class="R1" value="3.5" dir="rt" data-size="xl" title="">
<div class="cl"></div>
<br>
<input type="text" class="R2" value="3" dir="rt" data-size="lg" title="">
<div class="cl"></div>
<br>
<input type="text" class="R3" value="2.5" dir="rt" data-size="md" title="">
<div class="cl"></div>
<br>
<input type="text" class="R4" value="2" dir="rt" data-size="sm" data- title="">
<div class="cl"></div>
<br>
<input type="text" class="R5" value="4" dir="rt" data-size="xs" data- title="">
<div class="cl"></div>
<br>
<div class="pheader">
</body>
<script>
$(document).on('ready', function ()
{
$('#star').rating(
{
containerClass: 'rating'
});
'change', function ()
{
console.log('Select the rating: ' + $(this).val());
});
</script>
</html>
4. Star rating SVG
Star rating SVG allows us to implement the easier customization of SVG. Below is the example of star rating SVG are as follows.
Code –
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery/3.4.1/jQuery.js"> </script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Star rating SVG </title>
<style>
body {
background-color: yellow;
margin : 0px;
}
.fa-star {
font-size : 40px;
}
.container {
height: 150px;
width: 650px;
margin: auto;
}
</style>
</head>
<body>
<div class = "container">
<h2 style="margin-top: 50px;">jQuery simple star rating example</h2>
<div class = "con">
<h3 style = "margin-top : 80px; color: Red;">Rate the product :-</h3>
<i class = "fa fa-star" aria-hidden = "true" id = "st1"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st2"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st3"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st4"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st5"></i>
</div>
</div>
<script>
$(".my-rating").starRating({
initialRating: 4,
strokeColor: '#894A00',
strokeWidth: 10,
starSize: 25
});
});
</script>
</body>
</html>
5. Starr jQuery rating
- Starr is a little library that makes it easy to create a rating system. Other libraries exist, but none come close to meeting the developer’s requirements for clarity and conciseness.
- Below is the example of Starr jQuery rating are as follows.
Code –
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery/3.4.1/jQuery.js"> </script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Star rating SVG </title>
<style>
body {
background-color: yellow;
margin : 0px;
}
.fa-star {
font-size : 40px;
}
.container {
height: 150px;
width: 650px;
margin: auto;
}
</style>
</head>
<body>
<div class = "container">
<h2 style="margin-top: 50px;"> Starr jQuery rating </h2>
<div class = "con">
<h3 style = "margin-top : 80px; color: Red;">Rate the product :-</h3>
<i class = "fa fa-star" aria-hidden = "true" id = "st1"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st2"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st3"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st4"></i>
<i class = "fa fa-star" aria-hidden = "true" id = "st5"></i>
</div>
</div>
<script>
$(document).ready(function() {
$("#st1").click(function() {
$(".fa-star").css("color", "black");
$("#st1").css("color", "yellow");
</script>
</body>
</html>
Conclusion
jQuery plugin allows us to display lovely rating stars. Because there are no user settings, this plugin runs quickly. Simply add it to the list and call it a day. The callback method must be used if we want to save votes in a database.
Recommended Articles
This is a guide to jQuery Star Rating. Here we discuss the example of bootstrap star rating along with the codes and outputs. You may also look at the following articles to learn more –
