帝国cms文章添加点赞功能

1、引入js

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

2、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>
</div>

3、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;
}
标签:

发表评论