下载鸥 > 网站下载 > 开发教程 > 帝国CMS

帝国CMS首页、列表页实现点赞功能解析与demo

409 2021-03-04 15:54:14

收藏
帝国cms的点赞数是通过动态脚本载入的方式实时输出,而a标签上的makeRequest()函数就是用来实现顶一下功能的方法。了解这个原理之后,列表页、首页的点赞就很容易了。

makeRequest()函数的第一个参数是请求地址并附带参数数据,第二个参数是成功请求后执行的回调函数名,第三个参数指定以GET方式发送请求。了解实现的原理之后就很容易在网站其他页面上实现顶一下(点赞)功能。

现有列表模板如下,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>
        <a href="[!--titleurl--]" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><em>[!--diggtop--]</em>人赞过</a>
    </li>
';

JS部分如下:

<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>

本文地址:https://xzo.com.cn/develop/empire/659.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于帝国CMS


帝国cms是一款功能极为强大的cms程序,性能强悍、安全性高,可轻松支持10万数据,高级开发人员可制作出能容纳千万数据量的网站,是国内最出色的开源cms程序之一,推荐企业用户使用

当前最新版本为7.5,8.0版本即将上线,新版本的核心优化点在于多终端的适配。

推荐帝国CMS开发教程
帝国CMS怎样批量取消文章审核
帝国CMS怎样批量取消文章审核

使用帝国CMS的朋友可能有这样的需求:由于信息发生变化,或是数据出了问题,想要...

7 628
帝国CMS内容页点赞功能怎么用?
帝国CMS内容页点赞功能怎么用?

网站的点赞代表用户对网站内容的认可,点赞数越高代表质量越高,对于提升用户体...

8 721
宝塔面板帝国cms搬家报错No input file specified
宝塔面板帝国cms搬家报错No input file specified

今天有客户向鸥哥求助说宝塔面板帝国cms搬家报错No input file specified,这...

23 2065
帝国CMS怎样让一条信息具有多个模板?
帝国CMS怎样让一条信息具有多个模板?

帝国CMS的信息是绑定内容模板的,通过本教程可以实现在前台自由使用不同的模...

17 610
帝国cms怎样制作多语言数据包?
帝国cms怎样制作多语言数据包?

许多帝国cms带有多语言版本,如果每个语言都添加一次程序,不仅开发比较麻烦,维...

0 371
填坑笔记:帝国cms栏目部分页面无法访问的原因与解决办法
填坑笔记:帝国cms栏目部分页面无法访问的原因与解决办法

在网站开发的过程中,我们可能因为这样那样的问题遇到无数的出错。有可能是代...

0 415
帝国cms编辑器ckeditor怎样获取最新内容?
帝国cms编辑器ckeditor怎样获取最新内容?

帝国cms编辑器使用的是ckeditor,想要获取最新内容需要点击两下,否则取到的不...

0 341
帝国cms 使用download.js下载视频文件
帝国cms 使用download.js下载视频文件

视频文件默认会被pc浏览器直接打开,此时download属性也同样无效。那么,要怎样...

0 455
推荐插件
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 520
帝国cms自动生成文章新闻目录插件下载
帝国cms自动生成文章新闻目录插件下载

用户体验是我们的需求,百度蜘蛛的认可更是我们的需求。毕竟,没有收录排名,何来...

0 1080
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 410
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 436
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 386
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 437
帝国cms自动给正文关键词添加tag内链
帝国cms自动给正文关键词添加tag内链

帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...

0 799
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 497
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入