jQuery 优化评论方法总结

标题太大，绝对不是我这个懒人的风格。不过，为了日后减少很"大"的问题，我下定决心要总结一次！有了众多朋友的教程，总结起来容易得多，足矣回答很多人问我的问题："你的评论部分是怎么实现的？"。

1. 无插件实现 Ajax 评论

Ajax 评论是 K2 模板自带的功能，北极冰仔同学将其中的代码提炼出来，写了使用 jQuery 实现 Ajax 留言。Xiaorsz 打算应用到自己的模板内，却遇上了问题，于是他找到我。在帮忙的过程中，我加入了评论提交到显示过程的过渡效果，于是有了 Xiaorsz 版使用 jQuery 实现 wordpress 的 Ajax 留言。

2. 描点平滑滚动

Yinheli 那里有一篇页面内锚点平滑移动的文章，用搜索引擎搜索会有更多。要实现抖动效果，你还需要用上 jQuery Easing 插件。

3. 回复按钮动态化

Jinwen 同学对 jQuery 颇有研究，我最喜欢的就是他的让回复留言的按钮动态点的创意。

4. 隐藏访客的资料输入框

来自 MG12，后来 Xiaorsz 同学复写了一遍。我建议他改用 jQuery 实现，然后自己写了隐藏 Wordpress 访客的资料框(jQuery版)。最后最后，Xiaorsz 再次复写了 jQuery 版。这么多篇下来你肯定能学会怎么隐藏访客的资料输入框。

5. @someone 评论预览

这是我最不愿意写的，因为方法会因为主题差异而不同。后来 Yinheli 看了我这里的代码，写出了鼠标悬浮实现显示留言内容(上)(下)共两篇文章。如果你已经依靠自己的理解将前面 4 个小功能加入了主题，那么将教程和模板结合对你来说也不会是难事。

6. 评论框部分显示老用户的头像

Zoll 同学的绝佳创意，在评论框显示老用户的头像，亲切感即刻提升！详见 2008，滚蛋。2009，你好 分割线后部分。

诚如 Sofish 所说："UI 设计是一个不断改进的过程"，同时，也应该是一个不断学习的过程。当你静下心来学习，慢慢的，很多东西会变得轻而易举。你是很棒的，只要你肯学。

Tag(s): ,
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
Shawn Published@16:23 / 2009-01-02 / Trackback / Skip
56 Comments Contributed by Visitors
  1. rebuttoniColor / 16:30@2009-01-02 1
    iColor

    实在不好意思当第一...
    等想折腾时再来细看...

  2. rebuttonfqch / 16:31@2009-01-02 2
    fqch

    哇!沙发!

  3. rebuttonfqch / 16:32@2009-01-02 3
    fqch

    描点平滑滚动用看看~

  4. rebuttonxiaorsz / 16:37@2009-01-02 4
    xiaorsz

    这次还比较靠前！对了，那个分享那个你是自己加的链接吗？还是什么插件？！！

  5. rebutton浮黑 / 16:53@2009-01-02 5
    浮黑

    收藏起来。好好研究。

  6. rebuttonneekey / 16:54@2009-01-02 6
    neekey

    好东西，收藏了 :)

  7. rebuttonZoll / 16:59@2009-01-02 7
    Zoll

    哈哈 大规模Pingback啊 :grin:
    其实不光是技巧
    如何把这些技巧恰当的融入自己的主题也是要花花心思的 呵呵

  8. rebuttonShawn / 17:03@2009-01-02 8
    Shawn

    @iColor: 到时候就会需要了。

    @fqch: 晕，不是沙发 :grin:

    @xiaorsz: 不是插件，感觉插件用了太多无关紧要的东西。我自己选了常用的 6 个写到模板里。

    @Zoll: 归根结底，离不开主题，所以最好自己做主题。能帮助更好的理解细节。

  9. rebuttonnooidea / 17:07@2009-01-02 9
    nooidea

    我现在就在老天天研究你这些东。。。

    哈哈

    昨天还去看了 sofish 的10个简单jQuery

    我看我目前的主题比较适合做这些效果 如果换了K2或kubrick做出来就不好看了

  10. rebuttonsofish / 17:11@2009-01-02 10
    sofish

    真的? 评论指导下...好！

  11. rebuttonZoll / 17:15@2009-01-02 11
    Zoll

    @Shawn: 你也是极力劝说我自己做主题啊。。呵呵
    其实我现在的主题的代码基本上已经被我全部重写了，仅保留了一点自己喜欢的样式。
    可不可以说我是在基于Blocks，而不是Sandbox，在写自己的主题呢 哈哈^^

  12. rebuttonShawn / 17:21@2009-01-02 12
    Shawn

    @Zoll: 当然可以了，不过有个建议是适当减少 DIV，优化 XHTML 结构。sandbox 的优势就是良好的 xhtml 结构。

  13. rebuttonSnowyy / 17:48@2009-01-02 13
    Snowyy

    考完试再研究研究，谢谢总结……

    另外我想说，斜体字有点难辨，颜色&加粗其实没有用斜体的必要吧 :?:

  14. rebuttonpopdo / 18:06@2009-01-02 14
    popdo

    描点平滑滚动这个我昨天在一个老外的博客上发现一种更简单直接的方法，也可以实现你博客这种下滑振动的效果。

  15. rebuttonfisio / 18:23@2009-01-02 15
    fisio

    最后一条好像花儿一直是这么搞的来着...

  16. rebuttonSayisee / 18:40@2009-01-02 16
    Sayisee

    备战期末考中，寒假仔细研究一下！

  17. rebuttonShawn / 19:34@2009-01-02 17
    Shawn

    @popdo: 你说 scrollTo 插件吗？那个一直有些浏览器兼容问题，不建议用。

    @fisio: 你这么一说，我想起来了，我就说我在哪儿见过。。

  18. rebuttonZoll / 19:39@2009-01-02 18
    Zoll

    @Shawn: 干脆上堂课，讲讲如何优化XHTML吧 呵呵，听了你的话，现在正在把能减的DIV全减了 :smile:

  19. rebuttonShawn / 19:45@2009-01-02 19
    Shawn

    @Zoll: 这个。。真的很难，怎么说呢，就像数学老师交给了我们方法，但并未教怎么去做具体的每一道题。总体上是一个思路，怎样以最简单的方法来解决问题。事实上，总存在更简单的方法，不是么？

    我特别清晰的记得，小学有一次考试，我数学考了100分。结果老师点评的时候，说，虽然你做出来了，但是，你用的是笨办法。那种不是太满意的眼神我现在都还记得。

  20. rebutton北极冰仔 / 19:52@2009-01-02 20
    北极冰仔

    收到 ping 回访看看。

  21. rebutton老时 / 20:30@2009-01-02 21
    老时

    貌似现在收藏分享还不能用。

  22. rebuttonShawn / 20:35@2009-01-02 22
    Shawn

    @老时: 我这里的？可以用啊。。。难道有问题？

  23. rebuttonwelee / 20:44@2009-01-02 23
    welee

    看来这些技巧，很可能会成为将来做主题必备的元素，呵呵！

  24. rebuttonleehow / 20:56@2009-01-02 24
    leehow

    不开心，还是准备出山。

  25. rebutton老时 / 21:17@2009-01-02 25
    老时

    @Shawn: 是我这里的问题。刚才不行，现在可以了，顺便赞个。

  26. rebuttonNetPuter / 22:20@2009-01-02 26
    NetPuter

    jQuery应用大集合..看来真得开始用jQ这个框架啦~
    说真的,用了jQ的评论处和没有用到jQ的评论处,就是不一样!

  27. rebuttonNetPuter / 22:20@2009-01-02 27
    NetPuter

    @leehow: 施主想开点啦~

  28. rebuttonShawn / 22:22@2009-01-02 28
    Shawn

    @老时: 哈哈，刚才可能是没装在完毕。

    @NetPuter: 是的，反正你也快放假了，没事学学吧。

    @welee: 呵呵，有用的话可以融入主题。

  29. rebuttonBoBoSkY / 1:24@2009-01-03 29
    BoBoSkY

    @leehow: 您老冬眠了吧。 :shock:

  30. rebuttonyinheli / 11:43@2009-01-03 30
    yinheli

    哈哈，我都骄傲了。名字出现了好几次。其实都不是自己的创意。UI还有很多值得研究。
    最近一直忙考试。网也没得上。忍不住偷偷跑来隔壁宿舍的霸占一下过过瘾。哈哈。 :shock:
    新年快乐～

  31. rebuttonAlan / 16:59@2009-01-03 31
    Alan

    难道我的评论没了？难道我没评论？-_-!

  32. rebuttonShawn / 17:25@2009-01-03 32
    Shawn

    @Alan: 什么评论没了？

  33. rebuttonAlan / 17:27@2009-01-03 33
    Alan

    @Shawn: Nothing，我记错了，在另外一篇留言，然后以为是这一篇，囧，见谅见谅

  34. rebuttonleehow / 7:59@2009-01-04 34
    leehow

    @NetPuter: 谢谢你这个活跃的小朋友。

  35. rebuttonYacca / 9:04@2009-01-04 35
    Yacca

    厄,显示头像,这个想法真棒...-.-

  36. rebuttonCenteur / 10:47@2009-01-04 36
    Centeur

    不错，对用户体验的提升的确是无止境的。

  37. rebuttonmarslau / 0:21@2009-01-06 37
    marslau

    收藏一下，喜欢描点平滑滚动的效果，加上抖动也不错。

  38. rebuttonRowe / 10:51@2009-01-06 38
    Rowe

    由于用了部分Jquery的插件导致现在Head区域很臃肿 :grin: 不知Shawn是如何做到隐藏JS调用地址的？能否指点1、2...

  39. rebuttonShawn / 13:18@2009-01-06 39
    Shawn

    @Rowe: 两个问题好像没关系？ :grin:

    我建议少用 jQuery 插件，隐藏 js 的地址只要 Rewrite 就可以了。

  40. rebutton花果山寨 / 13:31@2009-01-06 40
    花果山寨

    改这么多到时候升级的时候会不会又复原了？

  41. rebuttonShawn / 13:32@2009-01-06 41
    Shawn

    @花果山寨: 不会，因为改的是模板，不是 Wordpress 核心文件。

  42. rebutton任 / 4:04@2009-01-07 42
    任

    熊熊生日哈？生日快乐吧

  43. rebutton火星基地 / 8:09@2009-01-07 43
    火星基地

    收藏的效果好可爱~

    ps: 楼上看来是内线, 我也跟上 生日快乐 :shock:

  44. rebutton任 / 9:34@2009-01-07 44
    任

    不是内线那么简单的关系!熊熊自己解释一下~啊哈哈哈哈 :grin: :grin:

  45. rebuttonShawn / 11:24@2009-01-07 45
    Shawn

    @火星基地: 谢谢！

    @任: 不用解释，咱俩关系说不清道不明。。。

  46. rebutton痞子C / 12:59@2009-01-15 46
    痞子C

    学习学习

  47. rebutton痞子C / 16:18@2009-01-20 47
    痞子C

    还没弄明白，我在本地sandbox里为什么实现不了AJAX，再看一下效果

  48. rebuttonSimon Kong / 15:00@2009-02-01 48
    Simon Kong

    很喜欢这里。我估计永远都做不了这样的风格。不知道自己到底想要什么，也没有能力。

  49. rebutton花鱼 / 8:46@2009-02-06 49
    花鱼

    看看能这个评论效果,

  50. rebuttonLeeiio / 9:38@2009-02-08 50
    Leeiio

    Xiaorsz 版使用 jQuery 实现 wordpress 的 Ajax 留言，評論后不會顯示出那個評論占的評論號碼，你的就可以..

  51. rebuttonyinheli / 13:14@2009-02-08 51
    yinheli

    @Leeiio: 
    这里是直接用的li吧

  52. rebuttonyinheli / 13:15@2009-02-08 52
    yinheli

    呃....不对

  53. rebuttonLeeiio / 23:01@2009-02-08 53
    Leeiio

    而且這裡可以隔行不同樣式，我不知道怎麼通過判斷單篇文章的評論數的起偶數來實現隔行，並且樓層數還能顯示？shawn的也是那個xiaorsz的那個ajxa comment文件?

  54. rebuttonxiaorsz / 11:34@2009-02-09 54
    xiaorsz

    @Leeiio: 他这个不是用的我那种！！他这里好像重载过的。应该比较复杂，呵呵！！有时间跟他请教下！！

  55. rebuttonforever / 15:55@2009-02-16 55
    forever

    学习的来啦。

  56. rebuttonxiaooole / 11:17@2009-02-22 56
    xiaooole

    嗯，真是学到不少知识啊，长见识了。 :smile:

  57. rebuttonLeeiio / 1:56@2009-03-06 57
    Leeiio

    我想請問下Yinheli 的页面内锚点平滑移动那個怎麼加easing 效果，那個自寫的scrollto函數似乎沒有easing～

  58. rebuttonWilliam / 5:36@2009-04-14 58
    William

    《jQuery 实战》的配套源代码下载地址
    http://download.csdn.net/source/1096636
    网上购书链接：http://www.china-pub.com/195146

    jQuery 实战(jQuery in action)(2008版)的配套源代码。Manning网站的源代码在中国无法直接下载，所以在这里提供下载，方便大家边看书，边实践。实践才是王道！

  59. rebuttonliangwei389 / 12:16@2009-05-17 59
    liangwei389

    不错,很不错的用户体验! :smile:

  60. rebuttonallarem / 15:28@2009-07-07 60
    allarem

    四处搜索评论的东东

  61. rebuttonlingzuer / 17:47@2009-07-28 61
    lingzuer

    我试试无刷新的评论。

  62. rebuttonlingzuer / 17:47@2009-07-28 62
    lingzuer

    果然无刷新，并且显示的时候效果很棒。谢谢分享。

  63. rebutton麦子 / 0:26@2009-08-05 63
    麦子

    测试一下……

  64. rebuttonsd / 14:57@2009-08-11 64
    sd

    不错... :smile:

  65. rebuttonffffffffffff / 10:15@2010-01-13 65
    ffffffffffff

    比较有意思，测试一下。。。。

  66. rebuttonnetfly / 12:38@2010-03-15 66
    netfly

    hey~~随便进来看看，速度很快的说~~~~

Leave Comments Here...

必填

必填&保密

随您

支持Ctrl+Enter快捷提交

  • 已部署"白忙活" Anti-Spam 系统，猪肉 Spammer 请注意查看源代码链接处。
  • 本站不会泄露您的邮件地址，敬请放心。
  • 支持常用 HTML 代码调用，插入 PHP 代码需注意：< = &lt;，> = &gt; 。
  • 仅当某人针对您的评论做出回应时，您才会收到由本站发出的通知信件。
  • 如您希望以相同方式通知某位网友，请点击 Reply 按钮，或自行输入 @对方名字:。
  • 鼠标移至评论列表中的 @someone: 区域即可自动显示 someone 的评论内容。
2 Trackbacks/Pingbacks

Shawn Blog

Shawn的个人博客(Blog)，分享Wordpress技巧和Firefox浏览器心得，关注Web 2.0应用发展，记录对虚拟主机的使用评价。