<a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><span class="font"><i class="fa fa-heart-o"></i><em>[!--diggtop--]</em>个赞</span></a>
帝国CMS列表内AJAX无刷新点赞代码
实现列表内AJAX无刷新点赞,直接上代码,注意需要jquery.min.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","width":"120px","height":"60px","background":"#fff","border-radius":"6px"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();});
}
}else{}
}
});
});
</script>
列表内容模板需要点赞的地方写:
栏 目:帝国CMS
下一篇:帝国CMS后台信息列表标题过长导致显示不全的问题解决方法
本文标题:帝国CMS列表内AJAX无刷新点赞代码
本文地址:https://zz.feitang.co/CMSjiaocheng/26707.html
您可能感兴趣的文章


阅读排行
推荐教程
- 09-22帝国cms怎么查看某个目录权限
- 09-22帝国cms怎么建站
- 09-22帝国cms源码怎么查看
- 09-22帝国cms怎么设置邀请码
- 11-22帝国CMS二次开发调用评论我的列表
- 11-22帝国cms中新建栏目提示“建立目录不成功,请检查目录权限”
- 11-22帝国CMS自定义列表查询SQL语句,从第N条开始查询的方法
- 11-22帝国CMS在js登陆模板中调用当前登陆用户的头像!
- 11-22帝国CMS二次开发如何设置随机会员头像
- 11-22帝国cms在当前栏目页下面调用相关栏目别名的栏目





