Just A Blog > WordPress > 使用jQuery增强主题评论功能

使用jQuery增强主题评论功能

jQuery是一个伟大的东西,简单的几句代码就可以实现拉风的效果。自从自己搞了个Jat-Theme后,就经常往主题里面加入各种各样的jQuery效果,折腾到前两天自己也认为算是差不多了,可以说是一个阶段性的产物了。再折腾下去只会永无休止!可能以后还会整合一下所有的背景图片,做一个Logo(说了半年还没有做出来呢~~(╯﹏╰)),总之都会把自己认为好的东西加进去。

回正题,这次要说一下现在用的主题里面的jQuery效果:

1、AJAX评论

Ajax评论对大家来讲陌生的东西,这个功能的时候方法有很多,也有专门的插件来实现这个功能。想要自己动手做的朋友可以参考一下K2主题代码或者是笑傲人生的文章“使用 jQuery 实现 wordpress 的 Ajax 留言”。文章里对Comment.js文件都有详细的解释。功能的实现不是太复杂的,至于那些样式的定义就随个人喜欢了,看明白了comment.js文件就可以自己定义提交过程,和提交后的样式。

ajax-comment

我这里是在提交过程中加入了一个GIF进度图片,网速快的时候这个效果就是一闪而过,但对于网速不好的朋友,搞这样一个山寨进度条还是OK的。

2、@评论预览

comment-show

@评论预览是前两天才加上去的,年前看了PhilNa的两篇文章(),但本地试验的时候做不出来。直到前两天MG12把用于nvoie主题的@评论预览代码放出来,修改了一下代码就可以在我的博客上实现这个功能。

如果你已经安装了Mail To Commenter插件,加上这个jQuery应该会很酷!!

3、隐藏评论回复按钮

<script>
    $(document).ready(function(){
    $(".comm-reply").hide();
    $("#commentlist li").hover(function() {
    $(this).find(".comm-reply").show();
    }, function() {
    $(this).find(".comm-reply").hide();
    });
    });
</script>

Jat-Theme里面是当鼠标位于评论区域的时候才显示“回复”按钮。实现这个只需要加入一小段代码就OK了,这部分代码来自Jinwen老兄。

Categories: WordPress Tags: , ,
  1. March 12th, 2009 at 11:16 | #1

    确实很拉轰,收藏先 :mrgreen:

  2. March 12th, 2009 at 11:51 | #2

    一直很喜欢你的这个效果呢

  3. March 12th, 2009 at 13:16 | #3

    @AG 谢谢支持!!!

    @贝壳 其实也就是在提交的过程中加入一个图片而已,很简单的,O(∩_∩)O哈哈~

  4. March 12th, 2009 at 14:53 | #4

    在肖恩大师那看过,很酷,用@回复的很好!

  5. March 12th, 2009 at 20:21 | #5

    想再做个主题,不怎么喜欢自己现在这个。发现真的挺难~~

  6. March 12th, 2009 at 21:16 | #6

    额,把俺摆上台了。俺原来那个主题用上你的comments,但效果没出来。也没空整。你这个除了配色,都还挺喜欢的。

  7. March 12th, 2009 at 22:19 | #7

    @睡到自然醒blog 折腾完这个就感觉这个主题差不多了,O(∩_∩)O~

    @小墨 我有空想用hybrid为蓝本做一个主题,hybrid的功能的确是很牛逼啊。。

    @Idoin 这个配色刚开始看的时候感觉还可以,但不怎么耐看,看多了很容易腻~~~

  8. March 13th, 2009 at 00:11 | #8

    现在没什么时间啊,有时间了继续折腾,呵呵!

  9. March 13th, 2009 at 06:38 | #9

    我不老我不老。。。

  10. March 13th, 2009 at 20:34 | #10

    @xiaorsz 前两天看到一个很有色彩的图片,打算用它做一个主题呢,呵呵。。

    @Jinwen 那以后还是叫你小朋友了。。。

  11. March 13th, 2009 at 23:07 | #11

    越来越喜欢你的主题了……偷偷给我一份吧……我改个配色……

  12. March 15th, 2009 at 09:36 | #12

    对于技术,我一直都是个外行!学习了

  13. March 16th, 2009 at 13:08 | #13

    @Showfom 我在修改代码呢,改完给你一份。。

    @许三品 我也是偶尔折腾一下。几乎都是把别人的山寨化。。。

  14. sm
    April 11th, 2009 at 00:06 | #14

    :P
    那你现在关于评论用了哪几个插件?

  15. April 11th, 2009 at 11:53 | #15

    这个功能非常不错啊

  16. April 11th, 2009 at 23:26 | #16

    @sm 用了Mail To Commenter和Custom Smilies这两个插件。

  17. April 18th, 2009 at 10:45 | #17

    @AG 呵呵 测试效果!

  18. April 18th, 2009 at 10:48 | #18

    @AG @AG 再次测试!

  19. April 18th, 2009 at 13:11 | #19

    @sean 你成功滴把俺测过来了~~~

  20. April 18th, 2009 at 13:13 | #20

    @AG 目的达到!HOHO,有空去我那逛逛哈!

Comment pages
1 2 707
  1. No trackbacks yet.
Loading Comment...

分享&收藏

无觅相关文章插件,快速提升流量