帝国CMS顶一下diggtop踩一下diggdown ajax无刷新优化提示具体ajaxarea=diggdown实现和灵动标签调用顶方法详解

一、先看一下的效果图,如果需要测试的,本文末尾就可以测试

第一步,先在数据表添加diggnum 和diggdown 两个字段,并设置为可以录入、可以修改。

后台-系统-管理数据表(右侧选择数据表)-管理字段-增加字段-设置说明

顶的设置说明:新建的字段名 必须填为diggtop;字段标识 可根据需要自由设置,本例填为“顶”;

字段类型 选择大数值型(INT);字段的其他选项按默认设置提交即可。

踩的设置说明:新建的字段名 必须填为diggdown;字段标识 可根据需要自由设置,本例填为“踩”;

字段类型 选择大数值型(INT);字段的其他选项按默认设置提交即可。

后台-系统-管理数据表(右侧选择数据表)-管理系统模型-修改-(顶和踩)列表模板和内容模板(打钩)-录入表单模板和前台投稿表单模板(打钩)-提交

第二步、模板中顶和踩的应用首先引入自带ajax和jQuery

<script type="text/javascript" src="/e/data/js/ajax.js"></script>
jQuery库文件,本站使用了新浪云的公共库
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>

第三步,在你需要展示 顶一下,踩一下的地方加入以下代码(这是本站的使用的代码,请自行修改)

<p class="txtC">
<table>
<tbody>
<tr>
<td align="right"><span class="cai" id="cai">   <a href="#"><i class="far fa-thumbs-down"></i> <em><script src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=6"></script></em>人吐槽</a></span>
</td>
<td><span class="dianzan" id="dianzan"><a href="#"><i class="far fa-thumbs-up"></i> <em><script src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5"></script></em>人点赞</a></span>
</td>
</tr>
</tbody>
</table>
</p>

第四步,在上述代码末尾添加 js 代码


<script type="text/javascript">
$(".dianzan").click(function(){
    event.preventDefault();
    $.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] != "") {
                    $(".dianzan em").html(reinfo[0]);
                }
                if (reinfo[2] != "") {
                    var left = parseInt($(".dianzan").offset().left)+20, top = parseInt($(".dianzan").offset().top);
                    $(".zan").remove();
                    if (reinfo[2] == "谢谢您的支持") {
                        $(".dianzan").append('<div class="zan">+1 谢谢您的支持</div>');
                    }else{
                        $(".dianzan").append('<div class="zan">已赞</div>');
                    }
                    $(".zan").css({"position":"absolute","z-index":"1","left":left+"px","top":top+"px","color":"inherit"}).animate({top:top-30},"slow",function(){$(this).fadeIn("fast").remove();});
                }
            }else{}
        }
    });
});
$(".cai").click(function(){
    event.preventDefault();
    $.ajax({
        type:"GET",
        url:"[!--news.url--]e/public/digg/",
        data:{"classid":[!--classid--],"id":[!--id--],"dotop":0,"doajax":1,"ajaxarea":"diggdown"},
        dataType:"text",
        success:function(data){
            var reinfo = data.split("|");
            if (reinfo.length != 1) {
                if (reinfo[0] != "") {
                    $(".cai em").html(reinfo[0]);
                }
                if (reinfo[2] != "") {
                    var left = parseInt($(".cai").offset().left)+20, top = parseInt($(".cai").offset().top);
                    $(".zan").remove();
                    if (reinfo[2] == "谢谢您的评价") {
                        $(".cai").append('<div class="zan">+1 谢谢您的评价</div>');
                    }else{
                        $(".cai").append('<div class="zan">已吐槽</div>');
                    }
                    $(".zan").css({"position":"absolute","z-index":"1","left":left+"px","top":top+"px","color":"inherit"}).animate({top:top-30},"slow",function(){$(this).fadeIn("fast").remove();});
                }
            }else{}
        }
    });
});
</script>

最后,大功告成。

另外,附上顶一下和踩一下的一般代码:


模板中如下:
<!----------------------------------顶------------------------------------------->

<div id="diggnum>
<script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5"></script>
</div>
<div>
<a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');">来顶一下</a></td>
</div>

或 全包在<a>标签

<a style="float:left" href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');" class="action action-like"><span class="ldc-ul_cont ldc_red" title=顶><img src="[!--news.url--]e/data/images/displayadd.gif" />&nbsp;<span id="diggnum"><script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5></script></span>&nbsp;</span></a>



<!----------------------------------上顶下踩------------------------------------------->

<div id="diggdown">
<script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=6"></script>
</div>
<div>
<a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=0&doajax=1&ajaxarea=diggdown','EchoReturnedText','GET','');">来踩一下</a></td>
</div>

或 全包在<a>标签

<a style="float:left" href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=0&doajax=1&ajaxarea=diggdown','EchoReturnedText','GET','');" class="action action-like"><span class="ldc-ul_cont ldc_green" title=踩><img src="[!--news.url--]e/data/images/displaynoadd.gif" />&nbsp;<span id="diggdown"><script src=[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=6></script></span>&nbsp;</span></a>
 
<!----------------------------------踩------------------------------------------->

注意:顶一下的时候 id必须等于diggnum(即id="diggnum")

      down=5  dotop=1  ajaxarea=diggnum
      
      踩一下的时候 id必须等于diggdown(即id="diggdown")
      down=6  dotop=0  ajaxarea=diggdown

灵动标签调用顶的实例:

[e:loop={'news',5,19,0}]
<li><?=$bqno?>、<a target="_blank" href="<?=$bqsr['titleurl']?>" title=""><?=$bqr['title']?></a>
<a href="JavaScript:makeRequest('[!--news.url--]e/public/digg?classid=<?=$bqr['classid']?>&id=<?=$bqr['id']?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$bqr['id']?>','EchoReturnedText','GET','');"  class="action">
<spanid="diggnum<?=$bqr['id']?>"><script src="[!--news.url--]e/public/ViewClick?classid=<?=$bqr['classid']?>&id=<?=$bqr['id']?>&down=5"></script></span>喜欢</a></span>
</li>
[/e:loop]

人吐槽 人点赞

猜你喜欢

发表评论

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

你可以使用这些语言

查看评论:帝国CMS顶一下diggtop踩一下diggdown ajax无刷新优化提示具体ajaxarea=diggdown实现和灵动标签调用顶方法详解