用jQuery隐藏回头访客资料输入框

2009-11-05 By Leo.N

  上一篇文章提到的已经成功发表过评论的评论者在下次评论时仍需重新输入姓名,电邮地址的问题已经查明是由缓存插件Hyper Cache引起的,能找到的解决方法是利用js来解决,但无奈在我博客上测试不成功,只能暂时禁用此插件,同时在木木的指引下,我也发现了一个能提高访客体验度的功能:隐藏回头访客的姓名,电邮,网址输入框。

  按照木木提供的方法,我再次悲剧的发现用在我博客上并不能正常工作,只能再次Google&百度,找到最后,终于在Xiaorsz的博客中找到个利用jQuery实现的方法,测试后工作正常,下面写点改动的地方。

  首先,我们要编辑comments.php,在类似于:

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1"/>

的评论者姓名输入框代码上方添加:

<?php if ( $comment_author != "" ) : ?>
<div id="welcome">
<?php printf(__(' Hi! 欢迎回来!<strong>%s</strong>.'), $comment_author) ?>
</div>
<?php endif; ?>

然后再把三个评论者姓名,电邮,网址的代码输入框用<div id="author_info"></div>包起来,到此,comments.php修改结束;

  然后,新建一个名为inputhidden的js文件,把Xiaorsz提供的代码放进去:

$(document).ready(function() { //开始
if($('input#author[value]').length>0){ //判断用户框是否有值
$("#author_info").css('display','none'); //将id为author_info的对象的display属性设为none,即隐藏
var change='<span id="show_author_info" style="cursor: pointer; color:#2970A6;">change &raquo;</span>'; //定义change,style是定义CSS样式,让他有超链接的效果,color要根据你自己的来改,当然你也可以在CSS中定义#show_author_info来实现,这样是为了不用再去修改style.css而已!
var close='<span id="hide_author_info" style="cursor: pointer;color: #2970A6;">close &raquo;</span>'; //定义close
$('#welcome').append(change); //在ID为welcome的对象里添加刚刚定义的change
$('#welcome').append(close); // 添加close
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').click(function() { //鼠标点击change时发生的事件
$('#author_info').slideDown('slow') //用户输入框向下滑出
$('#show_author_info').css('display','none'); //隐藏change
$('#hide_author_info').css('display','inline'); //显示close
$('#hide_author_info').click(function() { // 鼠标点击close时发生的事件
$('#author_info').slideUp('slow') //用户输入框向上滑
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').css('display','inline'); })})}}) //显示change

保存文件。

  接着,我们要载入jQuery框架,因为我之前添加过Willin大师的Ajax嵌套回复,已经在footer.php添加过,所以这一步我可以省略,没有添加过的童鞋可以在footer.php中加入:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

然后在下面继续添加:

<?php if ( is_singular() ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/inputhidden.js"></script>
<?php } ?>

这部的先后顺序一定不能错,不然就无法成功。

  OK,到此用jQuery隐藏回头访客资料输入框的全部操作就完成了,快试试去吧!Enjoy !

  1. 我来试试~~
    收藏了,有空做一下

  2. 验证可用,哈哈

    • 感谢测试,哈哈!

  3. 主题有这个功能,不过没启用……

    • 你的主题很强力。。。

      • 所以我始终没放弃它啊~~主题真是越整越爽~~

  4.  Hi! 欢迎回来! Dianso

    这个效果好,省的以后再输入。

    • 呵呵,其实以前也无需再次输入,只是因为我装的缓存插件导致要再次输入,现在已经禁用了。。

  5. 这个倒是挺好

  6. MS挺有意思的,我先试试效果

  7. [ 小牆判斷這是Spam! ]
    欢迎回访哦….

  8. 对哦,我还在用原来直接加在comments.php里的JavaScript的呢……试试去

  9. 哈,你也加上关闭侧边栏啦,不错不错~~

    • 这叫追随你的步伐,哈哈!

  10. [ 小牆判斷這是Spam! ]
    过来支持一下….

    • 谢谢!你的评论被误判为spam了。。实在抱歉!

  11. 哇~终于实现这效果了。

    • 嘿嘿,是时候跟进时代步伐了。。

  12. 试一试,这个功能很实用。

  13. 哈哈,我不死回头客~~我要当常客!

    • 哈哈,欢迎当常客!

  14. 很好,谢谢

    • 不客气,欢迎使用!

  15. 测试一下

  16. 测试一下,我试了试在firefox无效呢

    • 在我这很正常呢,你强制刷新下缓存试试。。。

      • 在默认主题下测试也是IE中一切正常,但是firefox和chrome下无效,信息输入框全部消失了,只留下评论框了,你试试看

        • 这段代码的目的就是让本地存在cookies的回头访客的资料输入框隐藏起来的,我这在ie6/7/8,firefox3.5,chrome3都很正常呢,你测试的主题是不是什么地方修改错了?默认主题我曾经也测试过,也很正常呢。。。

          • 哈哈,马甲被你认出来了O(∩_∩)O~
            可以再QQ上向你请教一下么?我的是6583659

          • OK,正常了O(∩_∩)O~

          • 已经加你了。

  17. 我再试试

    • 上面那是你马甲,哈哈。。

  18. 郁闷,无奈。
    我对这个东东相当的无语。我真不知道该怎么去弄。
    也就是jquery这东东。
    <script type="text/javascript" src="/js/inputhidden.js”>

    这段代码加在哪个文件里呢?能具体说下吗?只要我一碰到关联到这东西,我就没法做了,先谢谢博主啊。。

    • 放在footer.php或comment.php里都行

  19. 我还是不会!呜呜!

    • =。=我感觉我说的已经够明了了呀。。。

      • 但是失败了!呜呜!评论之后全是乱码了!

        • 你是不是在编辑模板的时候编码弄错了?必须是utf8啊。。。

          • utf8是?

          • 文字编码。。

  20. 郁闷,我做了没效果啊,只有 Hi 欢迎回来。 这几句话。怎么办?

  21. 好了,OK了,嘿嘿。

    • 解决了就好,我估计你之前可能是忘记加载jq库了。。

  22. 咋还没有回来。。。

  23. 我刚才测试了一下这个方法,应该还比较好的

  24. 好方法啊~学习了!

  25. 留言测试一下

  26. 大大
    我做都正常也都成功^^
    不過隔了一夜…
    我的輸入資料的框框都不見了 >O<
    (用google或火狐看)
    http://silentnight.twbbs.org/error/google.PNG
    不過用IE看就有出現
    http://silentnight.twbbs.org/error/ie.PNG
    怎麼會這樣呢= 口 =

    • 待会帮你看下。。现在有点忙。。

    • 看了半天,没找到问题所在,建议你把你修改过的主题发给我看下。。

  27. comments.php的寫法…
    http://silentnight.twbbs.org/error/comments.txt

    • 难道是因为你的评论者输入框那的命名问题(就是“昵称”、“信箱”、“网址”)?我对比了半天,就发现这和我的不同,你试着把命名方式改成这样的http://leo-n.com/demo/comments.txt,如果还是不行,那你再参考下http://immmmm.com/using-jquery-to-improve-experience.html这个方法。。

      • 大大
        我木木大大和大大你的方法都試過了
        在IE都是正常的
        不過在火狐和google就是會消失…
        用原始碼看又沒有消失= =
        怎麼會這樣><

      • 大大
        我解決問題了=口=
        謝謝你T_T

        • 恭喜!其实我也没帮上什么忙。。实在惭愧。

  28. 不小心发现自己主题自带这个功能

  29. jquery1.4.2是不是不行呢,问题和上面的一样,也是会消失3个输入框

    • 应该是跟版本有关系,建议你尝试下1.32,我一直在用的是1.23。。。






XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>