八月
10

【效果测试展示篇】Ajax版即时侧边栏评论回复功能

自写了《博客加入若干Ajax效果》以来,在博客上陆续添加启用了一些ajax效果,一方面丰富博客体验,一方面也当做练习学习js的一种实践吧。昨天的时候,将wilin版的侧边栏最新评论修改成了AJax版的,可以翻看评论列表,也可以进入单个评论查看模式(借鉴了mg12的wp-recentcomment插件),几乎就是wp-rc的精简版,效果几乎一模一样,只不过wp-rc的脚本使用jQuery,更新列表时会有渐变的过渡效果。我自己的只是给加了个自己写的滑动效果,还能凑活。

只不过只是这样并不能满足我,我想既然边栏最新评论列表做成ajax可翻页形式,那么就是为了让读者去查看寻找自己感兴趣的评论,为了增进交流的便利,在侧边栏能直接回复自己感兴趣的评论那会很棒。

于是着手实现了这个效果。

考虑会遇到的的难点

在页面上插入表单很容易,要注意的一点是要阻止表单提交默认行为,开发过表单提交前验证的应该都知道怎么做。有困难的一点是评论嵌套,因为嵌套的深度有深度,而在边栏显示的评论你并不知道它是不是最后一层了,如果你对嵌套的最后一层评论回复了,那么这条新评论就会被当做主评论显示。我之前写过《完美解决WordPress嵌套回复的层深问题(无限嵌套)<一>》,看过的应该都知道,我是通过修改js调用脚本中传递的父级评论id值来使回复最后一层的评论在实际上嵌套到倒数第二层,这样就变相的实现了无限嵌套。

所以在解决边栏回复评论功能的嵌套问题是,我也是通过后台查询获取这条评论的嵌套深度,如果它是设置的最大深度了,就返回它的父一级评论的id,这样一来,也就解决了嵌套的问题。


这个功能的优势和局限性

11这个功能会极大地方便访客间的交流,两人之间讨论某一问题,你不必一直在一个页面回复评论,你可以在博客的任何一个页面回复他人。甚至不用刷新页面,你只需要翻看边栏,最新的评论就会即时显示,你可以直接对其进行回复,并且是嵌套回复。

当然,局限性也有,主要是不能回复博主的评论,因为最新评论并不显示博主的评论,所以普通访客就不能及时在侧边栏回复博主了。

 

有兴趣的可以在边栏回复测试,可以在最新评论处翻看找到一个名叫liuqiqi的发表的评论,大家可以对她进行回复测试。liuqiqi就下面这人,一个总是第一时间发表“美美的沙发。。。”的人。在最新评论处翻到她后,点击蓝色右向双箭头(如下图蓝色圆圈中),进入单条评论查看模式(如上图),再点击“reply”即可进行回复。

122

想要取消回复或者回复成功后想要返回,可以点击下图中的back按钮返回最新评论列表。222

你也不用担心在边栏回复后返回记不清回复过谁了,因为你回复过的人会被记录下来,在刷新页面前,你只能对一个人回复一次。

另外我的日志下方的评论回复也换上了自己的,功能还很简单,原生JS的。

本文标签: , , ,

分享

本文短网址: http://qiqi.boy.im/73

这篇文章已经有 72 条评论

Comments (70) Trackbacks (2)
You can leave a response or Trackback this entry .
  1. liuqiqi -#1

    美美的沙发。。。 :grin:

  2. Bee君 -#2

    wow~ ⊙o⊙!这个太帅了吧!

  3. winy -#3

    我想看代码篇,看源码费脑还不懂 :cry:
    还有

    liuqiqi就下面这人,一个总是第一时间发表“美美的沙发。。。”的人

    那可不一定 :razz:

    • liuqiqi --#1

      @winy
      上次被你抢了先。。。。 :cry:
      。。。先测试中,bug补救中。。刚以登陆用户身份又发现bug了。。不过不是边栏回复,是我自己的ajax文章评论回复。。 :sad:

    • 流年 --#2

      @liuqiqi
      我也来测试一下

  4. 吓我一跳 -#4

    ajax效果确实很让人着迷

  5. zwwooooo -#5

    实在是太厉害鸟,膜拜……

    • QiQiBoY --#1

      @zwwooooo
      呵呵。。闲暇时瞎折腾的。。。

    • zwwooooo --#2

      @QiQiBoY
      忘了说感谢!

      有个功能需要您的帮助:
      1.后台回复自动加@xxx
      2.后台回复能兼顾无限嵌套
      如果有时间的话麻烦QiQiBoy折腾一下,实现方法随意,js/jQ都可以

      最近一篇文章一篇文章去回复太痛苦鸟 :cry: :twisted: ……而且WP有传说中评论链接获取错误 :mad: (刚好是分页楼层) :arrow: :arrow: :arrow:

    • zwwooooo --#3

      @zwwooooo
      有个功能需要您的帮助:
      1.后台回复自动加@xxx
      2.后台回复能兼顾无限嵌套
      如果有时间的话麻烦QiQiBoy折腾一下,实现方法随意,js/jQ都可以

      最近一篇文章一篇文章去回复太痛苦鸟 :cry: :twisted: ……而且WP有传说中评论链接获取错误 :mad: (刚好是分页楼层)
      :arrow: :arrow: :arrow:

    • QiQiBoY --#4

      @zwwooooo
      后台回复自动加@貌似阿邙有发过。。。
      后台的无限嵌套和前端应该是差不多的,改下默认的调用函数就行了。。。
      wp后台我几乎不用,明天我抽空帮你看一下吧。。
      我现在可以翻着边栏最新评论就将所有的评论回复了。。呵呵 :smile:

    • zwwooooo --#5

      @QiQiBoY
      你的边栏回复评论的确很赞,但你没放出方法……或许后台的简单实现

    • liuqiqi --#6

      @zwwooooo
      这个功能是今天刚做好的。。还在测试有无bug中。。。而且这个功能的前提是你要做好ajax版的最新评论。。
      当然,如果是用mg12的wp-rc插件的博客的话,我也许会发布一个插件扩展。。基于mg12的插件提供这个功能。。。

    • zwwooooo --#7

      @liuqiqi
      囧~我说怎么邮件一大把……

    • QiQiBoY --#8

      @zwwooooo
      额。。囧。。没仔细看。。原来你是第四级评论。。呵呵。。确实,会向你发送一大堆我测试评论的邮件。。不好意思哈。。
      刚发现一个小问题。。本地调试环境关了,不想再开,就在自己博客测试了下。。。。 :sad:

    • winy --#9

      @liuqiqi 这个侧栏回复我也去弄弄,看看PHP相应部分怎么处理的, js我可以copy :grin:

    • QiQiBoY --#10

      @zwwooooo
      额。。后台翻了半天,我找不到相关功能代码在哪里。。。wp-admin里东西太多。。

    • zwwooooo --#11

      @QiQiBoY
      我在想,能否做个类似的插件,我看很多针对wp后台的插件

  6. 阿邙 -#6

    我也来测试 ~ :!:

    • QiQiBoY --#1

      @阿邙
      额。。你这条评论不是从侧边栏发过来的。。

    • 阿邙 --#2

      @阿邙
      刚找到在哪发

    • liuqiqi --#3

      @阿邙
      嗯。。这条come from sidebar widget

    • 阿邙 --#4

      @liuqiqi
      我以为会是在下面评论以后 不用刷新页面 sidebar立马会出现你的评论呢

    • QiQiBoY --#5

      @阿邙
      这个超容易。。我的侧边栏评论和文章下方的评论都是ajax异步加载过来的,这两方都可以互相刷新。。
      比如在侧边栏发表评论成功后我就刷新一下文章下方评论列表。。。
      在文章下方评论后我就刷新一下边栏评论就行了。。
      目前这个还没加上,明天弄上。。

    • 阿邙 --#6

      @QiQiBoY
      这正是我所说的效果 呵呵 先期待一下下ha ~

    • QiQiBoY --#7

      @阿邙
      额。。不用等到明天了。。你来测试吧。。。文章下方发表评论,不刷新页面出现在侧边栏。。

    • 阿邙 --#8

      @QiQiBoY
      效率真高哇~ :shock:

    • 阿邙 --#9

      @QiQiBoY
      竟然没有~ 我强制刷新下~~ :mad:

    • 阿邙 --#10

      @阿邙
      这下看到了 呵呵

    • zwwooooo --#11

      @阿邙
      试下侧边栏回复!

    • QiQiBoY --#12

      @阿邙
      额。。不会吧。。要等1.5s的。。我设置1.5秒后刷新边栏列表

    • 阿邙 --#13

      @QiQiBoY
      可能第一次是缓存的缘故 我强制刷新之后就好了~

    • liuqiqi --#14

      @阿邙
      …呵呵。。
      其实在边栏回复,然后刷新文章列表评论功能也加上了。。但是必须要回复的评论是在当前页面下的。。。那样才会刷新后出现。。如果是在其他页面。。刷新也不会出现。。所以就不会刷新了。。

    • winy --#15

      @liuqiqi
      我觉得侧栏应该加上滑动了,因为刷新了也看不见 :idea:

    • QiQiBoY --#16

      @winy
      我觉得不好,因为边栏毕竟不是关注重点,一个访客发表完评论后他可能还会继续浏览其他内容,而此时如果我强制页面滑动到某一点,就会干扰正常浏览了。。。。
      嗯。。一个人评论过后再让他到边栏里看自己刚发表的评论。。这个算什么情况。。。 :grin:

    • winy --#17

      @QiQiBoY
      因为可以滑动的还有广告 :oops:

    • QiQiBoY --#18

      @winy :!:
      额。。我不喜欢页面有东西老跟着飘来飘去。。影响我注意力。。

    • MOPVHS --#19

      @阿邙
      体验下下~~~

  7. surda -#7

    :idea: 我滴的神咧。

  8. mice -#8

    哇 我上图片了… :twisted:

  9. mice -#9

    我觉得 当发完评论下面那个倒计时到0以后 不是显示submit comment了么..
    上面那个 submit succussed! Thank you. 也可以顺便一起消失好了..

    • QiQiBoY --#1

      @mice
      对啊。。我想这么做的。。但是因为没用jQuery,所以消失的动画过渡效果还没有。。如果直接消失会显得太生硬,所以还不如不管它了。等写好了动画脚本就会加上的。。

    • mice --#2

      @QiQiBoY
      再报告一bug..不知道算不算bug…
      嵌套评论完后,文本框不会自动清空..不知道是不是又是我浏览器的问题..

    • QiQiBoY --#3

      @mice
      额。。。如果是正常发表评论了,那么在成功后评论框会自动回到底部,并清空内容。。如果没有点击发表,而是点击取消回复,那么是不会清空里面内容的。。
      你是哪种情况?

    • mice --#4

      @QiQiBoY
      我属于正常发表评论的..

    • mice --#5

      @QiQiBoY
      直接点那个按钮就没事 如果用ctrl+enter 就会出bug

    • mice --#6

      @QiQiBoY
      求你QQ联系方式 有问题咨询..

    • QiQiBoY --#7

      @mice
      联系方式在contact页面

    • liuqiqi --#8

      @QiQiBoY
      IE下测试

    • QiQiBoY --#9

      @mice
      额。。IE下确实。。。囧。。火狐下正常。。

  10. mice -#10

    顺便报告一BUG

    IE8 用户..页面往下面拉的时候就会显示那个..但把鼠标移上去就不见了.

    • QiQiBoY --#1

      @mice
      这个情况我知道,是css的问题。。但是不知道怎么解决。。所以就一直放着了。。
      其实这个问题出现在IE7下。。。你用的是IE8的兼容模式,是按照IE7的标准渲染的。。你点击IE工具栏上的页面选项,去掉勾选 兼容性视图 ,就会以IE8渲染了,就没这个问题了。。

    • mice --#2

      @QiQiBoY
      我用的第三方的浏览器 =.=
      所以….唉..不过你让我知道了这个浏览器是用的兼容模式..我说怎么跟别人IE8那么多效果不同呢..

    • QiQiBoY --#3

      @mice
      额。。第三方如遨游、QQ、搜狗、世界之窗、360等辈都是默认使用兼容模式,貌似其中世界之窗还是哪个是可以更改的。。其他的大都不可以了。。

    • 小邪 --#4

      @QiQiBoY
      IE内核浏览器去屎 ~ :twisted:

  11. mice -#11

    @QiQiBoY
    测试不用快捷键

  12. 海天 -#12

    哇 越来越强大了啊
    好多特效功能啊

  13. 万戈 -#13

    你用的ajax还真不少呀。。。

  14. winy -#14

    a评论延时载入,这个应该有。。。越来越期待了

  15. 透视眼镜 -#15

    精辟!一语中的 。。

  16. heson -#16

    这个太给力了·····

  17. bdt -#17

    你的网站很不错啊,你是用什么程序做出来的。我最近也在做网站,我的网站是关于innovation的。地址http://myinnovation.info/小弟水平不高,惭愧啊。不

    知道可不可以和你交换链接。我们多多交流好吗。有一个问题请教,我不懂怎么做锚文字链接,是这样的吗,innovation 我的QQ是7545989。

  18. zdy -#18

    太棒了

  19. 漏网小鱼 -#19

    这个东西不错。收了

  1. 【原理指导篇】无时不在的评论 侧边栏即时回复功能

    [...] 在上一篇《Ajax版即时侧边栏评论回复功能》中我简单介绍了我最新给博客加入的一个… [...]

  2. 插件发布:边栏最新评论及ajax回复插件——WP RC Reply AJAX

    [...] 之前在《Ajax版即时侧边栏评论回复功能》一文中我已经提到了我的侧边栏回复,我将其稍作改造,做成了今天的这个插件,名字叫WP RC Reply AJAX,全称是wordpress recent comments reply ajax。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: