WP-Thread-Comment嵌套评论的留言框自动适应宽度

Posted by Harid2011 - Aug - 20 Leave comments

WP-Thread-Comment插件是我一直在用的评论增强插件,它的功能有很多,具体就不细说了。它有一点小小的问题就是在点击【嵌套回复】后,将留言框部分移动至需要嵌套的地方时,留言框(textarea元素)的textarea元素其宽度依旧是保持原来的,因此会有挤出至侧边栏的现象。具体到星期九的话,我在留言框的右边放了个小广告,因此会将广告挤至下一行,影响美观。

下图是挤出至侧边栏的一个实例:

留言框挤出至侧边栏那么,我只要让留言框的宽度自动调节即可。我的方法是在点击了“【嵌套回复】”时,用Javascript读取当前“form”表单元素的宽度,因为没有进行嵌套回复而只是普通评论的时候,我的“form”元素所辖的区域也就是嵌套回复时需要移动的区域其宽度是704px,那么如果当前的宽度小于这个值,即说明需要调整。这个时候重新生成合适宽度的留言框就好了。

具体做法:

1、修改comments.php文件,找到留言框所在的行。我的代码是:

<textarea name=”comment” id=”comment” tabindex=”5″></textarea>

将其用层封装,改成:

1
2
3
<div id="commentarealeft">
     <textarea name="comment" id="comment" tabindex="5"></textarea>
</div>

2、修改WP-Thread-Comment插件的文件wp-thread-comment.js.php,找到“movecfm”函数,在函数里找到“ if(Commentarea && Commentarea.display != “none”){”语句,在其之前添加下述几行就OK了:

1
2
3
4
5
6
7
8
9
10
//设置宽度
var respond = document.getElementById('commentform');
var comment_area = document.getElementById('commentarealeft');
var res_wid = respond.offsetWidth;
if(res_wid < "700"){
	var new_wid = res_wid - 210;
	comment_area.innerHTML = '<textarea name="comment" id="comment" tabindex="5" style="width: '+new_wid+'px;"></textarea>';
}
 
Commentarea = commentarea();

如果留言区域的表单其id不是“commentform”,那么改成相应的id。我这里之所以new_wid是减210,是因为广告的宽度。如果没有广告,那么减小210这个数字。其中700是form表单元素的宽度。

修改后我的就好了,能自动适应新的宽度了,效果见嵌套回复时。

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《WP-Thread-Comment嵌套评论的留言框自动适应宽度

Comments(44) Leave comments
  1. Gravatar
    亨sir Mozilla Firefox Mozilla Firefox 6.0.2 Windows Windows XP
    九月 18th, 2011 at 23:37  | #1

    这个嵌套样式不错!
    但是不知道怎么弄

  2. Gravatar
    本草世家 Internet Explorer Internet Explorer 8.0 Windows Windows XP
    八月 25th, 2011 at 13:45  | #2

    又是代码,看不懂,呵呵

  3. Gravatar
    广州seo Internet Explorer Internet Explorer 8.0 Windows Windows XP
    八月 25th, 2011 at 10:24  | #4

    看起来蛮好用的,我去用了,哈哈。

    • Gravatar Harid  @  八月 26th, 2011 at 00:05 replied.

      @广州seo, 这篇文章你评论了好多条了。

  4. Gravatar
    kaka Internet Explorer Internet Explorer 8.0 Windows Windows 7
    八月 25th, 2011 at 03:43  | #5

    可惜了啊~~zblog没有嵌套恢复 ··擦

    • Gravatar Harid  @  八月 25th, 2011 at 23:08 replied.

      @kaka, 😀 ,转移阵地吧,WP真的强大很多。

  5. Gravatar
    忆草 Internet Explorer Internet Explorer 8.0 Windows Windows XP
    八月 24th, 2011 at 17:35  | #6

    样式果然改了。呵呵

  6. Gravatar
    广州seo Internet Explorer Internet Explorer 8.0 Windows Windows XP
    八月 24th, 2011 at 15:52  | #7

    刚刚有一篇文章也是写这个。

  7. Gravatar
    狒狒 Internet Explorer Internet Explorer 8.0 Windows Windows 7
    八月 24th, 2011 at 14:51  | #8

    感觉很爽,看着比较舒服和清晰!

    • Gravatar Harid  @  八月 25th, 2011 at 23:09 replied.

      @kaka, 是吧? 🙂 ,花了一大晚上的时间呢。我自己也还是比较满意这个样式的。

      • Gravatar 亨sir  @  九月 18th, 2011 at 23:36 replied.  | #9

        @Harid,
        哎,我加了之后,那个管理员的标志没了!哎

Pages:
19 + 74 =  (required)
comment_ad

 NOTICE1: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

 NOTICE2: 请申请gravatar头像(http://en.gravatar.com),木有头像的会显示为“小怪物”头像,将难以通过审核!

分享按钮