ECMS实际上已经内置ajax评分,竟然没有说明。现在结合一下CSS做的效果发出来给大家个参考。css样式可以复制到你原有的样式表文件,附件就是星级效果的图片,保存下来就OK了,注意一下CSS中的图片路径修改成自己的实际路径。
在head区加调用ajax.js,如果已经使用了dig功能不必重复调用这个js
<script type="text/javascript" src="[!--news.url--]e/data/js/ajax.js"></script>
<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: 90px;
}
.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>
<span id="showpf"><script type="text/javascript" src="[!--news.url--]e/public/ViewClick?classid=[!--classid--]&id=[!--id--]&down=3"></script></span>分
<ul class="star-rating">
<li class="current-rating"></li>
<li><a href="JavaScript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=1','EchoReturnedText','GET','');" class="one-star">1</a></li>
<li><a href="JavaScript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=2','EchoReturnedText','GET','');" class="two-stars">2</a></li>
<li><a href="JavaScript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=3','EchoReturnedText','GET','');" class="three-stars">3</a></li>
<li><a href="JavaScript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=4','EchoReturnedText','GET','');" class="four-stars">4</a></li>
<li><a href="JavaScript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=5','EchoReturnedText','GET','');" class="five-stars">5</a></li>
</ul>
上传以下图片:
效果如下
就是这个样子
上传以下图片: