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>
上传以下图片:
|