@悬浮显示评论内容功能详解

评论(13)

悬浮显示评论内容,即当鼠标悬停到 @XXX 时,将 XXX 的评论内容以浮动层显示,其实这一功能实现起来并不难,其主要实现依靠 JavaScript 脚本,因很多折腾 WP 的朋友大都起手只学习了HTML 和 CSS 基础知识,所以有一些比较复杂的 JS 实现的功能把这些人挡在来门外。所以至此尽管 WP 教程、文档甚多,但各个博客的 AJAX 功能却不甚完善。

ps:本来就像写一篇关于@悬浮显示评论内容的文章的,今天突然有朋友问,所以就把这篇文章提前写一下,文章准备的不够充分,会在日后补充。

悬浮显示评论内容原理

  1. 当鼠标悬浮到 @XXX 这样的a标签(超链接标签)时,
  2. 利用 JS 脚本获得标签节点 href 属性值,
  3. 获取href属性指向的评论锚文本,
  4. 将锚文本内容组建装成我们需要的结构,
  5. 并根据鼠标位置以浮动层悬浮显示出来。

整个流程下来是不是很简单?
好吧,受限于个人文字表达能力,讲的感觉不是很透彻,如果不懂的话还请自行参透吧。
希望不会误导众生。
这里需要注意的是,如果本页没有指定的节点,那js会从后台调用对应ID的评论内容,如果你需要评论分页,那这部分代码必须注意添加。

悬浮显示评论内容代码:JavaScript

这里的代码源自我的上一个主题 PangBug V0.1,因为看了很多博客悬浮显示评论内容的功能实现,
个人感觉均不如 MG12 的 JS 代码实现起来结构清晰、便于复用,
所以上一个主题也就抄袭了当时的 Paled 主题的部分 JS 代码
PS: MG12 最近将他的主题js脚本又做了封装,以下代码为之前的版本。

//@悬浮显示评论开始  mg12 写的 当插件用
if (!jQuery.browser.opera) {//初始变量设置
var id = /^#comment-/;
var at = /^@/;
var commentList = jQuery('ol.commentlist');
var commenttip = jQuery('.comment-tip');
commentList.find('li p a').each(function() {
//为每个@XXX 添加‘at-reply’class,便于后续操作
var linkNode = jQuery(this);
var linkUrl = linkNode.attr('href');
if (linkUrl && linkUrl.match(id) && linkNode.text().match(at)) {
	linkNode.addClass('at-reply')
	}
});
jQuery('.at-reply').hover(function() {//鼠标悬停替换事件的定义(移入)
var target = this;
var commentId = jQuery(this).attr('href');
var comment = jQuery(commentId);
var avatar = comment.find('img.avatar');
avatar.attr('src', avatar.attr('longdesc'));
if (comment.is('.comment')) {//有相关节点的操作
jQuery('<div class="comment-tip"></div>').hide().html('<div class="arrow"></div><div class="innerbox">' + comment.html() + '</div>').appendTo('body');
jQuery('.comment-tip').css({
	left: jQuery(this).position().left + jQuery(this).width() + 10,
	top: jQuery(this).position().top - 22
}).show({
	opacity: '1'
	})
} else {//无相关节点的操作
	var id = commentId.slice(9);
	jQuery.ajax({//ajax 后台获取评论
		type: 'GET',
url: '?action=load_comment&id=' + id,
cache: false,
dataType: 'html',
contentType: 'charset=UTF-8',
beforeSend: function() {
	jQuery('<div class="comment-tip"></div>').hide().html('<div class="arrow"></div><div class="innerbox"><p class="ajax-loader">Loading...</p></div>').appendTo('body');
	jQuery('.comment-tip').css({
		left: jQuery(target).position().left + jQuery(target).width() + 10,
		top: jQuery(target).position().top - 22
	}).show({
		opacity: '1'
	})
},
success: function(data) {
	var addedComment = jQuery(data + '</li>');
	var avatar = addedComment.find('img.avatar');
	avatar.attr('src', avatar.attr('longdesc'));
	addedComment.hide().appendTo(commentList);
	jQuery('.comment-tip .innerbox').html(addedComment.html())
},
error: function() {
	jQuery('.comment-tip .innerbox').html('<p class="msg-warn">Oops, failed to load data.</p>')
			}
		})
	}
},
function() {//鼠标悬停替换事件的定义(移出)
	jQuery('.comment-tip').fadeOut(200,
		function() {
			jQuery(this).remove()
		})
	})
}//@悬浮显示评论结束

构建 @XXX 超链接文本

实现这个功能,你需要一个回复按钮,当点击这个回复按钮的时候,
js 脚本会自动在评论框中构建一个 超链接标签
例:

<a href="#comment-873">@XiangZi </a>

相应 JavaScript 代码如下:

function reply(authorId, commentId, commentBox) {
var author = document.getElementById(authorId).innerHTML;
var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n|\r\n/g, "") + ' </a> \n';
appendReply(insertStr, commentBox)
}
$('.comment-act>a').click(function(){
var comment_act = $(this).html();
var commentId = $(this).parents('.comment-author').find('div.comment-time a').attr('href').slice(9); 
reply('reviewer-' + commentId, 'comment-' + commentId, 'comment-text');
}
else quote('reviewer-' + commentId, 'comment-' + commentId, 'commentbody-' + commentId, 'comment-text');
});

总结

代码就不再逐步剖析了,我想有点 JS 基础的朋友都能看懂,
如果你看不懂,那给你剖析了,你还是不会用。
代码中只将个人觉得关键部分做了一点注释。
当然,如果你需要评论分页的话,你还需要在你主题的php部分添加响应代码以获取不在本页的评论内容,
因本文主要讲解 javascript 部分,所以php部分留待日后补充吧。
PHP响应文章地址:@悬浮跨页显示评论内容PHP响应代码
当然,还有css部分,也是以后添加。
因为本人是在才疏学浅,一直没有想出怎样封装能最大化适应其他主题的方法,
所以,整个功能代码想要移植到你自己的主题的话,还要做适应性的修改。
好吧,本文至此,希望各位折腾的朋友能够顺利、早日折腾出这个功能。





  1. Pingback: wp_list_comments|函数-WordPress

  2. @ymmcute
    那就领会下精神吧 哈哈 你且跪安

  3. @浩子
    就@悬浮评论而言,你的代码实现起来更简洁一点。

  4. @XiangZi
    精神上的支持吧!

  5. @XiangZi
    我没用你这个,看了半天还是没看个所以然,还是用我原来的

    jQuery(document).ready(
    function(){
    var id=/^#comment-/;
    var at=/^@/;
    jQuery('.commentlist li p a').each(
    function() {
    if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {
    jQuery(this).addClass('atreply');
    }
    }
    );
    jQuery('.atreply').hover(
    function() {
    jQuery(jQuery(this).attr('href')).clone().hide().insertAfter(jQuery(this).parents('li')).attr('id','').addClass('tip').fadeIn(200);
    },
    function() {
    jQuery('.tip').fadeOut(400, function(){jQuery(this).remove();});
    }
    );
    jQuery('.atreply').mousemove(
    function(e) {
    jQuery('.tip').css({left:(e.clientX+18),top:(e.pageY+18)})
    }
    );
    }
    )

    然后再加点CSS就OK了,呵呵,还是要谢谢你哦,答疑解惑,o(∩_∩)o 哈哈

  6. @牧风
    好吧,马上加上。
    其实php代码很简单。

  7. @ymmcute
    ….. 你看着干啥?
    这个你是看不懂的。

  8. 看的有点累 支持一下

  9. @浩子
    先折腾吧,虽然代码不一样,但效果和我现在用的一样。
    你可以参考一下~

  10. @XiangZi
    表示php才是重点

  11. @牧风
    牧总速度总是很快。

  12. ajax我喜欢

  13. 这个必须坐沙发,再折腾!