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
相关文章