Today, We want to share with you Rating Stars with simple jQuery.In this post we will show you Jquery simple rating system with star, hear for Simple Customizable Star Rating System – jQuery we will give you demo and example for implement.In this post, we will learn about Simple jQuery Star Rating System For Bootstrap with an example.
Rating Stars with simple jQuery
There are the Following The simple About Rating Stars with simple jQuery Full Information With Example and source code.
As I will cover this Post with live Working example to develop How To Create a Simple Star Rating with CSS, so the Easy star-ratings in jQuery and Bootstrap for this example is following below.
Simple jQuery Star Rating System
Step 1: Jquery Part
$(document).ready(function(){
$('#stars li').on('mouseover', function(){
var onStar = parseInt($(this).data('value'), 10);
$(this).parent().children('li.star').each(function(e){
if (e < onStar) {
$(this).addClass('hover');
}
else {
$(this).removeClass('hover');
}
});
}).on('mouseout', function(){
$(this).parent().children('li.star').each(function(e){
$(this).removeClass('hover');
});
});
$('#stars li').on('click', function(){
var onStar = parseInt($(this).data('value'), 10); // The star currently selected
var stars = $(this).parent().children('li.star');
for (i = 0; i < stars.length; i++) {
$(stars[i]).removeClass('selected');
}
for (i = 0; i < onStar; i++) {
$(stars[i]).addClass('selected');
}
var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
var msg = "";
if (ratingValue > 1) {
msg = "Thanks! You rated this " + ratingValue + " stars.";
}
else {
msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
}
responseMessage(msg);
});
});
function responseMessage(msg) {
$('.success-box').fadeIn(200);
$('.success-box div.text-message').html("" + msg + "");
}
https://codepen.io/depy/pen/vEWWdw
HTML Part
jquery Rating Widget
A simple star rating widget with jQuery and FontAwesome icons.
Step 3: CSS Part
body { font-family:"Open Sans", Helvetica, Arial, sans-serif; color:#555; max-width:680px; margin:0 auto; padding:0 20px; } * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix { clear:both; } .text-center {text-align:center;} a { color: tomato; text-decoration: none; } a:hover { color: #2196f3; } pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #F5F5F5; border: 1px solid #CCC; border-radius: 4px; } .header { padding:20px 0; position:relative; margin-bottom:10px; } .header:after { content:""; display:block; height:1px; background:#eee; position:absolute; left:30%; right:30%; } .header h2 { font-size:3em; font-weight:300; margin-bottom:0.2em; } .header p { font-size:14px; } #a-footer { margin: 20px 0; } .new-react-version { padding: 20px 20px; border: 1px solid #eee; border-radius: 20px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); text-align: center; font-size: 14px; line-height: 1.7; } .new-react-version .react-svg-logo { text-align: center; max-width: 60px; margin: 20px auto; margin-top: 0; } .success-box { margin:50px 0; padding:10px 10px; border:1px solid #eee; background:#f9f9f9; } .success-box img { margin-right:10px; display:inline-block; vertical-align:top; } .success-box > div { vertical-align:top; display:inline-block; color:#888; } .rating-stars ul { list-style-type:none; padding:0; -moz-user-select:none; -webkit-user-select:none; } .rating-stars ul > li.star { display:inline-block; } .rating-stars ul > li.star > i.fa { font-size:2.5em; /* Change the size of the stars */ color:#ccc; /* Color on idle state */ } .rating-stars ul > li.star.hover > i.fa { color:#FFCC36; } .rating-stars ul > li.star.selected > i.fa { color:#FF912C; }
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Rating Stars with simple jQuery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.