帝国cms 灵动标签 首页、列表页实现ajax顶一下点赞、踩一下吐槽功能

在正式开始之前,请先看帝国cms顶一下踩一下详细教程

教程地址:https://www.wentong.org/ecms/template/diggtop-diggdown-ajax.html

第二,需求分析,在列表页实现,顶一下、踩一下,ajax功能


列表模板页面上实现顶一下功能,那么首先就需要修改产品列表模板的代码,以下是我修改后的列表模板代码:

页面模板内容

<!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">
</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)?>"><?=$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]?>" 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--]"><div class="txt"><h3>查看<br>详情</h3></div></a></div>
<b><a href="[!--titleurl--]">[!--title--]([!--model--])</a></b>
<a href="[!--titleurl--]" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><em>[!--diggtop--]</em>人赞过</a></li>';

最后在底部模板里或JS文件中加入以下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>

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:帝国cms 灵动标签 首页、列表页实现ajax顶一下点赞、踩一下吐槽功能