帝国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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
下拉框select的绑定示例
Sep 04 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
微信小程序商品详情页规格属性选择示例代码
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
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
使用store来优化React组件的方法
2017/10/23 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
交通违章检讨书
2014/09/21 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
车间班组长竞聘书
2015/09/15 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server