帝国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 相关文章推荐
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
咖啡的化学
2021/03/03 咖啡文化
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python协程用法实例分析
2015/06/04 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
如何通过python计算圆周率PI
2020/11/11 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
params有什么用
2016/03/01 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
《火烧云》教学反思
2016/02/23 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL