成功把 Ajax 提交评论效果添加到 Zbench

Jul 22, 2010
以下内容恢复自 Wordpress 时期的数据库备份,内容已经严重过期,仅留作纪念。

话说我碰巧在 5d6d 子论坛看到个很牛的 Ajax 评论提交效果,显示非常好,与一般提交几乎一样呢。

所以立马开始动手折腾。不过具体折腾内容我只能透露一部分额,不然影响原作者的销售就不好了。

<img src=\'http://www.evlos.org/ev-box/myimg/uploads/Cap0000535.png\' />

一. 部分 Zbench 的 CSS 修正:

上次的修改还是没有达到我心中的完美样式,所以咱们继续补充,添加 Wp-pagenavi 的 CSS 代码。

.wp-pagenavi .page{padding:0 4px;}
.wp-pagenavi .pages{padding-right:5px}
.wp-pagenavi .current{padding:0 4px;}
.wp-pagenavi .nextpostslink{padding:0 4px;}
.wp-pagenavi .larger{}
.wp-pagenavi .last{padding:0 5px;}
//补上 Wp-pagenavi 插件的 CSS

.post .entry img{position:relative;left:-2px;}
//文章中图片整体向左偏移 2px

#footer-inside #back-to-top{position:absolute;top:5px;right:10px;font-size:12px;border:none;color:#AAA;}
//TOP按键向右偏移 20px

二. Ajax 效果预览:

标题下方的图片是进行 AJAX 提交之后的效果图,看起来和无 AJAX 提交的时候的效果几乎一摸一样。 下面则是点击提交按键之后的效果。

<img src=\'http://www.evlos.org/ev-box/myimg/uploads/Cap0000534.png\' />

三. 添加 Ajax 效果的部分步骤:

我只能透露一部分的修改过程,需要的童鞋请到 <a target='_blank' rel='nofollow' href='http://zww.me/'>Zww 的淘宝店去看看,那里有提供服务。

额,虽然那里的效果可能有一点儿不同,不过也是很好滴,下面提供Zww的淘宝店传送门 -

<a target='_blank' rel='nofollow' href='http://item.taobao.com/auction/item_detail-0db1-f7c8975a70ef482efd2d90754d09a9a5.jhtml'>http://item.taobao.com/auction/item_detail-0db1-f7c8975a70ef482efd2d90754d09a9a5.jhtml

#commentbox_reload{background:#F2F2F2;display:none;padding-left:10px;border:1px solid #ccc;line-height:40px;margin:10px auto;}
//首先我们增加一个载入提示框的样式
<div id=\"commentbox_reload_con\"></div>
//然后用上面的 div 把整个评论列表范围框住以实现 jQuery 的局部刷新
<script type=\"text/javascript\" src=\"http://tool.evlos.org/file/jquery-1.2.6.min.js\"></script>
//载入 jQuery 库,使用 1.0 版本以上的皆可以实现
//再载入包含局部刷新代码的 js 文件,为保护原作者成果这里并不列举

<div id=\"commentbox_reload\"></div>
//最后在适当地方加入载入提示框的 div 即可

四. Willin 回复邮件通知 Evlos 样式修改版:

嘿嘿,因为没有提供具体的 Ajax 代码,作为补偿。我把自己的评论回复邮件通知样式送给大家。

<img src='http://www.evlos.org/ev-box/myimg/uploads/Cap0000537.png' />

<a target='_blank' rel='nofollow' href='http://code.google.com/p/evlosbox/downloads/detail?name=cmn_cssed.zip&can=2&q='>http://code.google.com/p/evlosbox/downloads/detail?name=cmn_cssed.zip&can=2&q=

五. 附言:

参考文章 - Comment Mail Notify - <a target='_blank' rel='nofollow' href='http://kan.willin.org/?p=1295'>http://kan.willin.org/?p=1295

话说某天看到 Lazy_R 在推上说道 - “作为一个懒人,我躺在完全没收拾的沙发上,身下压着衣服撑子。我懒得翻身把撑子抽出来。 不过我还不是丧心病狂嘛,我还知道把这个发到twitter上,说明我还是有感觉的 …”


[back]