当前位置: 首页 > 工具软件 > jQuery Raty > 使用案例 >

jQuery Raty评分插件使用方法

端木桐
2023-12-01

首先来看如何用插件动态显示的评分功能实现(一般静态的也没有意义):

第一步:在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>

script中代码的主要功能是把评分插件放到第一步中的div中,并在()中设置自己需要的一些属性,不如这里我设置了可读属性,以及具体的评分值根据div中的data-score属性值来确定。


接下来看一下如何得到用户选择的值来保存到数据库或者其他进一步的处理。总之,就是得到用户选了几个星星。

首先在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等英文。

 类似资料: