帝国首页列表页实现点赞的方法

2017-10-30 18:31:40来源:CSDN作者:sinat_34803353人点击

分享

查看帝国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','');">来顶一下</a></td></tr></table>
由以上代码可知,当前的总顶数是通过动态脚本载入的方式实时输出,而a标签上的makeRequest()函数就是用来实现顶一下功能的方法。makeRequest()函数的第一个参数是请求地址并附带参数数据,第二个参数是成功请求后执行的回调函数名,第三个参数指定以GET方式发送请求。了解实现的原理之后就很容易在网站其他页面上实现顶一下(点赞)功能,以下给出实现方法的相关代码。

例如我们需要在产品列表模板页面上实现顶一下功能,那么首先就需要修改产品列表模板的代码,以下是我修改后的列表模板代码:

页面模板内容

<!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"></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)?>"><?=$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}]<?phpif($bqno==5){    echo '<li class="lastChild">';}else{    echo "<li>";}$titleclass="";if($bqr[classid]==$GLOBALS[navclassid]){    $titleclass="current";}?><a href="<?=$bqsr[classurl]?>" 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>


列表内容模板(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--]"><div class="txt"><h3>查看<br>详情</h3></div></a></div><b><a href="[!--titleurl--]">[!--title--]([!--model--])</a></b><a href="[!--titleurl--]" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><em>[!--diggtop--]</em>人赞过</a></li>';
最后在底部模板里或JS文件中加入以下js代码,大功告成

<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>



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台