Home > Technology, WordPress > jQuery版ajax comment pager

jQuery版ajax comment pager

首先我声明,这个不是又产生了一个新的插件,而是我告诉大家我是如何修改mg12的插件ajax comment pager为jQuery方式来实现Ajax.因此很多的地方是针对我现在的这个主题而言的.不具备很高的通用性.只能给大家一些参考性的意见.

我也这里对于评论的翻页进行了部分js代码的重新激活(或者说是重载?这个我有点不好表达).从而在翻页后DOM被局部刷新后,js还能使用.因该是比较完美的解决了原有版本造成的翻页后鼠标悬浮和部分js脚本不能使用的问题.如果你是个爱折腾的人真的有必要参考一下.

Javascript真是个很神奇的东西.在前端设计中应该是具有越来越重要的作用.尽管有时候它拖慢了网页的载入.但是不可否认,相对用户体验来讲,这点点的牺牲还是很值得的.于是我们开始一点一点的在网站上添加代码.提供越来越多的效果.代码也就也来越大.拿mg12的主题以及插件来讲.所有的js都是自己写的.这样有好处,降低了错误的发生,具有较高的可控性.同时代码也不较少.但是像我这种爱折腾的人来讲.那些js远远不能符合我的要求,全部在自己写的话一是能力有限,二是.代码写出来或许也过于冗长了.所以我还是使用的了jQuery.一种更为简单的实现方式.从Google加载过啦的代码是压缩输出的.实际上浏览器只接收到18K左右的压缩文件.只相当于一张小图片的大小.算是很划算的了.所以我现在的很多js都是基于jQuery的.要的就是要充分利用这个18K.修改这个插件也是基于这个考虑.他的脚本有点大.而且我的鼠标悬浮还不能使用….

看吧,我是个爱废话的.下面正式讲.怎么修改的.

原理:通过GET方式向wp_list_comments()函数传递参数.查询指定的评论.这个你看看插件的代码吧.写得很清楚,比较容易理解.
Ajax要做的是:点击分页链接后,根据链接获得需要的参数(这个要用到正则表达式).然后从新整理参数,以GET方式发出请求,前面的php函数作出相应,然后返回数据.更新评论(DOM)

弄清楚它是怎么工作的了.一切并好办了.首先我们把服务器端的文件写好.直接提取插件中的ajax-comment-pager.php.修改不需要的地方.就是那些后台的设置参数.我们只需要AJAX function部分.里面的设置参数我们自己根据需要直接填上就行.然后我们看到它是通过add_action(‘init’, ‘cpage_ajax’);这个钩子连上去的.加上这个.把这些代码放到你的主题的functions.php里面.或者为了方便分开管理include进去也行.

然后我们写js.我这里重点强调的是方法.jQuery在这有很大的优势.它的选择器和事件.我们很简单就实现了.你看到mg12的代码.很多就是为了这个服务了.首先我们自己创建一个函数.ajacpload();将Ajax方法写到里面.为什么要单独写个函数处理.就是为了加载完后重置的.以下是那个函数的代码.

function ajacpload(){
$('.ajaxcp').click(function(){
    var wpurl=$(this).attr('href').split(/(\?|&)action=cpage_ajax.*$/)[0];
    var commentPage = 1;
    if (/comment-page-/i.test(wpurl)) {
    commentPage = wpurl.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0];
    } else if (/cpage=/i.test(wpurl)) {
    commentPage = wpurl.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0];
    };
    //alert(commentPage);
    var postId =PH.$('cp_post_id').innerHTML;
    var url = wpurl.split(/#.*$/)[0];
    url += /\?/i.test(wpurl) ? '&' : '?';
    url += 'action=cpage_ajax&post=' + postId + '&page=' + commentPage;        
    //alert(url);
    $.ajax({
    url:url,
    type: 'GET',
    beforeSend: function() {
    document.body.style.cursor = 'wait';
    var C=0.7;
    $('#commentslist,#commentnavi').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
    var loading='<span id="cmploading">Loading</span>';
    $('#commentpager').html(loading);
    },
    error: function(request) {
        alert(request.responseText);
    },
    success:function(data){
    var responses=data.split('<!--PHILNA-AJAX-COMMENT-PAGE-->');
    $('#commentslist').html(responses[0]);
    $('#commentpager').html(responses[1]);
    var C=1;
    $('#commentslist,#commentnavi').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
    $('#cmploading').remove();
    $("#commentslist a[rel='external']").click(function(){window.open(this.href);return false});
    $("#commentslist a[href*='http://philna.com'],#commentslist a[href*='javascript'],#commentslist a:has(img),a[href*=#]").attr("rel","inlinks");
    $("#commentslist a[rel!='inlinks']").click(function(){window.open(this.href);return false;});
    document.body.style.cursor = 'auto';
    $('#commentsinfo').ScrollTo(800);
    reinit();
    ajacpload();
        }
    });    
    return false;
    });
}

代码很多的部分都是正则表达式.我注释了些alert.就是为了看看中间是否执行的正常不.

重载的办法是什么呢?其实就是通过它自己在做完一些事情以后再加载一次他自己.看到Ajax的success部分.我用了reinit();
那里面放的只是个init()函数.这个是我为了自己方便理解和分开管理故意这么做的.init()函数里面就尽可以的放你需要重载的js了比如鼠标悬浮.内页链接平滑移动等.总之放你需要的部分.然后我们在函数的最下面.写上:

init();
ajacpload();

这样它们就全部被装载了.执行完Ajax后.又被自己在从新装载一次.从而代码就不在失效.

要注意的:

我虽然贴了不少的代码,但是你直接拷过去肯定不能用.因为我改动的比较多.重点是理解其中的道理.它是如何运作的.相信你理解了以后,自己也能很容易搞出来.

如果你对jQuery的Ajax还不是很了解,建议你看看官方文档.网上也有翻译好了的中文文档.里面有很详尽的解释.另外我在以后分享的几个Ajax方法中也会涉及一些解释.如果你感兴趣,可以留意一下.

PS.
我给博客新增加了个应用.把评论发送到Twitter.这个是直接POST方式发送数据处理的.你的帐号信息.不会被记录.请放心使用.但现在还是beta版.有些还不完善.先凑合着用吧.注意,这个是我自己写的,和水煮鱼的不同,他的好像运行的很稳定.我看看能不能向他取取经.哈哈哈.未来的主题我打算集成这个功能.或者写成插件.前提是还没有其他人写出这个插件…

  1. Showfom Mar 31st, 2009 @ 09:43 | #1

    Cool

  2. xiaorsz Mar 31st, 2009 @ 10:26 | #2

    很强大,改天拿来用用!!

  3. yinheli Mar 31st, 2009 @ 10:34 | #3

    @xiaorsz
    你的用了分页.评论也较多.所以还是比较建议使用的.加载的js也不多,应该在2K以内.

  4. Leeiio Mar 31st, 2009 @ 10:44 | #4

    我用不了ajax comment page,我的主题还不支持评论分页 T_T 谁能贴个让主题支持wp2.7 新版评论的修改教程上来,我是个懒人~

  5. sofish Mar 31st, 2009 @ 10:48 | #5

    hoho…不过,自己一直没有用分页,很享受不分页,很多留言的感觉=,=…

  6. yinheli Mar 31st, 2009 @ 10:48 | #6

    @Leeiio
    改天我写个吧

  7. yinheli Mar 31st, 2009 @ 11:00 | #7

    @sofish
    我的首页和评论都用到了jQuery实现的Ajax.效果还可以.翻页很享受.呵呵 :lol:

  8. 吖Bee Mar 31st, 2009 @ 13:27 | #8

    …….啊~又要折腾了,现在这个主题还是真的不错~

  9. 会律博客 Apr 1st, 2009 @ 13:27 | #9

    痛苦中!

  10. Soxiqi Apr 1st, 2009 @ 23:49 | #10

    有这些效果,主题真好。就是感觉字体小了点儿。

  11. yinheli Apr 2nd, 2009 @ 00:06 | #11

    @会律博客
    怎么啦~

    @Soxiqi
    如果你用IE.请不要使用小号字体.请使用中号.其他浏览器里的表现很好.

  12. z.Yleo77 Apr 13th, 2009 @ 21:12 | #12

    值得学习,,领会下。。

  13. 辐射鱼 May 24th, 2009 @ 12:33 | #13

    不错不错,好老的文章,被我翻出来了

  14. bolo Jun 1st, 2009 @ 23:21 | #14

    没有注释,看得很辛苦

  15. 小T Aug 11th, 2009 @ 20:07 | #15

    jQuery效果很炫

  16. chancat Nov 4th, 2009 @ 00:17 | #16

    谢谢分享,先收藏了 有时间研究下

  17. Yongd Dec 23rd, 2009 @ 09:27 | #17

    学习了,用在博客上试试

  18. 朵未 May 30th, 2010 @ 13:26 | #18

    我对这个不了解,不知道留下言能否看到这个效果。

Submitting Comment, Give me a second...

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 1 )
  1. Aug 19th, 2009 @ 21:20 | #1
    Pingback: 30+ jQuery中文教程和资源 | 帕兰映像