用 jQuery 实现点击回复之后显示@用户名的效果

Posted by zwwooooo on 2010年01月20日 Leave a comment Go to comments

今早 koobai 的评论提出“什么时候写一篇点击回复之后会显示@用户名的效果日志”，刚好这两天我正在为“文囧”而“囧”，所以就把这个效果的实现方法写出来，因为我是伟大的 CP 党，所以老鸟请飘菜鸟请参考。

经常来我这的朋友都会发现我的评论回复用的是“@用户”来回复评论的，具体说明我在《启用新 WordPress 主题: zSofa ( Alpha 版本)》这篇文章里面说过，这里就不累说了。

下面只讲“用 jQuery 实现点击回复之后显示@用户名的效果”的方法步骤，同样因为我是 CP 党，所以我尽量做到贴出的代码直接 CP 就能用。

下面是详细步骤：

1. 确定自己的主题评论结构基本是 WordPress 默认的结构（也就是说主题的评论结构比较标准），而且用的是 WordPress 2.7 以上版本的 wp_list_comments 函数，具体可以参考 http://codex.wordpress.org/Template_Tags/wp_list_comments

2. 确定自己已经加载 jQuery 库，如果没有加载，在主题文件 header.php 里面找到下面这个

<?php wp_head(); ?>

在它前面加入以下代码：（注：jquery 1.3.2 一样效果）

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

3. 把下面的 jQuery 代码保存为 reply. js 文件，并存到主题所在目录（也可以加在主题本身已有的 js 文件里面）

/* @reply js by zwwooooo */
jQuery(document).ready(function($){	//Begin jQuery
	$('.reply').click(function() {
	var atid = '"#' + $(this).parent().attr("id") + '"';
	var atname = $(this).prevAll().find('cite:first').text();
	$("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus();
});
	$('.cancel-comment-reply a').click(function() {	//点击取消回复评论清空评论框的内容
	$("#comment").attr("value",'');
});
})	//End jQuery

4. OK 啦，可以试试了。加些说明：如果你的主题评论结构符合上面第 1 点所说，原则上支持 WordPress 2.7 版本以上的自带评论嵌套

需要了解原理的可以借助 Firebug 和 jQuery 中文手册自个折腾研究。

» » » » 需转载请注明：转载自 ZWWoOoOo's Blog [ http://zww.me ]
» » » » 本文链接地址：http://zww.me/archives/24817

» 收藏本文：Delicious / Digg / QQ书签 / 百度收藏 / Google收藏 / 收藏到鲜果
» 订阅本博：FeedBurner 订阅 || FeedSky 订阅 : Google Reader / 有道 / QQ邮箱 / 鲜果 / 豆瓣 / 抓虾

相关文章 Related posts
让滔滔有点用：用来做博客公告栏 (26)
自己安装第一个 wordpress （图文） (15)
给不同类型的网盘链接和外链加了个性图标 (33)
瞎折腾出的 wordpress 搬家方法 (25)
用代码武装你的wordpress [part 2] (40)