NiceSnippets.com
Bootstrap 4 Star Rating Usign Rateyo Jquery
Bootstrap 4 with flexible jQuery star rating plugin demo. this is without image and radio button star rating example. this star rating in div and also fully customizable you can add more star,change star color,display how many star you give on hover. Render the rating Right to Left.
We allows to free snippets of bootstrap-star-rating plugin , you can download full code of rateyo multiple layout. Here in this post i will give you example of bootstap 4 star rating jquery examples free download snippet and you will get simple code of html, css and jquery. In jquery rating stars example snippet i give you three tab with html, css and js, you can easily get code of rateyo is not a function layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>RateYo - Scratchpad</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-lg-4 col-lg-4 col-sm-4 col-12 main-section text-center">
<h1>RateYo - Scratchpad</h1>
<div class="rateyo"></div>
</div>
</div>
</div>
</body>
</html>
body{
background-color: #E0A025;
}
.main-section{
margin-top:150px;
background-color: white;
padding:20px 0px 50px 0px;
}
.main-section .rateyo{
position: relative;
left:50%;
transform:translateX(-50%);
}
.main-section h1{
color: black;
font-size: 25px;
margin:20px 0px 50px 0px;
}
$(function () {
var rating = 1.5;
$(".counter").text(rating);
$("#rateYo1").on("rateyo.init", function () { console.log("rateyo.init"); });
$("#rateYo1").rateYo({
rating: rating,
numStars: 5,
precision: 2,
starWidth: "64px",
spacing: "5px",
rtl: true,
multiColor: {
startColor: "#000000",
endColor : "#ffffff"
},
onInit: function () {
console.log("On Init");
},
onSet: function () {
console.log("On Set");
}
}).on("rateyo.set", function () { console.log("rateyo.set"); })
.on("rateyo.change", function () { console.log("rateyo.change"); });
$(".rateyo").rateYo();
$(".rateyo-readonly-widg").rateYo({
rating: rating,
numStars: 5,
precision: 2,
minValue: 1,
maxValue: 5
}).on("rateyo.change", function (e, data) {
alert(data.rating);
});
});
