帝国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 页面划词搜索JS
Sep 28 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
Angular2数据绑定详解
Apr 18 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue 实现特定条件下绑定事件
Nov 09 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
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
js实现查询商品案例
2020/07/22 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
在Python中定义一个常量的方法
2018/11/10 Python
使用python远程操作linux过程解析
2019/12/04 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python @property及getter setter原理详解
2020/03/31 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
厨房管理计划书
2014/04/27 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书