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

2024-09-27 23:54:38

查看帝国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--]<!--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--]" 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首页列表页实现点赞功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

帝国CMS留言板回复后发送EMAIL通知客户

说明:修改1:e/admin/tool/ReGook.php /*回复表单*/ 43行处添加代码 ----------------------------------------------------------------------------------------------- 复制代码代码如下: <input name="email" type="hidden" id="email" value="<?=$
帝国cms常用标签汇总

判断会员是否登录 <?php if(!$_COOKIE[ecmsmlusername]){ $srr="登录可见"; }else{ $srr="[!--lbsly--]"; } ?> [!--news.url--]skin/default/ [e:loop={"select classid,classname,bname from phome_enewsclass where classid='$GLOBALS[navclassid]'&quo
帝国cms目录结构分享

/ 系统根目录 ├d/ 附件和数据存放目录 (data) │├file/ 附件存放目录 │├js/ JS调用生成目录 │└txt/ 内容存文本存放目录 ├e/ 系统程序目录 (empire) ├html/ 自定义内容页存放预设目录 ├images/ 默认模板图片目录 ├s/ 专题目录 (special) ├search/ 高级搜索页面目录 ├skin/ 模板CSS和图片存放目录 └index.
帝国cms首页列表页实现点赞功能

查看帝国cms建站程序新闻系统的内容页模版代码,找到顶一下的HTML代码块,如下所示: <table border="0" align="center" cellpadding="0" cellspacing="0" class="digg"> <tr> <td class="diggnum" id="diggnum"><st
SpringBoot设置首页(默认页)跳转功能的实现方案

先给大家介绍下SpringBoot设置首页(默认页)跳转功能最近springboot开发需要设置个默认页面,就相当于我访问http://www.back.order.baidu.com要直接跳转到登录页面. 方案1:controller里添加一个"/"的映射路径 @RequestMapping("/") public String index(Model model, HttpServletResponse response) { model.addAttribu
微信小程序实现列表页的点赞和取消点赞功能

今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; var data = e.currentTarget.dataset; var mid = data.mid; var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid var isadd = 1; var newmessage = [];
小程序实现列表点赞功能

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应文章列表的id (我用的是 wx:for 列表渲染加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件) 2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存后面通过缓存判断该文章是否
产品列表页及首页新闻调用的说明

/style/info/host.asp?typeid=分类号 /style/info/sql.asp?typeid=分类号 .... 新闻定义中加了分类号,及新闻的条数: 新闻及帮助列表页的调用办法如下: /style/info/listnews.asp?typeid=分类号&pagesize=条数如果列出所有新闻类: /style/info/listnews.asp?typeid=分类号&pagesize=条数&type1=0 如果列出所有帮助类: /style/info/l
VUE利用vuex模拟实现新闻点赞功能实例

回顾新闻详细页很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储. 1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[], newsdetail:{} }, 增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的. 2.下面就
docker搭建CMS点播系统带播放器功能

目录正文一.准备机器二.安装docker 1. 安装依赖包 2. 设置阿里云镜像源 3. 执行安装命令 4. 验证是否安装成功三.拉取镜像四.运行镜像创建容器五.访问Web点播首页六.上传点播文件七.管理后台界面八.注册并登陆前台账户九.操作视频文件结尾 [导读]我相信这么多年,你一定看过各式各样的视频网站,不管内容怎么样,你有没有想过拥有一个属于自己的视频网站?如果想那就跟我来吧!今天这篇文章就能满足你的这个愿望. 如果你细心的话,也许不需要任何编程能力也可以完成这样愿望
history保存列表页ajax请求的状态使用示例详解

目录问题优化前代码 history history.pushState() window.onpopstate 问题2 问题最近碰到两个问题: 从首页进入列表页之后,点击下一页的时候,使用ajax请求更新数据, 然后点击浏览器“后退”按钮就直接返回到首页,实际这里想要的效果是返回列表页上一页. 在列表页分页为2的页面进入详情页,然后点击“后退”按钮,返回的事列表页分页为1的页面.没法记住之前分页状态. 优化前代码代码如下,在页数变化的时候,去异步请求数据,渲染页面. const curr

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

相关推荐

随机推荐