跨页悬浮显示 @ 评论 (原理篇)

Oct 7th, 2009 Translate Leave a comment Go to comments
comment tip

以前我写过写过一个教程, 讲解如何在 iNove 主题中悬浮显示 @ 评论. 其实在开始制作的时候就知道存在一个缺陷. 如果使用评论分页, 只可以悬浮显示当页的评论作为提示信息, 而不能跨页操作.

我一直没去弄, 一是怕增加服务器负担, 二是因为懒. 最近看到 yinheli 把这实现了, 本想把它抄过来用用, 无奈 JS 代码压缩过看不了, 最后还是自己弄了一下. 操作原理未必相同, 但效果应该是差不多的.

为什么不能跨页显示?

因为其工作原理是, 当鼠标移动到 @{username} 时在本页找到对应的评论, 并插入到评论列表中, 以绝对位置的方式显示出来. 如果评论不在本页, 找不到对象, 当然就没有后面的处理了.

如何跨页获取评论信息?

如果本页找不到对应的评论, 可以通过评论的 ID, 用 AJAX 将后台查询到的评论信息返回页面. 当鼠标移动到 @ 评论上时, 向用户悬浮显示 'Loading...' 提示框, 如果操作成功将找到的评论插入评论列表的最后面, 并将该评论的内容置换到 'Loading...' 框.

也就是说, 被加载过的评论会一直保留在本页中, 当鼠标再次移动到 @ 评论上不用重新加载.

后记

请到 http://www.neoease.com/themes/#comment-19001 这个评论中查看实现的效果. @Adam 上方都是跨页的评论, 下方是本页的.

因为工具受限, 现在画不了流程图, 我会在下一节中把处理逻辑整理一下.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 跨页悬浮显示 @ 评论 (原理篇)
  1. qiqiboy | #1
    Oct 7th, 2009 at 05:12

    啊，不会第一个吧，半夜瞎逛到此。。。 :lol:

    Reply | Quote
  2. 万戈 | #2
    Oct 7th, 2009 at 07:10

    太帅了这个，必须试试，有望放弃嵌套评论

    Reply | Quote
  3. 万戈 | #3
    Oct 7th, 2009 at 07:12

    @万戈
    自己先试一个，关注本文，期待实现篇

    Reply | Quote
  4. hslx111 | #4
    Oct 7th, 2009 at 07:50

    好帅,等待处理篇~

    Reply | Quote
  5. 麦子 | #5
    Oct 7th, 2009 at 07:55

    这个必须支持……如果在本页找到了，就不通过评论的 ID 查询？这个不错

    Reply | Quote
  6. 小为 | #6
    Oct 7th, 2009 at 09:19

    效果很棒，但是浮动出现之后，鼠标移动到浮动的窗口上去，浮动窗口就消失了。。。 :razz:

    Reply | Quote
  7. Louis Han | #7
    Oct 7th, 2009 at 10:16

    5点多起来抢沙发，⊙﹏⊙b汗

    Reply | Quote
  8. willerce | #8
    Oct 7th, 2009 at 10:36

    哎，博客没那么多评论。一页都用不完。

    Reply | Quote
  9. Mars | #9
    Oct 7th, 2009 at 11:09

    能够实现跨页显示当然更好，期待你的详解。。

    Reply | Quote
  10. bolo | #10
    Oct 7th, 2009 at 12:05

    真不错啊,终于做出来了

    Reply | Quote
  11. grubylee | #11
    Oct 7th, 2009 at 13:10

    不错，终于我也前排就座了..

    Reply | Quote
  12. bolo | #12
    Oct 7th, 2009 at 13:25

    @小为
    你可以通过修改脚本使它不消失的

    Reply | Quote
  13. bolo | #13
    Oct 7th, 2009 at 13:26

    现在觉得iTweet的in reply to形式更加过瘾

    Reply | Quote
  14. whisperer | #14
    Oct 7th, 2009 at 14:33

    这个跨页功能 内流满面啊。。。。。。。。

    Reply | Quote
  15. A.shun | #15
    Oct 7th, 2009 at 15:27

    没看过以前那篇，原来还可以这样- -

    Reply | Quote
  16. R | #16
    Oct 7th, 2009 at 15:47

    期待共享分羹，嘿嘿

    Reply | Quote
  17. underone | #17
    Oct 7th, 2009 at 17:27

    得先回去学习那篇:l

    Reply | Quote
  18. mg12 | #18
    Oct 8th, 2009 at 01:32

    @qiqiboy
    恭喜! 哈哈~

    @万戈
    会有实现篇的, 不过这几天可能不行, 等我忙完就写.

    @麦子
    是通过 ID.

    @小为
    要的就是这样的效果吧. 呵呵~

    @bolo
    怎样 in reply to?

    @underone :)

    Reply | Quote
  19. bolo | #19
    Oct 8th, 2009 at 01:51

    @mg12
    你到http://itweet.net/web/看看就知道了,点击"in reply to"链接能逐级显示所回复的评论

    Reply | Quote
  20. wli93 | #20
    Oct 8th, 2009 at 03:32

    題外話, 我想問mg12大大, 帖子裡的翻譯是甚麼Plugins? 那裡可以找到?

    Reply | Quote
  21. Mars | #21
    Oct 8th, 2009 at 13:14

    @Mars
    测试一下！
    主题真是越来越细致了啊。

    Reply | Quote
  22. yinheli | #22
    Oct 8th, 2009 at 16:52

    我早就已经实现了. 使用 ajax 调用的.也不是很难. :lol:

    Reply | Quote
  23. Dreamix | #23
    Oct 8th, 2009 at 17:49

    评论始终都没分页，555～

    Reply | Quote
  24. chisdy | #24
    Oct 8th, 2009 at 21:52

    如果是嵌套回复呢，同一级跟子级怎么弄啊？

    Reply | Quote
  25. litao | #25
    Oct 8th, 2009 at 22:33

    完善后我也装个WP

    Reply | Quote
  26. Alex | #26
    Oct 9th, 2009 at 09:09

    想快点知道你的实现代码，O(∩_∩)O哈哈~

    Reply | Quote
  27. BSyin | #27
    Oct 9th, 2009 at 12:51

    @yinheli
    你来这里显摆什么，多向mg12学学奉献精神，不要总把不是很难的技术藏在窝里。

    Reply | Quote
  28. cosbeta | #28
    Oct 9th, 2009 at 17:32

    捧场，鲜花送上，祝mg12 早点找个大美女！

    Reply | Quote
  29. vayu | #29
    Oct 9th, 2009 at 19:07

    好~支持！ ;-)

    Reply | Quote
  30. whisperer | #30
    Oct 10th, 2009 at 00:01

    opera的问题没有好的办法么？

    Reply | Quote
  31. 菠萝 | #31
    Oct 10th, 2009 at 20:32

    MG12很强!支持!
    你的Theme用户好多哦!

    Reply | Quote
  32. chancat | #32
    Oct 11th, 2009 at 22:22

    @万戈
    呼呼 万兄弟 好久没联系了 ~

    Reply | Quote
  33. 万戈 | #33
    Oct 11th, 2009 at 23:05

    @chancat
    呵呵，是呀，我以为是谁回复我呢，原来是禅猫老兄，居然在这里碰到，有幸啊

    Reply | Quote
  34. JAY | #34
    Oct 12th, 2009 at 10:09

    I like this Paled. It is more prettier than iNove I think :lol:

    Reply | Quote
  35. JAY | #35
    Oct 12th, 2009 at 10:12

    And I suggest you could add a "Cancel Edit" link (or button) when readers edit their comments.

    Reply | Quote
  36. pinkmemory | #36
    Oct 12th, 2009 at 15:59

    这个很漂亮。

    Reply | Quote
  37. John | #37
    Oct 12th, 2009 at 16:48

    是很漂亮。期待中...

    Reply | Quote
  38. Jacse | #38
    Oct 14th, 2009 at 12:32

    效果很棒啊，这个以前推出过插件没。
    期待更棒的……

    Reply | Quote
  39. 尚品元素 | #39
    Oct 14th, 2009 at 18:08

    关于评论回复插件我的博客好像不支持！

    Reply | Quote
  40. lyy | #40
    Oct 14th, 2009 at 21:18

    学习一下，很专业。

    Reply | Quote
  41. cingpin | #41
    Oct 15th, 2009 at 08:44

    拜读了，楼主是不是又对主题进行了修改，应该不是我浏览器的问题吧

    Reply | Quote
  42. chancat | #42
    Oct 15th, 2009 at 13:14

    @万戈
    这些日子 工作忙，我也只看不说话 :-) , 不知道 这MG12的 新皮 什么时候发布 :smile:

    Reply | Quote
  43. Mr.坏 | #43
    Oct 16th, 2009 at 08:40

    快理论联系实际吧mg12老大 :roll:

    Reply | Quote
  44. Wen | #44
    Oct 16th, 2009 at 14:01

    有人用Godaddy的主机吗？

    Reply | Quote
  45. mg12 | #45
    Oct 18th, 2009 at 09:50

    @bolo
    这两种形式不太一样哦, 我这里只是起到一个提示的作用.

    @wli93
    請參照下文:
    http://www.neoease.com/wordpress-plugins-i-using/

    @Mars
    过奖

    @yinheli
    呵呵, 你的 JS 怎么压缩了? 要不我直接就拿来用算.

    @Dreamix
    会有的. 加油...

    @chisdy
    嵌套回复就不需要这个了吧.

    @Alex
    这个可能得等些时间, 最近工作生活比较紧凑. (囧, 很土的解释)

    @BSyin
    我确实是看到 yinheli 的效果才觉得加上这效果的.

    @whisperer
    Opera 暂时屏蔽这个效果.

    @JAY
    这个是插件实现的, 所以... 我会向作者建议一下.

    @cingpin
    是修改过了

    @chancat
    不确定发布与否.

    @Mr.坏
    我整理一下思路, 有时间我肯定会写的.

    Reply | Quote
  46. 电子书赚钱博客（安玉良老师） | #46
    Oct 19th, 2009 at 08:37

    这个有一定的技术性，
    一般新人要好好了解下！

    Reply | Quote
  47. bint | #47
    Feb 11th, 2010 at 17:41

    @qiqiboy
    看看效果如何

    Reply | Quote
  48. 傻逼博客 | #48
    Feb 17th, 2010 at 18:04

    @bint
    看看效果`

    Reply | Quote
  49. pangel | #49
    Mar 14th, 2010 at 19:51

    lyy :学习一下，很专业。

    @bint 看效果

    Reply | Quote
  1. Wordpress评论嵌套下课 -悬浮显示评论菜鸟教程 | WP插件 | 菠萝筐
    Oct 19th, 2009 at 23:04
  2. 跨页悬浮显示 @ 评论 (代码篇)
    Nov 1st, 2009 at 14:50
  3. WP:跨页悬浮显示 @ 评论 (抄袭篇) | 砼砼's blog
    Dec 27th, 2009 at 01:55

Twitter Email feed
RSS feed