iNove 中鼠标悬浮显示 @ 评论

本文介绍的是如何在 iNove 主题中添加鼠标悬浮显示 @ 评论的功能. 或许我说得不准确, 但我真不知道该怎么描述. 比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的:

@A
How much money do you have?

就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中.

实现步骤

其实这是 yinheli 实现的一个功能, 我看效果很好就借鉴过来了. 具体技术和原理可以看看 yinheli 的 (上), (下) 两篇教程. 下面我只会教你怎么在 iNove 中实现.

1. 下载 commenttips.js 文件. 该文件修改自 yinheli 的代码, 我去除了一些无关代码, 简化了效果, 和修复了几个 bug. 下载请点

2. 将 commenttips.js 文件放置到 inove/js 目录.

3. style.css 中追加样式代码如下:

#thecomments .tip {
	background:#FFF;
	border:1px solid #CCC;
	width:605px;
	padding:10px !important;
	padding:10px 10px 0;
	margin-top:0;
	position:absolute;
	z-index:3;
}
#thecomments .tip .act {
	display:none;
}
*+html #thecomments .tip {
	padding:10px 10px 0 !important;
}

4. 在主题中添加代码调用 JavaScript. 打开 templates/end.php, 在 </body> 前面一行添加以下代码:
(如果你有其他插件或者自己已经添加了 jQuery 的库, 那第一行代码可以不必添加.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/commenttips.js"></script>

5. 好了, 刷新一下有 @ 回复的页面, 等页面加载完, 将鼠标悬停在 @ 回复上, 你会看到效果的.

第一次接触 jQuery, 写得还凑合吧, 觉得写得好的给点掌声, 觉得写得不好的赏两个臭鸡蛋...

跨页显示评论

在 WordPress 上实现跨页显示评论的原理, 技巧, 代码请参考《跨页悬浮显示 @ 评论》