帝国cms首页列表页实现点赞功能

巴巴塔 · 发表于 2024-12-16 07:26:09

查看帝国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方式发送请求。了解实现的原理之后就很容易在网站其他页面上实现顶一下(点赞)功能，以下给出实现方法的相关代码。
例如我们需要在产品列表模板页面上实现顶一下功能，那么首先就需要修改产品列表模板的代码，以下是我修改后的列表模板代码：
页面模板内容
<!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--][!--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--]" 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>人赞过</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> 总结
以上所述是小编给大家介绍的帝国cms首页列表页实现点赞功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册