免插件帝国cms内置的ajax评分实现评分投票功能
2018-03-26 站长 站长日志
信息投票评分已经很流行很通用了,几乎所有网站都有,但帝国CMS必未有好的解决办法。
但实现上帝国CMS已经有了基础功能,只是没有体现出来而已,本教程就是利用帝国CMS本身的评分实现这个功能
帝国cms评分投票功能实际已经内置ajax中了,竟然没有说明。下面奇芳阁分析下通过帝国cms内置的ajax评分代码实现评分投票功能!
首先在模板的head区内调用ajax.js文件,如果已经使用了dig功能则不必重复调用这个js了:
1 |
< script type = "text/javascript" src = "[!--news.url--]e/data/js/ajax.js" ></ script >
|
将下面的css样式复制到你原有的样式表文件中,当然也可以直接写在模板中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<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>
|
下载下面的星级效果图片保存下来,注意图片名称改成:star_rating.gif,不过需要注意一下CSS中的图片路径修改成自己的实际路径。
在需要添加评分投票功能的地方添加以下代码
1 2 3 4 5 6 7 8 9 10 |
< 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('[!--news.url--]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('[!--news.url--]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('[!--news.url--]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('[!--news.url--]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('[!--news.url--]e/enews/?enews=AddInfoPfen&classid=[!--classid--]&id=[!--id--]&doajax=1&ajaxarea=showpf&fen=5','EchoReturnedText','GET','');" class = "five-stars" >5</ a ></ li >
</ ul >
|
此时你会发现在提交评分时总是提示:您来自的连接不存在!主要是因为要使用评分功能的模型,还需要往模型数据表增加“infopfen”(评分数)和“infopfennum”(评分人数)两个字段,详细操作步骤如下:
后台>系统>管理数据表>管理字段>增加字段:
评分数字段:字段名填“infopfen”、字段标识填“评分数”、字段类型选“大数值型(INT)”,其他默认,点提交;
评分人数字段:字段名填“infopfennum”、字段标识填“评分人数”、字段类型选“大数值型(INT)”,其他默认,点提交;
两个字段增加后模型即可使用评分功能了,效果如下:
帝国cms实现评分投票功能 方法二:
同样我们也可以使用表单的方式实现评分投票功能,首先还是要往模型数据表增加“infopfen”(评分数)和“infopfennum”(评分人数)两个字段,详细操作步骤同上!
增加评分字段以后,在那个评论的模板中有两个表单,一个是评分用的,另一个是提交评论用的。
在第一个表单(评分用的),表单提交地址,就用官方默认的:/e/enews/index.php,不能改为/e/pl/doaction.php
在第二个表单(提交评论用的),才需要把 /e/enews/index.php改为/e/pl/doaction.php
具体效果如下:
帝国cms列表页调用评分平均数,并设置小数点的方法:
首先找到帝国cms文件中的 e\public\ViewClick,打开index.php文件,在52行左右找到以下代 码:
1 |
$shownum = $r [infopfennum]? round ( $r [infopfen]/ $r [infopfennum]):0;
|
或者直接搜索 down==3,完整的代码是:
1 2 3 4 5 6 |
//评分数
elseif ( $down ==3)
{
$r = $empire ->fetch1( "select infopfen,infopfennum from {$dbtbpre}ecms_" . $cr [ 'tbname' ]. " where id='$id' limit 1" );
$shownum = $r [infopfennum]? round ( $r [infopfen]/ $r [infopfennum]):0;}
)
|
将上面代码中的绿色部分修改为:
1 |
$shownum = $r [infopfennum]? round ( $r [infopfen]/ $r [infopfennum],1):0;
|
其中的,1表示保留一个小数点,以此类推。
然后在列表页的调用代码为:(下面的代码为实时调用,不需要人工刷新。)
1 |
<script src=[!--news.url--]e/ public /ViewClick?classid=[!--classid--]&id=[!--id--]&down=3></script>
|