jquery.krater.js实现点击评星功能

一、文件包： jquery.krater.js

二、页面元素

<span id="userStars" value="8"></span>

三、页面加载时初始化

            $("#userStars").krater({
                raterOn: ThemeDomain + '/themes//t2/images/star-on.png',
                raterOff: ThemeDomain + '/themes/t2/images/star-off.png',
                valueObj: 'userStarsValue', //可在页面添加一个隐藏控件，用于存储评星结果值
                starQuantity: 5, //星星个数
                defaultValue: 8, //默认值
                minValue: 0,  //最小值
                maxValue: 10, //最大值
                onClick: function (value) {
                    $('#userStarsDisplay').text(value); //显示评星分数
　　               }
　　　　　　　　});

 

通过上面js代码初始化后页面元素为：

 

<span id="userStars" value="8" readonly="false" style="overflow: hidden; width: 166px; height: 33px; background-image: url("http://r.test.com//themes/t2/images/star-off.png"); display: block;">

 

<span style="overflow: hidden; width: 132px; height: 35px; background-image: url("http://r.test.com//themes/t2/images/star-on.png"); display: block;"></span>

 

</span>