bootstrap-star-rating 评星控件的使用

截图：

下载地址

https://github.com/kartik-v/bootstrap-star-rating 

Demo地址

http://plugins.krajee.com/star-rating-demo-advanced-usage#advanced-example-2

先引入jquery 、bootstrap相关的js、css

再引入star-rating的css、js

        <link th:href="/css/bootstrap.min.css" rel="stylesheet"/>
	<!-- bootstrap-star-rating 评星插件样式 -->
	<link th:href="/libs/bootstrap-star-rating/star-rating.min.css" rel="stylesheet"/>

	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<!-- bootstrap-star-rating 评星插件 -->
	<script src="/libs/bootstrap-star-rating/star-rating.min.js"></script>

 

1. 常规使用：

<input id="testId" name="testName" class="rating"  min="0" max="5" data-size="sm" value="0" >

class引用评星样式，min最小评星数，max最大评星数，data-size星星大小(大小可选 lg,sm,xl,xs),value初始星星数量；这里有个问题，评分不是整数，如果想用整数的话，建议js中代码设置控件相关值。

 

2. js控制控件样式及数值：

<input id="dictLevel" name="dictLevel" class="rating-loading">

<script>
$(document).on('ready', function(){
    $('#input-2').rating({
        step: 1,
        size: 'sm',//星星大小可选lg,sm,xl,xs
        starCaptions: {1: 'Very Poor', 2: 'Poor', 3: 'Ok', 4: 'Good', 5: 'Very Good'},
        starCaptionClasses: {1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success'}
    });
});
</script>