帝国cms评分、投票

帝国cms实现评分投票功能：

首先在模板的head区内调用ajax.js文件，如果已经使用了dig功能则不必重复调用这个js了：

         <script type="text/javascript" src="[!--news.url--]e/data/js/ajax.js"></script>

将下面的css样式复制到你原有的样式表文件中，当然也可以直接写在模板中：

<style>
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(star_rating.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating.gif) left center;
z-index: 2;
left: 0px;
}

.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 0px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}

.star-rating li.current-rating{
background: url(star_rating.gif) left bottom;
position: absolute;
height: 30px;
width:90px;
display: block;
text-indent: -9000px;
z-index: 1;
}
</style>

下载下面的星级效果图片保存下来，不过需要注意一下CSS中的图片路径修改成自己的实际路径

在需要添加评分投票功能的地方添加以下代码：

<div class="score-wrap">
<span class="word" js-hook="star-word">请您评分</span>
<script src="/assets/e88cd16a/jquery.js"></script>
<script>
function pfencallback(){
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            var messagereturn = http_request.responseText;
            if(messagereturn!='isfail')
            {
                var r;
                r=messagereturn.split('|');
                                if(r[0]){
                                     $(".star-rating li.current-rating").css("width",30*r[0]+"px");
                                     $(".info-wrap .score-wrap .score").text(r[0]);
                                     $(".info-wrap .score-wrap .word .num").text(parseInt($(".info-wrap .score-wrap .word .num").text())+1);
                                }
                alert(r[2]);
            }
        } else {
            alert('There was a problem with the request.');
        }
    }
}
</script>
<ul class="star-rating">
<li class="current-rating"></li>
<li><a href="JavaScript:makeRequest('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&fen=1','pfencallback','GET','');" class="one-star">1</a></li>
<li><a href="JavaScript:makeRequest('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=2','pfencallback','GET','');" class="two-stars">2</a></li>
<li><a href="JavaScript:makeRequest('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=3','pfencallback','GET','');" class="three-stars">3</a></li>
<li><a href="JavaScript:makeRequest('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=4','pfencallback','GET','');" class="four-stars">4</a></li>
<li><a href="JavaScript:makeRequest('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=5','pfencallback','GET','');" class="five-stars">5</a></li>
</ul>


<span class="word score" js-hook="ratingValue">
    <script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=3></script>
</span>
<script>$(".star-rating li.current-rating").css("width",30*$(".info-wrap .score-wrap .score").text().trim()+"px");</script>
<span class="word">分（<span class="num" js-hook="ratingNum"><script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=4></script></span>人评价）</span>
</div>

注意：

后台>系统>管理数据表>管理字段>增加字段：

评分数字段：字段名填“infopfen”、字段标识填“评分数”、字段类型选“大数值型(INT)”，其他默认，点提交;

评分人数字段：字段名填“infopfennum”、字段标识填“评分人数”、字段类型选“大数值型(INT)”，其他默认，点提交;

实现以上功能的过程中遇到一些问题，重写了部分js