星形评分一般在购物网站上很常见,使用bootstap-star-rating很容易实现这个功能,实现效果如图所示:
实现方法特别简单,源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/star-rating.css" media="all" rel="stylesheet" />
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/star-rating.js" type="text/javascript"></script>
<style type="text/css">
form{
margin: 50px auto;
width: 50%;
height: auto;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#comment").rating();
});
</script>
</head>
<body>
<form>
<label for="comment">评分</label>
<input id="comment" name="comment" class="rating" min="0" max="5" step="1" data-size="sm" value="2" >
</form>
</body>
</html>
这里我用的本地下载jquery bootstrap等文件,大家也可以用如下链接代替上面的代码:
详细步骤:
使用input标签,type属性为number ,为其增添rating类,min 和 max分别代表星星的最大最小数值,step表示增加减少的数量,value为其当前星星的数量,data-size可以设置星星的大小,有lg,sm,xl,xs;data-stars设置星星的数量,这些可以直接在input属性中设置,也可以通过jquery进行设置,如下所示:
$('#comment').rating({
min: 0,
max: 5,
step: 1,
size: 'lg',
showClear: false
});
特别注意:
此时需要在文件中添加bootstrap 的字体,要不然是出现不了如上的效果的哦!不会上传文件,自己搜一下吧!
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
这个方法是看别人的,不要介意!