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

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

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

为什么不能跨页显示?

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

如何跨页获取评论信息?

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

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

后记

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

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