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


Posted in Javascript onOctober 30, 2017

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

Javascript 相关文章推荐
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
微信小程序商品详情页规格属性选择示例代码
Oct 30 #Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 #Javascript
JavaScript数组push方法使用注意事项
Oct 30 #Javascript
JavaScript Date对象应用实例分享
Oct 30 #Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
vue实现分页组件
2020/06/16 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python如何修改装饰器中参数
2018/03/20 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
pip安装python库的方法总结
2019/08/02 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
寄语学生的话
2014/04/10 职场文书
《海底世界》教学反思
2014/04/16 职场文书
残疾人小组计划书
2014/04/27 职场文书
学雷锋宣传标语
2014/06/25 职场文书
大学生党性分析材料
2014/12/19 职场文书
家长高考寄语
2015/02/27 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书