您当前的位置:首页 > 计算机 > 服务器 > 万维网络 > 帝国cms

【帝国CMS】文章页digg(点赞)代码

时间:01-19来源:作者:点击数:

不是新知识(技术),只是为了记录,以后方便使用。

首先要把默认对js加上:

<script type="text/javascript" src="[!--news.url--]e/data/js/ajax.js"></script>

接下来是html代码:

<div class="ho-show-digg">
	<p>这篇文章有帮助吗?</p>
	<p>
		<a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"><i class="fa fa-check"></i> 是</a>
		<em><i class="fa fa-close"></i> 否</em>
	</p>
	<p>已有 <span id="diggnum"><script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5></script></span> 人觉得有帮助</p>
	<p>还有其它问题?<a href="#">提交请求</a></p>
</div>

css如下:

.ho-show-digg{
	margin:3rem 0 1rem;
	padding:1rem 0;
	text-align:center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.ho-show-digg p:nth-child(2) a,.ho-show-digg p:nth-child(2) em{
	padding:.5rem 2rem;
	margin:0 .5rem;
	border:1px solid #285980;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.ho-show-digg p:nth-child(2) a:hover,.ho-show-digg p:nth-child(2) em:hover{
	color:#fff;
	background:#285980;
	transition: all .5s ease-out;
	cursor:pointer;
}
.ho-show-digg p:nth-child(3){
	font-size: 0.875rem;
}
.ho-show-digg p:last-child{
	margin:2rem 0 0;
}
.ho-show-digg p:last-child a:hover{
	text-decoration: underline;
}

效果:

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门