Just A Blog

发现我的博客评论栏多了点东西了吗？这是我这两天做的一个jQuery特效，就是通过点击评论高亮区域显示收起和展开评论内容的效果。这对评论数量大的博客比较有用，在我这里作用不是很大，但是忍不住加上了。

制作的方法很简单，不需要对主题文件做很大的修改，只需加上几句代码就可以了。需要实现更多的功能查看一下jQuery Demo，也可以把jQuery Demo文件下载，自己研究一下。

1、header文件的修改：

A、加入jQuery.js文件

<script src=”http://www.google.com/jsapi”></script>
<script>
// Load jQuery
google.load(”jquery”, “1″);
</script>

B、定义所需要的效果代码：

<script type=”text/javascript” charset=”utf-8″>
$(”.commentmetadata”).click(function(){
$(this).next(”.message_body”).slideToggle(”fast”)
$(this).toggleClass(”active”);
$(this).siblings(”.commentmetadata”).removeClass(”active”);
});

$(”.collpase_all_message”).click(function(){
$(”.message_body”).slideUp(”fast”)
return false;
});

$(”.show_all_message”).click(function(){
$(”.message_body”).slideDown(”fast”)
return false;
});
});
</script>

2、comment.php文件的修改：

A、把评论者信息包住：<div class=”commentmetadata”>评论者信息</div>；

B、把评论内容包住：<div class=”message_body”>评论内容</div>；

C、在显示评论<ol class=”commentlist”>的前面加入：

<p class=”collapse_buttons”>( <a href=”#comments” class=”show_all_message”>显示所有评论</a> | <a href=”#comments” class=”collpase_all_message”>收起所有平论</a> )<a href=”#respond”>马上发表评论>></a></p>

在根据博客的主题样式修改这些新加入的class就OK了。由于加载的jQuery文件来源是在Google，不喜欢这样的可以修改成本地加载。如果特效无法显示可以参考一下jQuery Demo的源代码。想了解更都jQuery方面的文章可以参考sofish一下“写给设计人的10个jQuery特效”，上面所有的东西都是从这个文章里面学习过来的。

目前在我这里效果是做出来了，接着要做的就是对JS文件的压缩，网上也有很多这方面的例子，但是目前我还没有对JS文件压缩成功～可能是自己太笨了。希望有这方面经验的博友可以指点一下，在JS文件压缩或者JS文件重写方面指导一下～～

文章链接: http://www.caxblog.com/2008/07/241.html