浏览WordPress博客的用户如果启用了Cookie,在发表评论后,信息会被记录在Cookie里,这样,下次登录同一个博客发表评论时,WordPress会为用户自动填写评论表单。可以说,这是一个十分贴心的设计。本文中,将介绍如何使用jQuery,来做到更进一步。
如果用户的信息已经存在了,那么就帮他填好,如果已经填好了,就可以把表单也隐藏起来,并且显示一句欢迎语。不得不说,这个想法非常的有趣,所以,我决定自己来做一下。
第一次看到这个功能是在stephen的博客,然后从他的博客,我链接到了xiaorsz写的文章,然后看到了mg12的文章,再然后是xiaorsz使用jQuery的改进版本。
上述几篇文章已经对这个问题阐述得非常详细了,虽然说实现细节有所不同,但是基本原理是相同的。
1. 首先,读写Cookie这部分工作,WordPress已经帮我们做好了,基本上不用我们操心,也即如果用户发表过评论,则comment_author变量不为空,并且会自动填写到Comment Form的author输入框中。
2. 然后,我们用一段代码来隐藏昵称,邮件,网站三个输入框。
3. 最后,我们加上一句欢迎语,并且加上能够展开输入框的按钮。
我觉得这样一个小任务,使用jQuery来实现,简直再好也不过了,能够非常好的体现出progress enhancement的精神,所以说,我非要亲手实践一下,过过瘾。
我们看到,如果我们什么也不做,就仅有步骤1所表述的功能,自动填写Comment Form这样一个功能本身就是可用的,只不过不是那么漂亮,那么好玩而已!
接着,如果用户浏览器启用了javascript支持,并且,他正确下载了jQuery和页面代码,那么该用户可以得到步骤2,3提供的功能。也就是说,步骤2,3和javascript支持是并存的。
好了,分析结束,讲讲我的实现。因为是增强页面功能,所以,我就不打算去动原来的页面模板文件了。昵称、邮件和网址输入域,各自都有自己的id(分别是author,email和url),对于jQuery来说,这已经非常足够了,所以模板文件没什么需要改动的。只要创建一个js文件,写好上面的功能,链接进去就ok了。
下面是代码:
var $author = jQuery('#author');
var $author_email = jQuery('#email');
if ($author.val() != '' && $author_email.val() != '') {
$author = $author.parent().css('display','none');
$author_email = $author_email.parent().css('display','none');
var $author_url = jQuery('#url').parent().css('display','none');
$author.before(jQuery('<div class="form_line">Welcom Back! '+ $author.find('#author').val() +'! </div>').append(
jQuery('<a href="#">Change »</a>').click(function(){
$author.css('display','');
$author_email.css('display','');
$author_url.css('display','');
jQuery(this).parent().remove();
return false;
})
));
}
});
嘿嘿,我测试一下。。
感谢你把代码发了出来,但是具体怎么连接,不明白啊,我是个菜鸟,还望指教
这个不错. 但是JQuery 这个东西我还是有点迷茫. 不太会用.
这个计时编辑评论的东东 很不错啊!
有创意...
这个用户体验是不错的,但好像我的用不了。
这个插件有意思,很喜欢。
這個取消關閉后沒有重新關閉回來的功能~
換了個瀏覽器就得重新輸入姓名,郵件地址了。。。。
真是一群高人啊,我極其羨慕地看著你們玩這個!!!
對這個我是一竅不通啊,不過,支持一下~~~~
不要把这些东西看得很神秘,只是些雕虫小技罢了~~没什么大的技术含量
方法真多~又一个版本的评论框改进方法~~
呵呵~~
你的方法我觉得最简单了,所以我也用上,谢谢啦。如果要加上一些显示的效果应该怎样加了,而不是突然出现,多问一句。
呵呵,加效果是可以的,简单语言描述一下,
首先,把author、email和website三行,放入到一个div里面(这里有一些使用jQuery进行的Dom操作),
然后,隐藏的时候使用slideUp方法,出现的时候使用slideDown方法
当然,你也可以直接把css('display','')替换成slideDown('fast'),那样会变成什么效果呢?可能是百叶窗效果吧,哈哈
http://wordpress.org/extend/plugins/simplemodal-contact-form-smcf/
这个联系表单插件不错~
看了screenshot看起来很酷啊~~
用了intensedebate,没得玩了。。。。
感觉现在的评论用起来就不错
确实啊,已经很贴心了,加个这玩意,很好玩,而且可以练习使用jQuery。
其实我现在还想改进一下我的相关文章的显示,现在的显示是带效果的,想做成无效果的,速度快一点,呵呵。。
你的相关文章列表的效果不影响速度的,是在页面展示出来以后才加上的效果。我只是觉得你的那个相关文章列表在代码里先于文章正文出现有点不爽,逻辑上说文章的内容最重要,放前面比较好。不过这也是我的纯个人感官了,没啥道理的。
我也发现了这个问题,但是如果不是那样放的话,样式就会有问题。
样式上可以保证的话我会先把文章放第一啊。。。
这个是不是对SEO有影响啊??
如果我是你我就先放在文章末尾,然后用jQuery搬到上面来,哈哈……
不改变模版文件是最好的了!!不过这里好像没有读到author,只是Welcom Back,如果不知道会有怪怪的感觉!!呵呵,一点点建议!!
呵呵,谢谢指正,我不小心把代码写错了~~现在已经改正了~~
呵呵,不错,又一个版本!!!试一下!!