BootStrap五星评分插件使用详解

2017-01-13 10:50:16来源:作者:Donald_Draper人点击

插件:http://www.jq22.com/jquery-info460
网上有很多,基于原生JS和DOM的五星评分案例,今天我们看一个评分插件,基于bootstrap和jquery

css,js文件引入:
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.html
...<body><!-- 引入css,js->[#include "../star.html"/]评分:<input  value="0" type="number"  min=0 max=5 step=0.5 data-size="sm"><input type="submit" value="评分"  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("评分成功"); },"html"); }</script></body>

页面如下:



下面所讲的是css和js是经过修改后的,原插件,会贴在附件中
在star-rating.css中
需要注意点
.rating-container {    position: relative;    vertical-align: middle;    display: inline-block;    /*打分容器颜色*/    color: #e3e3e3;    overflow: hidden;}.rating-container .rating-stars {    position: absolute;    left: 0;    top: 0;    white-space: nowrap;    overflow: hidden;/* #FFFF00 为打分星星的颜色 */    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;}

在star-rating.js中,需要注意的点:
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;    //默认星星图表,/ue006为方框,/u2605★,            var defaultStar = (self.glyphicon) ? '/ue006' : '/u2605';    ...,    renderCaption: function () {            var self = this, val = self.$element.val();            if (!self.showCaption) {                return '';            }            var html = self.fetchCaption(val);            if (!isEmpty(self.$captionElement)) {                self.$captionElement.removeClass('caption').addClass('caption').attr({"title": self.clearCaption});                self.$captionElement.html(html);                return '';            }    //去掉后面的打分信息显示    return ;            //显示打分信息            //return '<div >' + html + '</div>';           },   //清除打分按钮           //clearButton: '<i ></i>',   //无打分按钮           clearButton: '' ,   ...   };

至此五星评分结束;

下面给出插件的应用实例:
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <title>Krajee JQuery Plugins - &copy; 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 ><form>    <input  type="number"  min="0" max="5" step="0.5" data-size="xl"    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">    <br>    <input  value="0" type="number"  min=0 max=5 step=0.5 data-size="xl" >    <br>    <input  value="3"  type="number"  min=0 max=5 step=0.5 data-size="lg">    <br>    <input  value="0" type="number"  min=0 max=8 step=0.5 data-size="xl" data-stars="8">    <br>    <input  value="2" type="number"  min=0 max=5 step=0.5 data-size="sm">    <br>    <input  value="0" type="number"  min=0 max=5 step=0.5 data-size="xs" >    <br>    <input  value="0" type="number"  min=0 max=5 step=0.5 data-size="md" >    <br>    <input  type="number"  min="0" max="5" step="0.5" data-stars=5    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">    <br>    <input   value="0" type="number"  min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>    <div ></div>    <div >    <button type="submit"  onclick="getScore()">Submit</button>    <button type="reset" >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为星星的个数,data-size为星星的大小,min=0 max=5 step=0.5,为最小值,最大值,步长;
data-symbol为评分图表,如星星
页面如下:



本年度,最后一片文章,感谢各位陪伴,你们的访问,是对我最大的动力,今天要回家结婚了,来年再战...浪里个浪 大小: 7.1 KB 大小: 30.6 KB bootstrap-star-rating-master.rar (19.2 KB) 下载次数: 0 original.zip (10.1 KB) 下载次数: 0

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台