首先来看如何用插件动态显示的评分功能实现(一般静态的也没有意义):
第一步:在jsp中定义一个div
<div class="star" data-score="3"></div>//data-score为div中的属性变量,这里用来动态指定评分插件的评分值,可以是其他的名字
第二部:在script中添加如下代码
<span style="font-size:18px;color:#3333FF;"><script type="text/javascript">
$('.star').raty(
{
score: function() {
return $(this).attr('data-score');
},
readOnly: true
}
);
</script></span>
接下来看一下如何得到用户选择的值来保存到数据库或者其他进一步的处理。总之,就是得到用户选了几个星星。
首先在jsp中定义一个表单
<span style="font-size:18px;color:#3333FF;"><div>
<form>
<input type="hidden" id="rate_value">
<button type="submit">提交</button>
</form>
</div></span>
这里用hidden,这样在用户选择星星后,就可以直接点击提交了,无需显示出来这个文本域。之后的处理方法和一个普通text无异。然后对script进行一下修改:
<span style="font-size:18px;color:#3333FF;"><script type="text/javascript">
$('.star').raty({
hints: ['1', '2', '3', '4', '5'],
target: '#rate_value',
targetKeep : true
});
</script></span>
注意:hints指的是选定星星对应的值,默认为good,bad等英文。