ecms 顶和踩的具体写法完整实例以及css3样式实现按钮效果
ecms6.6 和7.0版本 顶和踩 更能实现代码
顶和踩的点击事件
顶的点击事件写法如下：
makeRequest('[!--news.url--]e/public/digg?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum1','EchoReturnedText','GET','');
踩的点击事件写法如下：
makeRequest('[!--news.url--]e/public/digg?classid=[!--classid--]&id=[!--id--]&dotop=0&doajax=1&ajaxarea=diggnum2','EchoReturnedText','GET','');
dotop参数 =1表示顶 =1时表示踩
ajaxarea参数 要显示到界面上的那一个对象上例如：
ajaxarea=diggnum1 表示把返回的支持数显示到id等于diggnum1的div中<div id="diggnum1"></div>
实时显示顶和踩的数量
| 实时显示顶数 | <script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5></script> |
| 实时显示踩数 | <script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=6></script> |
下面是本文顶和踩的完整实例采用css3的样式做成按钮效果 代码如下：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
.digger{width: 100%;height: 70px;margin: 10px 0 0 0;text-align: center;}
.digger .dcenter{width: 180px;height: 68px;margin: 0 auto;}
.digger .digg_g{margin: 0 10px 0 0;width: 82px;height: 68px;float: left;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);cursor: pointer;}
.digger .digg_f{width: 82px;height: 68px;float: left;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);cursor: pointer;}
.digger .top{
font-size: 18px;
font-weight: bold;
height: 45px;
line-height: 40px;
overflow: hidden;
background: #EEC900;
background: -moz-linear-gradient(center top , #EEEE00 , #EEAD0E 90%, #EE7600 2%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #EEEE00 , #EEAD0E 90%, #EE7600 2%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-gradient(linear,center top,center bottom,from(#EEEE00), color-stop(0.8,#EEC900),color-stop(0.99,#EE7600),to(#EEAD0E));
}
.digger .disable {color: #636363;}
.digger .disable .digg_g, .digger .disable .digg_f{cursor: default;}
.digger .disable .top{
background: #BFBFBF;
background: -moz-linear-gradient(center top , #BFBFBF , #B1B0B0 90%, #777575 2%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #BFBFBF , #B1B0B0 90%, #777575 2%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-gradient(linear,center top,center bottom,from(#BFBFBF), color-stop(0.8,#B1B0B0),color-stop(0.99,#777575),to(#777575));
}
.digger .bottom{height: 23px;line-height: 24px;overflow: hidden;}
</style>
</head>
<body>
<div class="digger">
<div class="dcenter">
<div class="digg_g" onclick="makeRequest('[!--news.url--]e/public/digg?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum1','EchoReturnedText','GET','');">
<div class="top">顶</div>
<div class="bottom" id="diggnum1">
<script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5></script>
</div>
</div>
<div class="digg_f" onclick="makeRequest('[!--news.url--]e/public/digg?classid=[!--classid--]&id=[!--id--]&dotop=0&doajax=2&ajaxarea=diggnum2','EchoReturnedText','GET','');">
<div class="top">踩</div>
<div class="bottom" id="diggnum2">
<script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=6></script>
</div>
</div>
</div>
</div>
</body>
</html>
来源：//作者：/更新时间：2013-10-24
顶
踩
相关文章：
