There are many online, five-star scoring cases based on native JS and DOM, today we will look at a scoring plugin, based on bootstrap and jquery
css, js file introduction:
star.html
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <link href="/${base}/css/star/star-rating.css" media="all" rel="stylesheet" type="text/css"/> <script src="/${base}/js/star/star-rating.js" type="text/javascript"></script> </head> </html>
Score page:
score.html
... <body> <!-- Import css, js-> [#include "../star.html"/] score: <input id="score" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"> <input type="submit" value="评分" class="search_btn" name="submit" onclick="gradeScored()"> <script type="text/javascript"> jQuery(document).ready(function () { $(".rating-kv").rating(); }); function gradeScored(){ var score = $("#score").val(); //alert(score); $.post("${base}/test/gradeScore.jspx",{id:id,score:score}, function(data){ alert("Successful scoring"); }, "html"); } </script> </body>
The page is as follows:
The following is the modified css and js, the original plug-in will be pasted in the attachment
in star-rating.css
Need to pay attention
.rating-container { position: relative; vertical-align: middle; display: inline-block; /*Score container color*/ color: #e3e3e3; overflow: hidden; } .rating-container .rating-stars { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; /* #FFFF00 is the color of the scoring stars*/ color: #FFFF00; transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; }
In star-rating.js, points to note:
init: function (options) { var self = this; self.options = options; self.initSlider(options); self.checkDisabled(); $element = self.$element; self.containerClass = options.containerClass; self.glyphicon = options.glyphicon; //Default star chart, \ue006 is a box, \u2605★, var defaultStar = (self.glyphicon) ? '\ue006' : '\u2605'; ..., renderCaption: function () { var self = this, val = self.$element.val(); if (!self.showCaption) { return ''; } var html = self.fetchCaption (option); if (!isEmpty(self.$captionElement)) { self.$captionElement.removeClass('caption').addClass('caption').attr({"title": self.clearCaption}); self.$captionElement.html(html); return ''; } //Remove the following scoring information display return ; //display scoring information //return '<div class="caption">' + html + '</div>'; }, //Clear the scoring button //clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>', //no scoring button clearButton: '', ... };
So far the five-star rating is over;
the application example of the plug-in is given below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - © Kartik</title> <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/> <script src="js/star-rating.js" type="text/javascript"></script> <body> <h1>Bootstrap Star Rating Example</h1> <div class="container"> <form> <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl" data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"> <br> <input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" > <br> <input id="input-21b" value="3" type="number" class="rating" min=0 max=5 step=0.5 data-size="lg"> <br> <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8"> <br> <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"> <br> <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" > <br> <input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md" > <br> <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"> <br> <input id="input-22" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0> <div class="clearfix"></div> <div class="form-group"> <button type="submit" class="btn btn-primary" onclick="getScore()">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </form> <br> <script> $(function() { var score = $("#input-21b").val(); alert(score); }); function getScore(){ var score = $("#input-21b").val(); alert(score); } jQuery(document).ready(function () { $(".rating-kv").rating(); }); </script> </div> </body> </html>
data-stars is the number of stars, data-size is the size of stars, min=0 max=5 step=0.5, is the minimum value, maximum value, step size;
data-symbol is the rating chart, such as stars The
page is as follows:
this year , the last article, thank you for your company, your visit is the biggest motivation for me, I am going home today to get married, and I will fight again next year...