我们首先来看一下帝国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>
修改完毕,亲们可以测试下此效果。