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

Posted by 小邪 on 2010年07月22日 Leave a comment (115) Go to comments

> 话说小邪碰巧在 5d6d 子论坛看到个很牛的 Ajax 评论提交效果，显示灰常好，与一般提交几乎一样呢。
> 所以立马开始动手折腾。不过具体折腾内容小邪只能透露一部分额，不然影响原作者的销售就不好鸟。

一. 部分 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 提交的时候的效果几乎一摸一样。
> 下面则是点击提交按键之后的效果，嘎嘎，小邪太鸡冻了。蛋定，蛋定蛋定，春哥保佑，阿门嘎嘎。

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

> 小邪只能透露一部分的修改过程，需要的童鞋请到 Zww主题大湿的淘宝店去看看，那里有提供服务。
> 额，虽然那里的效果可能有一点儿不同，不过也是很好滴，下面提供Zww的淘宝店传送门 -

> http://item.taobao.com/auction/item_detail-0db1-f7c8975a70ef482efd2d90754d09a9a5.jhtml

1 2	#commentbox_reload{background:#F2F2F2;display:none;padding-left:10px;border:1px solid #ccc;line-height:40px;margin:10px auto;} //首先我们增加一个载入提示框的样式

1 2	<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 代码，作为补偿。小邪把自己的评论回复邮件通知样式送给大家。

> http://code.google.com/p/evlosbox/downloads/detail?name=cmn_cssed.zip&can=2&q=

五. 附言：

> 参考文章 -
> Comment Mail Notify - http://kan.willin.org/?p=1295

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

> 嘿嘿，当时小邪就 Orz 了。(*￣▽￣)y ~~

WP风格 [WP Theme]ajax, comment, theme, zbench

← Zbench主题的代码使用调整手记

如何用强大的jQuery来进行Ajax操作 →

115 Comments.

万戈 49 天之前坐沙发！#1

ajax抢先试

回复
- 邪罗刹 49 天之前
  
  @万戈 , 恭喜万戈大帅锅抢占高地 ~
  
  回复
baby_1224 49 天之前坐板凳！#2

前来测试一下....

回复
- 邪罗刹 49 天之前
  
  @baby_1224 , 嘿嘿，荒淫荒淫 ~ 大家请随意测试 ~
  
  回复
武龙杰 49 天之前躺地板！#3

都是技术强人呀，呵呵！

回复
- 邪罗刹 49 天之前
  
  @武龙杰 , 呵呵，在大牛面前还是很渺小滴 ~
  
  回复
MOPVHS 49 天之前天花板！#4

回复
- MOPVHS 49 天之前
  
  @MOPVHS , Reply测试...
  
  回复
  - MOPVHS 49 天之前
    
    @MOPVHS , 哈哈，没有@有些不习惯了...
    
    回复
- 邪罗刹 49 天之前
  
  @MOPVHS , 经过 Firefox Opera Safari IE6 Chrome 测试，@ 是会正常出现的 ~
  请问你使用的是什么浏览器？
  
  回复
  - MOPVHS 49 天之前
    
    @邪罗刹 , Win7 Chrome 5.0.375.99
    
    回复
    - 邪罗刹 49 天之前
      
      @MOPVHS , 瞬间蛋疼了
      
      回复
- 邪罗刹 49 天之前
  
  @MOPVHS , 手动把@给你加上了，因为考虑到以后可能会使用无限嵌套 ~ 表介意哈 ~
  
  回复
  - 邪罗刹 49 天之前
    
    @邪罗刹 , 杯具鸟，貌似连续发评论，就会不出现 @ ~
    
    回复
    - baby_1224 47 天之前
      
      @邪罗刹 , 特意回来瞅一眼~测试党各种的多啊~
      
      回复
      - 邪罗刹 47 天之前
        
        @baby_1224 , 哈哈，当时小邪就鸡冻了 ~
        
        回复
        
        baby_1224 46 天之前
        
        @邪罗刹 ,
  - 邪罗刹 49 天之前
    
    @邪罗刹 , 春哥保佑 ~
    
    回复
- 邪罗刹 49 天之前
  
  @MOPVHS , 喔喔，知道为什么你前面木有@显示了 ~
  因为原先的JS是无法处理AJAX返回后的数据的 ~
  所以小邪让返回后的数据里面也带了这样的JS ~
  就完工鸟 ~ 嘻嘻 ~
  
  回复
  - 邪罗刹 47 天之前
    
    @邪罗刹 , ~
    
    回复
dudo 49 天之前下水道！#5

测试一下，最近对留言部分感觉越来越不满意了，想改一改

回复
- 邪罗刹 49 天之前
  
  @dudo , 呵呵，小邪也觉得框体嵌套不是很好看呢 ~
  要是留言太多，页面就长到天上去鸟 ~
  
  回复
fatkun 49 天之前#6

试试ajax...有多好看

回复
- 邪罗刹 49 天之前
  
  @fatkun , 嘿嘿，爽歪歪了 ~
  
  回复
Hailo 49 天之前#7

好像速度很慢，要10s＋
难道是RPWT.

回复
- 邪罗刹 49 天之前
  
  @Hailo , 这就是一个杯具 ~ 小邪也得3s才行 ~
  
  回复
风逐蓝天 49 天之前#8

啥效果测试一下看看~~

回复
- 邪罗刹 49 天之前
  
  @风逐蓝天 , 呜呜，感觉这样子速度还是有点慢 ~
  
  回复
久酷 49 天之前#9

测试

回复
久酷 49 天之前#10

嘎嘎……

回复
- 邪罗刹 49 天之前
  
  @久酷 , 喵 ~
  
  回复
久酷 49 天之前#11

好像是有点慢……不知哪里的小问题……

回复
- 邪罗刹 49 天之前
  
  @久酷 , 恩恩，只是局部刷新了一下，应该不会那么慢的 ~
  回头研究一下，春哥保佑 ~
  
  回复
Dianso 49 天之前#12

来测试

回复
- 邪罗刹 49 天之前
  
  @Dianso , 荒淫测试 ~
  
  回复
  - 邪罗刹 49 天之前
    
    @邪罗刹 , 测试一下载入图片 ~
    
    回复
  - 邪罗刹 49 天之前
    
    @邪罗刹 , 再看看 ~
    
    回复
  - 邪罗刹 49 天之前
    
    @邪罗刹 , ~~
    
    回复
    - 邪罗刹 49 天之前
      
      @邪罗刹 , ~~
      
      回复
  - 邪罗刹 49 天之前
    
    @邪罗刹 ,
    
    回复
  - 邪罗刹 46 天之前
    
    @邪罗刹 , ~
    
    回复
久酷 49 天之前#13

我说呢，这个主题有点熟悉，小邪把原来的主题换了啊……

回复
- 邪罗刹 49 天之前
  
  @久酷 , 嘿嘿，原来的主题太大了，随便写一写滚动条就老长的 ~
  
  回复
奥德雷的雷人事迹 49 天之前#14

日志的时间不对头啊

回复
- 邪罗刹 49 天之前
  
  @奥德雷的雷人事迹 , 汗，不要吓小邪，难道有鬼附上博客鸟 ~
  
  回复
球犯 49 天之前#15

试一试效果看~~

回复
- 邪罗刹 49 天之前
  
  @球犯 , 嘿嘿，荒淫测试 ~
  
  回复
签名 49 天之前#16

还不错速度上有点欠缺呵呵

回复
- 邪罗刹 49 天之前
  
  @签名 , 呵呵，这是一个杯具 ~
  
  回复
棺材中的尘埃 49 天之前#17

我倒是觉得速度挺快的！

回复
- 邪罗刹 49 天之前
  
  @棺材中的尘埃 , 嘿嘿，终于有人觉得快啦，撒花！(￣▽￣)o∠※PAN!=.:*:'☆.:*:'★':*
  
  回复
丕子 49 天之前#18

ajax真是提速啊哈哈

回复
- 邪罗刹 49 天之前
  
  @丕子 , 嘿嘿，感觉现在页面都不应该刷新鸟 ~
  
  回复
柳城 49 天之前#19

不懂。路过。
呵呵

回复
- 邪罗刹 49 天之前
  
  @柳城 , 嘿嘿，荒淫路过 ~
  
  回复
QiQiBoY 49 天之前#20

我也试一下。。

回复
- QiQiBoY 49 天之前
  
  感觉一般，没willin版的帅。。。。
  ajax是用纯js的吗，还是也是使用jQuery呢？
  
  回复
  - 邪罗刹 49 天之前
    
    @QiQiBoY , 呵呵，个人爱好不同呢 ~ ╮(╯▽╰)╭ ~
    Willin的小邪也不是很习惯呢 ~
    Ajax是jQuery的 ~
    
    回复
元胜 49 天之前#21

试试效果~~！

回复
- 邪罗刹 49 天之前
  
  @元胜 , 喵 ~
  
  回复
mice 49 天之前#22

可以说成无插件版的那个什么T什么玩意的= =.
...忘记名字了..杯具..

回复
- 邪罗刹 49 天之前
  
  @mice , 囧，无插件版的啥T ~ 不懂 ~
  
  回复
mice 49 天之前#23

额发出去了不带自动刷新的么...

回复
- 邪罗刹 49 天之前
  
  @mice , 稍等一下啊大帅锅 ~
  
  回复
Kaisir.Wang 49 天之前#24

来看看效果咯~~

回复
- Kaisir.Wang 49 天之前
  
  @Kaisir.Wang , 哈果然不错咯
  
  回复
- 邪罗刹 49 天之前
  
  @Kaisir.Wang , 荒淫来玩 ~
  
  回复
biao166 49 天之前#25

什么时候也给自己整一个！！！

回复
- 邪罗刹 49 天之前
  
  @biao166 , 嘿嘿，折腾是一种乐趣，祝你玩得开心 ~
  
  回复
北屯 49 天之前#26

oye

回复
- 邪罗刹 49 天之前
  
  @北屯 , 喵 ~
  
  回复
Skyoy 49 天之前#27

人肉测试中，期待你回复的邮件通知，看看真实版邮件回复效果。

回复
- 邪罗刹 49 天之前
  
  @Skyoy , 嘿嘿，好滴，小邪刚刚回家 ~
  
  回复
  - Skyoy 49 天之前
    
    @邪罗刹 ,
    邮件回复样式不错，我去修改修改先。
    
    回复
  - 邪罗刹 41 天之前
    
    @邪罗刹 , ~~
    
    回复
  - 邪罗刹 41 天之前
    
    @邪罗刹 , .............................
    
    回复
- 邪罗刹 49 天之前
  
  @Skyoy , 嘿嘿，改好再回复小邪的留言喔 ~
  
  回复
  - Skyoy 47 天之前
    
    @邪罗刹 ,
    
    嘿嘿直到周末才动手以葫芦画瓢改好了。
    
    回复
    - 邪罗刹 47 天之前
      
      @Skyoy , hoho ^O^，祝你成功 ~
      
      回复
麦子 49 天之前#28

来测试一下啥样子的

回复
- 邪罗刹 49 天之前
  
  @麦子 , 嘿嘿，荒淫测试 ~
  看到你的飞天毛驴事件，决定订阅一下 ~ 嘎嘎 ~
  
  回复
zwwooooo 49 天之前#29

我来测试这个ajax效果有啥特殊

回复
- zwwooooo 49 天之前
  
  @zwwooooo , 嗯嗯，非常不错
  
  回复
- 邪罗刹 49 天之前
  
  @zwwooooo , 呵呵，感谢 Zww主题帝的贡献 ~ 喵 ~
  
  回复
北街 49 天之前#30

这个模板看着很舒服~

回复
- 邪罗刹 49 天之前
  
  @北街 , 哈哈，特别是评论部分，原先小邪的评论框已经长到受不鸟的地步了 ~
  
  回复
biao166 49 天之前#31

对这个分页的显示非常的鄙视，太小太密了，本来喔鼠标就有问题，老是点错！！！

回复
- 邪罗刹 49 天之前
  
  @biao166 , 蛋定，蛋定 ~
  这是为了体现你微操作的强大，所以才弄得那么密嘛 ~
  
  回复
疾风 49 天之前#32

俺也试试爽一下~

回复
- 邪罗刹 48 天之前
  
  @疾风 ,
  
  回复
WordPress啦 49 天之前#33

ajax很不错啦！以前弄过……

回复
- 邪罗刹 48 天之前
  
  @WordPress啦 , 快爱上 ajax 鸟，卡卡 ~
  
  回复
海天 48 天之前#34

我来试试呵呵

回复
- 邪罗刹 48 天之前
  
  @海天 , 呵呵，荒淫荒淫 ~
  
  回复
秦大少 48 天之前#35

围观学习中……

回复
- 邪罗刹 47 天之前
  
  @秦大少 , 荒淫荒淫 ~
  
  回复
小松 48 天之前#36

话说我的emlog实现不了啊，只能说wp很强大

回复
- 邪罗刹 47 天之前
  
  @小松 , 额，应该是能实现的，不过小邪对EMLOG不了解 ~
  就木有办法鸟 ╮(╯▽╰)╭ ~
  
  回复
yetone 47 天之前#37

我也来试一试

回复
- yetone 47 天之前
  
  @yetone ,
  
  回复
- 邪罗刹 47 天之前
  
  @yetone , ~
  
  回复
签名 47 天之前#38

正能折腾啊我没时间搞啊呵呵

回复
- 邪罗刹 47 天之前
  
  @签名 , 难得放假有时间 ╮(╯▽╰)╭ ~
  
  回复
Neeke 46 天之前#39

我看看究竟是什么效果...

回复
- 邪罗刹 46 天之前
  
  @Neeke , ~~
  
  回复
卜卜口の 38 天之前#40

5d6d的话直接post出去,之后等到确认ajax完成,估计返回的是一大堆html...
所以之后直接用javascript写出来刚刚发表的帖子的内容
,ajax就达成了

回复
- 邪罗刹 37 天之前
  
  @卜卜口の , 恩，现在发现了，返回一大堆html速度很慢 ~
  而且还需要进行过滤 ~
  过滤的话用html的注释作为标记是很方便 ~
  但是速度还是跟不上来 ~
  还是你的方法较好一点呢 ~
  
  回复
轨迹猫 32 天之前#41

我也才尝试尝试这个效果

回复
- 小邪 32 天之前
  
  @轨迹猫 , 握手 ~
  
  回复
天天记事 26 天之前#42

哈哈，我刚从zbench换到zonce

回复
- 小邪 25 天之前
  
  @天天记事 , 嘿嘿，看过鸟，话说你那里有个网友的留言网名真是强悍 ~
  叫如何怀孕。。。
  
  回复
  - 天天记事 25 天之前
    
    我看到了，确实强悍……
    对了，我发现z系列主题貌似都没有描述，对seo有影响吗？
    
    回复
- 小邪 25 天之前
  @天天记事 , 呵呵，放心，最近一些大师的主题作品都木有这个 ~
  不过你如果喜欢的话 ~
  可以自己添加以下代码到 header.php ~
  1 2 3
  <meta name="keywords" content="关键词" /> <meta name="description" content="<?php bloginfo('description'); ?>" /> <meta name="Author" content="作者名" />
  回复
天天记事 12 天之前#43

我来测试下效果……

回复
- 小邪 12 天之前
  
  @天天记事 , 荒淫玩，o(*￣▽￣*)ゞ ~
  
  回复

邪罗刹的菠萝阁

A straw shows which way the wind blows ..