本站JQuery隐藏留言的代码修正

在之前《在WordPress中利用Jquery隐藏较旧留言》这篇文章中说了下如何用JQuery这个东西把过旧留言收藏起来,其实效果还是可以,只是单条留言的展开-收起动作的执行区域设置不太恰当,出现留言作者的链接不能直接左键打开(via: johnzon, xiaorsz)。

今天把这部分的问题进行了小小修改,增加“+”和“-”两个小图标作为展开-收起留言的执行按钮。

hide comment 本站JQuery隐藏留言的代码修正

在这里简单说下更改的内容(请对照上文中的代码):

更改js代码,把原来的点击区域:

$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});

改为:

$(".collapse").click(function(){
$(this).parents(".message_head").next(".message_body")
.slideToggle(500);
$(this).toggleClass("expand");
});

然后需要在comment.php中的message_head区块内增加“+”和“-”两个小图代码:

<span class="collapse"></span>

再在style.css中增加样式(下面样式为本站所需,请根据自行要求更改):

.message_head .collapse {
background: transparent url(images/comments-collapse.png) no-repeat scroll 0 0;
cursor: pointer;
display: block;
float: right;
height: 9px;
line-height: 20%;
margin: 4px 2px 0 0;
text-indent: -900em;
width: 9px;
}
.message_head .expand {
background: transparent url(images/comments-expand.png) no-repeat scroll 0 0;
}

更改后的效果请看本站就行了。另外本站的主题Js O3的下载文件也已更新,你也可以下载这个主题,直接看里面的代码就行了。

分类:WordPress;标签:, ;收藏本文的永久链接

10 Responses to “本站JQuery隐藏留言的代码修正”

  1. 胡戈戈 回复此留言 2008/12/06 14:32 #comment-3484

    沙发

  2. Yacca 回复此留言 2008/12/06 14:49 #comment-3485

    厄...这个貌似对我那留言本很有用...
    等我换了主题后慢慢在细节上做改进 哈哈

  3. xiaorsz 回复此留言 2008/12/07 02:37 #comment-3487

    不错不错,越来越完善了哈!!
    只是博主可以把我链接改下不?
    我现在换成 http://www.xiaorsz.com 了,哈哈!

  4. jackymao 回复此留言 2008/12/07 02:49 #comment-3488

    呵呵,Jinwen真是花了不少心血啊!非常佩服!

    ----------------
    对今天的修改做一点解释,让看这篇博客的人更明白一点:
    在本次修改中,变动的文件有:
    Js_o3/comments.php
    Js_o3/style.css
    Js_o3/js/all.js
    增加了图片文件:
    Js_o3/images/comments-expand.png
    Js_o3/images/comments-collapse.png

    (提一个建议,图标图片是否可以很多个图片放置在一个图片里面,在css中按位置调用?当然这会麻烦很多,但是可以减少页面的http request数量,加快页面显示)

    ---------------------
    这次修改之后,留言的访客的头像会变小,在头像上面增加了加减图标。点击加减图标可以收起或展开单条留言。

    我个人认为留言区底下的collaps all 和show all comments,show last 5 comments已经做得相当不错了。这次的增加单条留言动作,说明了Jinwen的精益求精的态度,实在非常佩服!

  5. johnzon 回复此留言 2008/12/07 04:50 #comment-3490

    呵呵,我去试试

  6. Insion 回复此留言 2008/12/07 18:02 #comment-3501

    嗯嗯,支持,等有时间就更新~

  7. stephen 回复此留言 2008/12/08 05:24 #comment-3509

    谢谢你的代码!!我可以改进一下我的评论栏。之前一直都遗留一个问题,单个图标的收起无法同步!!

  8. Jinwen 回复此留言 2008/12/08 07:56 #comment-3514

    @stephen: 是啊,图标同步,这个一开始我还不想弄,后来糊弄了一下,居然行了,至少结果是ok了,哪怕我的js基本为nul,呵。

  9. Dustin 回复此留言 2008/12/12 04:17 #comment-3587

    你好
    想请教我有使用Js_o3的皮
    可是留言时会卡住(停在整个网页是空白页)
    留言都无法写入
    是否是语系支持的问题
    我们的网站是UTF-8..正体中文语系
    谢谢!

  10. Jinwen 回复此留言 2008/12/12 12:47 #comment-3594

    @Dustin: 不是的,这个和语言没有关系,只是我一时大意,你可以到下载页面重新下载新的压缩包,那个已经修正了留言的问题.