這次帶給大家的是在帝國cms首頁列表頁怎麼添加點讚功能，帝國CMS模版是很好用的，如果想在模版的基礎上添加一些自己需要的功能需要怎麼實現呢？這篇文章就給大家好好分析一下。
查看帝國cms建站程序新聞系統的內容頁模版代碼，找到頂一下的HTML代碼塊，如下所示：
<table border="0" align="center" cellpadding="0" cellspacing="0" class="digg">
<tr>
<td class="diggnum" id="diggnum"><strong><script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5"></script></strong></td>
</tr>
<tr>
<td class="diggit"><a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');" rel="external nofollow" >来顶一下</a></td>
</tr>
</table>
登入後複製
由以上代碼可知，當前的總頂數是透過動態腳本載入的方式即時輸出，而a標籤上的makeRequest()函數就是用來實現頂一下功能的方法。 makeRequest()函數的第一個參數是請求位址並附帶參數數據，第二個參數是成功請求後執行的回調函數名，第三個參數指定以GET方式發送請求。要了解實作的原理之後就很容易在網站其他頁面上實作頂一下(按讚)功能，以下給出實作方法的相關程式碼。
例如我們需要在產品清單範本頁面上實作頂一下功能，那麼首先就需要修改產品清單範本的程式碼，以下是我修改過的清單範本程式碼：
清單內容模板(list.var)
$nomar="";
if($no%4==0){$nomar=" class=\"nomar\"";}else{$nomar="";}
if($r[titlepic]){$tpic=sys_ResizeImg($r[titlepic],300,300,1,"");}else{$tpic="/e/data/images/notimg.gif";}
$listtemp='<li'.$nomar.'><p class="photo"><img src="'.$tpic.'"><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p class="txt"><h3>查看<br>详情</h3></p></a></p>
<b><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" >[!--title--]([!--model--])</a></b>
<a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><em>[!--diggtop--]</em>人赞过</a></li>';
最后在底部模板里或JS文件中加入以下js代码，大功告成
[html] view plain copy print?
<script type="text/javascript">
$(".icon-thumbs-up").click(function(event){
event.preventDefault();
var mythis = $(this);
var classid = mythis.data("classid");
var id = mythis.data("id");
$.ajax({
type:"GET",
url:"[!--news.url--]e/public/digg/",
data:{"classid":classid,"id":id,"dotop":1,"doajax":1,"ajaxarea":"diggnum"},
dataType:"text",
success:function(data){
var reinfo = data.split("|");
if (reinfo.length != 1) {
if (reinfo[0] != "") {
mythis.find("em").html(reinfo[0]);
}
if (reinfo[2] != "") {
//var left = parseInt(mythis.offset().left)+20, top = parseInt(mythis.offset().top);
var left = 20, top = mythis.find("em").get(0).offsetHeight;
$(".zan").remove();
if (reinfo[2] == "谢谢您的支持") {
mythis.append('<p class="zan">+1 谢谢您的支持</p>');
//$("body").append('<p class="zan">+1 谢谢您的支持</p>');
}else{
mythis.append('<p class="zan">已赞</p>');
//$("body").append('<p class="zan">已赞</p>');
}
//"text-shadow":"0 1px 0 rgba(0,0,0,0.5)","font-family":"simsun"
$(".zan").css({"position":"absolute","z-index":"10","left":left+"px","top":-top+"px","color":"inherit"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();});
}
}else{}
}
});
});
</script>登入後複製
相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
如何用vue實作登入驗證
js實作仿window系統行事曆效果
JS怎麼可以做到點選跳到登陸的個人信箱
#
以上是帝國cms首頁列表頁怎麼加入讚功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
