前文提到了评论的无限ajax翻页,比较复杂,还是用一个简单点的方法吧,纯js实现的,利用了jQuery的infinitescroll插件,以前有提到利用实现的首页无限翻页效果,示例比如:现在W1主题的首页。既然引入了插件,多多利用下。

这次评论是顺序显示,顶部先显示最老的评论,滚动屏幕自动加载下一页,直到显示完毕,这可以用于博客文章页,比较符合阅读习惯。要是某篇文章评论数量很多,开启分页后用这个效果很不错~

这是Demo,我把付费主题W1p(仅售¥88)加上这个效果,需要升级的请联系我。

下面的代码很简单,先加载jQuery库,然后调用jQuery的infinitescroll插件。js下载地址可以参见我前面这篇首页无限翻页效果

然后加入这段js来控制:

$('#thecomments').infinitescroll({

      navSelector  : "#comment_pager",
                     //评论翻页部分的id
      nextSelector : "#comment_pager  a",
                     // 评论翻页点击的id
      itemSelector : "#thecomments li.comment"  ,
                     // 这是需要载入的评论部分,根据你的主题修改
	  loadingImg   : "img/ajax-loader.gif",//	loading图片自己改
	  //animate      : true,  
	  bufferPx     : 60,//增加这个数字,会提前加载
	  loadingText  : "加载评论中...",
	  donetext     : "评论加载完毕~"
    },function(arrayOfNewElems){

 	//这里添加你需要的回调函数,比如回复按钮的js   
 });

 

Over~注意根据自己的主题修改选择器,这次够简单了吧~

PS:后台评论选项修改成这样比较合适:

123

  1. 槑槑兽 (2011.03.20 at 14:09) 9楼

    话说我上一个主题就是用的这个。w1

  2. 槑槑兽 (2011.03.20 at 14:10) 10楼

    [color=#003221]评论框上面的小工具怎么实现的?[/color]

  3. 兔了吧唧网 (2011.03.26 at 01:36) 11楼

    学习了 !哈哈

  4. Wayjam (2011.03.27 at 12:19) 12楼

    我现在首页的AJAx翻页是提取自一个插件的。有空再弄评论AJAX翻页

    • winy() (2011.03.28 at 01:42)

      @Wayjam ,恩,你那个也不错,原理跟我用的首页翻页是一样的

  5. 黄桃 (2011.04.03 at 10:56) 13楼

    如此高级的东西,
    我还是以后再折腾把...

  6. IT技术交流网 (2011.04.04 at 17:09) 14楼

    做的很好 赞一个!!

  7. SayMe (2011.04.04 at 22:25) 15楼

    才看了两篇文章就发现博主是如此的强大啊.呵呵.
    顺便问下博主,你现在使用的这个主题的免费版是w1s吗?

    • winy() (2011.04.04 at 23:20)

      @SayMe ,是的,w1p是付费版,样式稍微和我现在用的有点不一样。

  8. 荒野无灯 (2011.04.26 at 23:09) 16楼

    和上次一样,还是infinitescroll 。我现在用的是提取自WP后台的AJAX,不过目前显示嵌套评论有点小问题。

评论分页: 1 2

发布评论

邮箱(必填)

换个背景