帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能
查看帝國(guó)cms建站程序新聞系統(tǒng)的內(nèi)容頁(yè)模版代碼,找到頂一下的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" >來(lái)頂一下</a></td>
</tr>
</table>
由以上代碼可知,當(dāng)前的總頂數(shù)是通過(guò)動(dòng)態(tài)腳本載入的方式實(shí)時(shí)輸出,而a標(biāo)簽上的makeRequest()函數(shù)就是用來(lái)實(shí)現(xiàn)頂一下功能的方法。makeRequest()函數(shù)的第一個(gè)參數(shù)是請(qǐng)求地址并附帶參數(shù)數(shù)據(jù),第二個(gè)參數(shù)是成功請(qǐng)求后執(zhí)行的回調(diào)函數(shù)名,第三個(gè)參數(shù)指定以GET方式發(fā)送請(qǐng)求。了解實(shí)現(xiàn)的原理之后就很容易在網(wǎng)站其他頁(yè)面上實(shí)現(xiàn)頂一下(點(diǎn)贊)功能,以下給出實(shí)現(xiàn)方法的相關(guān)代碼。
例如我們需要在產(chǎn)品列表模板頁(yè)面上實(shí)現(xiàn)頂一下功能,那么首先就需要修改產(chǎn)品列表模板的代碼,以下是我修改后的列表模板代碼:
頁(yè)面模板內(nèi)容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title><?php echo ReturnClassAddField(0,"seotitle");?></title>
<meta name="keywords" content="[!--pagekey--]">
<meta name="description" content="[!--pagedes--]">
<link rel="stylesheet" href="[!--news.url--]index/css/style.css" rel="external nofollow" >
</head>
<body>
<div class="head_about">[!--temp.header--]</div>
<div class="bannProOuter"><div class="bannPro"><ul><li><a class="current" href="<?=sys_ReturnBqClassname($class_r[1],9)?>" rel="external nofollow" ><?=$class_r[1][classname]?></a></li></ul></div></div>
<div class="proOuter"><div class="proInner clearfix">
<div class="proSort">
<ul>
[e:loop={"select classid,classname,classpath from phome_enewsclass where classid in (7,8,9,10,11) order by classid asc",0,24,0}]
<?php
if($bqno==5){
echo '<li class="lastChild">';
}else{
echo "<li>";
}
$titleclass="";
if($bqr[classid]==$GLOBALS[navclassid]){
$titleclass="current";
}
?>
<a href="<?=$bqsr[classurl]?>" rel="external nofollow" class="<?=$titleclass?>"><?=$bqr[classname]?></a></li>
[/e:loop]
</ul>
</div>
<div class="selectNumberScreen"><div class="screenBox"><?=user_ShowFieldandChange()?></div></div>
<div class="proList clearfix"><ul>[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]</ul></div>
<div class="page2 txtC">[!--show.listpage--]</div>
</div></div>
[!--temp.footer--]
<script type="text/javascript">
$(".proList .photo").hover(function(){$(this).find(".txt").stop().animate({height:"300px"},300);},function(){$(this).find(".txt").stop().animate({height:"0px"},300);});
</script>
</body>
</html>
列表內(nèi)容模板(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.'><div class="photo"><img src="'.$tpic.'"><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="txt"><h3>查看<br>詳情</h3></div></a></div>
<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>人贊過(guò)</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('<div class="zan">+1 謝謝您的支持</div>');
//$("body").append('<div class="zan">+1 謝謝您的支持</div>');
}else{
mythis.append('<div class="zan">已贊</div>');
//$("body").append('<div class="zan">已贊</div>');
}
//"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>
總結(jié)
以上所述是小編給大家介紹的帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js通過(guò)keyCode值判斷單擊鍵盤上某個(gè)鍵,然后觸發(fā)指定的事件方法
下面小編就為大家?guī)?lái)一篇js通過(guò)keyCode值判斷單擊鍵盤上某個(gè)鍵,然后觸發(fā)指定的事件方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器實(shí)例【附demo源碼下載】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器,結(jié)合實(shí)例形式分析了javascript日期與時(shí)間計(jì)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01
FireBug 調(diào)試JS入門教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過(guò)firefox的FireBug調(diào)試JS,需要的朋友可以參考下2013-12-12
DIV+CSS+JS不間斷橫向滾動(dòng)實(shí)現(xiàn)代碼
不間斷橫向滾動(dòng)想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧,本文也使用DIV+CSS+JS實(shí)現(xiàn)一個(gè),感興趣的你可以參考下哈,希望對(duì)你學(xué)習(xí)有所幫助2013-03-03
jquery實(shí)現(xiàn)動(dòng)靜態(tài)條形統(tǒng)計(jì)圖
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)靜態(tài)條形統(tǒng)計(jì)圖,需要的朋友可以參考下2015-08-08
Bootstrap導(dǎo)航中表單簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航中表單簡(jiǎn)單實(shí)現(xiàn)代碼,含路徑導(dǎo)航的具體實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03

