软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 建站程序 > Blog教程 > 如何使Z-blog的评论分页

如何使Z-blog的评论分页

Z-Blog上的评论分页我一直没有看到比较好的解决方案。社区里有一套Z-Blog评论分页插件可惜在1.8上基本没用,所以一直以来Z-Bloger们的评论都是一长条的向下列,几十条倒是没有什么关系,不过如你的评论上了百,上了千,还没有分页的话那可真得累死想给你评论的人了。这几天一直忙着公司加班所以也一直没有更新日志,昨晚突然来了灵感,做出了一个Z-Blog上的评论分页功能。

其实实现的思路比较简单:使用JS根据定义的每页显示数量和当前的页数,从评论列表中计算出应该显示的评论,其它的一律隐藏。可能你不懂得我在说什么,算了,先看图吧。

 

从上图可以看到分页的效果。你也可以点击查看详细演示效果

如何实现?

第一步:你只需要在模板文件b_article-single.html中想显示评论分页的地方插入“<div id=showpage></div>”来显示分页;

第二步:在模板文件single.html的尾部插入如下Javascript代码以实现分页:

<script language="javascript" type="text/javascript">
/*
Z-Blog 1.8 评论分页js By 石头
作者博客 http://www.stou.info
最后更新时间 2010.6.17
*/
var eachCounts = 5; //每页显示多少条评论
var domSelector = 'li[id]'; //评论jQ选择器表达式 不同的模板可能表达式不一样,如果你使用这个表达式不正常,请联系我帮你写这个表达式
var totleCounts = $(domSelector).size(); //获取评论总数
var pageCounts;
if(totleCounts <= eachCounts){pageCounts = 1}else{totleCounts % eachCounts==0 ? pageCounts = (totleCounts/eachCounts) : pageCounts = Math.floor(totleCounts/eachCounts)+1}
function LoadComment(p){$(domSelector).each(function(index,domEle){if( index >= (p-1)*eachCounts && index <= (p*eachCounts)-1){$(domEle).css("display","block")}else{$(domEle).css("display","none")}});
for(i=1;i<=pageCounts;i++){if(p==i){$("#CommentPageBar"+p).removeAttr("href");$("#CommentPageBar"+p).attr("class","now-page");$("#CommentPageBar"+p).attr("title","")}else{$("#CommentPageBar"+i).attr("href","javascript:;");$("#CommentPageBar"+i).attr("title","第"+i+"页评论");$("#CommentPageBar"+i).attr("class","this-page")}}}
var s; s="";
for(i=1;i<=pageCounts;i++){s+="<span style='height:auto;width:20px;margin-right:6px'><a href='javascript:;' style='padding:6px;' onclick=LoadComment('"+i+"') title='第"+i+"页评论' id=CommentPageBar"+i+" class=this-page>"+i+"</a></span>";}
$('#showpage').html("<div style='text-align:right; height:30px;width:100%;margin-top:10px;' class=CommentPageDiv>评论分页:"+s+"</div>");
LoadComment(1); //加载第一页评论
</script>

保存好上面两个模板的代码,再在后台文件重建一下,Z-Blog的评论分页就解决啦。你可以通过代码中的“eachCounts”配置每页你想显示的评论数量,你也可以在CSS中定义“.CommentPageDiv”来控制评论分页条的样式,定义“.this-page”来控制分页的样式,定义“.now-page”来控制当前页的样式。因为大家的评论列表模板不一致,所以代码中的评论选择器的表达式并不适用于所有模板,如果你不熟悉jQuery,你可以联系我帮你写这个表达式。

如果你比较熟悉Css和Javascript,你也可以通过更改代码来实现更加丰富的功能。欢迎大家多多提意见多多评论

本文引石头博客,原文地址为:http://www.stou.info/skill/128.html

    相关阅读
    栏目导航
    推荐软件