您当前的位置:首页 > 网站建设笔记 >

帝国cms 来顶一下(点赞功能)优化提高用户体验

0

我们首先来看一下帝国cms建站程序默认的顶一下功能样式,如下所示:

单击来顶一下文字链接就会在当前总顶数量上+1,并弹出提示信息为谢谢您的支持的对话框,如果用户再单击(顶一下)就会提示您已提交过的信息,因为帝国cms的顶一下功能做了限制,同一个IP地址只能对同一篇文章顶一次。由于使用弹出对话框的方式对于用户体验来说效果一般般,所以我就改成了以下这种方式展示。

人赞过

修改步骤一:首先我们将帝国cms建站程序默认的顶一下HTML代码修改为以下代码所示。

<!--帝国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','');">来顶一下</a></td>
</tr>
</table>

<!--将以上的代码替换成以下代码-->
<span class="dianzan" id="dianzan"><a class="icon-thumbs-up-2" href="#"><em>[!--diggtop--]</em>人赞过</a></span>

修改步骤二:在相关内容模板页或JS文件中加入以下javascript代码(注意:因为此javascript代码功能基于jQuery的强大方法,所以在此JS代码之前必须载入jQuery库文件)。

<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{}
        }
    });
});
</script>

修改完毕,亲们可以测试下此效果。

顶部中部底部