代码如下（代码以本文所贴为主，所提供demo包中代码可能不会更新，代码中发现错误或bug的修复都会以本文中为主）：

   1: var DragUnit=Class.create();//基类的构造，具体参见上篇文章中的开头代码

   2: DragUnit.z=1;//z-index的值

   3: DragUnit.prototype={

   4:  

   5:     init:function(node){//初始化构造

   6:         this.node=typeof node == 'string'? this.$(node):node;

   7:         this.node.style.position = "relative";

   8:         this.node.onmousedown=this.bind(this.start,this);//绑定鼠标按下事件

   9:         this.node.onmouseup=this.bind(this.end,this);//鼠标松开

  10:         this.draging = false;//拖动的状态

  11:     },

  12:  

  13:     start:function(e){

  14:         this.node.style.cursor = "move";//更改被拖动节点的鼠标样式

  15:         document.onmousemove=this.bind(this.move,this);//绑定鼠标移动事件

  16:         this.stopPrevent(e);//阻止浏览器的默认行为

  17:         this.node.style.zIndex = DragUnit.z++;//设置z-index值

  18:         this.draging = true;//标记拖动状态

  19:         this.mouseXY = this.getMousePoint(e);

  20:     },

  21:     

  22:     move:function(e){

  23:         this.stopPrevent(e);

  24:         if(this.draging){

  25:             var mouseXY = this.getMousePoint(e);

  26:             //设置left、top的值

  27:             this.node.style.left = (parseInt(this.getStyle(this.node,'left'))||0) + mouseXY.x - this.mouseXY.x + "px";

  28:             this.node.style.top =  (parseInt(this.getStyle(this.node,'top'))||0) + mouseXY.y - this.mouseXY.y + "px";

  29:             this.mouseXY = this.getMousePoint(e);

  30:         }

  31:     },

  32:     

  33:     end:function(e){

  34:         document.onmousemove=null;

  35:         this.node.style.cursor = "auto";

  36:         this.stopPrevent(e);

  37:         this.draging = false;

  38:     },

  39:     

  40:     $:function(id){

  41:         return document.getElementById(id);

  42:     },

  43:     

  44:     $$:function(c, t, p){

  45:         var at = p.getElementsByTagName(t);

  46:         var ms = new Array();

  47:         var r = new RegExp('(^|\\s)' + c.replace(/\-/g, '\\-') + '(\\s|$)');

  48:         var e;

  49:         for (var i = 0; i < at.length; i++) {

  50:             e = at[i];

  51:             if (r.test(e.className)) {

  52:                 ms.push(e)

  53:             }

  54:         }

  55:         return ms

  56:     },

  57:     

  58:     stopPrevent: function(e) {

  59:         if (window.event) {

  60:             window.event.cancelBubble = true;

  61:             window.event.returnValue = false;

  62:             return

  63:         }

  64:         if (e.preventDefault && e.stopPropagation) {

  65:             e.preventDefault();

  66:             e.stopPropagation()

  67:         }

  68:     },

  69:     

  70:     getStyle:function(element,property) {

  71:         var value = element.style[property];

  72:         if (!value) {

  73:             if (document.defaultView && document.defaultView.getComputedStyle) {

  74:                 var css = document.defaultView.getComputedStyle(element, null);

  75:                 value = css ? css.getPropertyValue(property) : null;

  76:             } else if (element.currentStyle) {

  77:                 value = element.currentStyle[property];

  78:             }

  79:         }

  80:         return value == 'auto' ? '' : value;

  81:     },

  82:     

  83:     getMousePoint:function(ev){

  84:         var x=y=0;

  85:         if (typeof window.pageYoffset!= 'undefined') {

  86:             x = window.pageXOffset;

  87:             y = window.pageYOffset

  88:         }

  89:         else 

  90:             if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {

  91:                 x = document.documentElement.scrollLeft;

  92:                 y = document.documentElement.scrollTop

  93:             }

  94:             else 

  95:                 if (typeof document.body != 'undefined') {

  96:                     x = document.body.scrollLeft;

  97:                     y = document.body.scrollTop

  98:                 }

  99:         if(!ev) ev=window.event;

 100:         x += ev.clientX;

 101:         y += ev.clientY;

 102:         return {'x'  ,'y':y};

 103:     },

 104:     

 105:     windowXY:function(){

 106:         return {'x':window.innerWidth || document.documentElement.clientWidth,'y':window.innerHeight || document.documentElement.clientHeight};

 107:     },

 108:     

 109:     bind:function(f,o){

 110:         return function(){

 111:             return f.apply(o,arguments);

 112:         }

 113:     }

 114: }

使用以上代码，只需使用new运算符构造DragUnit类的实例化对象即可。比如有一个id=’dragme’的节点，只需要调用

   1: new DragUnit('dragme');

即可为此节点加上拖动效果，使其变得可被拖动。

DEMO可以点击此处查看：DragUnit DEMO

你可以拖动demo里的任意头像。效果兼容所有主流浏览器，从IE6到chrome。

Related Posts

• 我的读者墙展示（附所用JS代码） (47)
  好多人都在博客上弄了个读者墙，我之前也搞过，但是换了新主题之后就没再添加了。所以抽了个时间，在links页面加了读者墙，展示的是最近三个月内的评论数量在前72名的访客头像...
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 【效果测试展示篇】Ajax版即时侧边栏评论回复功能 (68)
  自写了《博客加入若干Ajax效果》以来，在博客上陆续添加启用了一些ajax效果，一方面丰富博客体验，一方面也当做练习学习js的一种实践吧。昨天的时候，将wilin版的侧边栏最新评论...
• 让你的评论框自由粘贴代码 (58)
  我前后试用了三种方法。 第一，我想写一个超级正则表达式，来直接将评论框中<code></code>包围的字符串中的“<”转换为“&lt;”。对于只有一对<code></code>标签...
• 为评论框添加文字格式化编辑器 (80)
  我的代码遵寻以下几点效果： 对于普通的加粗（<strong>）、倾斜（<em>）等，如果鼠标没有选择文字，则直接在光标位置处加上完整闭合的标签。然后光标定位到标签中...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/85

• 2010年09月7日, liuqiqisay: @zwwooooo 。。。我承认u.boy.im有些露点。。。。。。哪天被天朝封了我也不会意外。。
• 2010年09月7日, zwwooooosay: @zwwooooo 好像不是，可能是今天的dns有点不正常，偶尔会很慢
• 2010年09月7日, zwwooooosay: 越来越炫了，不过你那个u.boy.im给\强了？？？
• 2010年09月7日, QiQiBoYsay: @最有效的减肥产品 哇。。木鱼。。。
• 2010年09月7日, QiQiBoYsay: @Max Lee 额。。。
• 2010年09月7日, 最有效的减肥产品say: 文章写得不错！！ 顺道来问个好、占个位，沙发沙发，希望允许！常来常往！！
• 2010年09月7日, Max Leesay: 效果太牛了！！！
• 2010年09月7日, QiQiBoYsay: @QiQiBoY 我囧。。还被转。。。！！！ return {'x' : x , 'y':y};

读者墙部分加了个JS效果，鼠标移上去会在旁边打开一个侧滑面板，显示访客的姓名和评论数量等信息。我将这个效果封装了一下，与大家分享。

(注：因为涉及到代码的bug修复、代码更新等因素，demo中的代码不会同步更新，所以JS代码以本文中所贴为准。bug修复一: 修正浏览器宽度获取少计算滚动条宽度的问题。)

   1: /*!

   2:  * author: liuqiqi

   3:  * date: 2010/09/01

   4:  */

   5: var Class = {

   6:     create: function() {

   7:         return function() {

   8:             this.init.apply(this, arguments);

   9:         }

  10:     }

  11: }

  12: var PicWall=Class.create();

  13: PicWall.prototype={

  14:  

  15:     init:function(wrapId,infoId,picClass,textClass){

  16:         this.wrap=this.$(wrapId);

  17:         this.info=this.$(infoId);

  18:         this.picClass=picClass;

  19:         this.textClass=textClass;

  20:         this.timer="";

  21:         this.pics=this.$$(this.picClass, 'li', this.wrap)

  22:         for (var i = 0; i < this.pics.length; i++) {//给每张图片加上事件监听

  23:             this.addListener(this.pics[i], 'mouseover', this.bind(this.show,this), false);//用bind给事件函数绑定正确的对象

  24:         }

  25:     },

  26:     

  27:     show:function(e){

  28:         //这里要注意，页面结构li标签下必须是头像图片img，并且不要在img外再加a标签，否则下面这句代码获取不到正确的事件源节点

  29:         var node=e.target?e.target.parentNode:e.srcElement.parentNode;

  30:         this.info.style.display = "block";

  31:         this.info.innerHTML = node.innerHTML;//将图片加到div#info中

  32:         var point = this.getMousePoint(e);//获取事件发生时鼠标坐标

  33:         var picXY = this.getPicXY(node);//获取当前图片的坐标

  34:         var windowx = document.documentElement.clientWidth || document.body.clientWidth;//浏览器可视区域宽高(前者为网页头声明W3C标准后正常获取可视区域宽度，后者为未声明标准情况下IE获取宽度)

  35:         var maxleft = this.getPicXY(this.wrap).x + this.wrap.clientWidth;//alert(maxleft);return; 放置图片列表容器的右边框x坐标

  36:         if (picXY.x + 156 > maxleft) {//信息框展开后大于容器右边框，则使信息框向左滑动展开

  37:             this.info.style.left = "auto";

  38:             this.info.style.right = windowx - picXY.x - 53 + "px";

  39:             this.addClassName(this.info, 'right');//此处是将头像浮动到右边显示

  40:         }

  41:         else {//正常情况下信息框在右边滑动展开

  42:             this.removeClassName(this.info, 'right');

  43:             this.info.style.right = "auto";

  44:             this.info.style.left = picXY.x - 3 + "px";

  45:         }

  46:         this.info.style.top = picXY.y - 3 + "px";

  47:         this.addListener(this.info, 'mouseout', this.bind(this.unshow,this), false);

  48:         clearInterval(this.timer);

  49:         this.timer = setInterval(this.bind(function(){//宽度变换

  50:             if (this.info.clientWidth < 156) {

  51:                 this.info.style.width = parseInt(this.info.style.width) + 5 + "px";

  52:             }

  53:             else {

  54:                 clearInterval(this.timer);

  55:                 this.$$(this.textClass,'span',this.info)[0].style.display="block";

  56:             }

  57:         },this), 5)

  58:     },

  59:     

  60:     unshow:function(e){

  61:         var node=e.target?e.target.parentNode:e.srcElement.parentNode;

  62:         var point = this.getMousePoint(e);

  63:         var picXY = this.getPicXY(node);

  64:         //通过坐标比对，判断鼠标是否移出信息框区域

  65:         //下面这个if括号语句可以删除，那样鼠标将不能放到文字区域

  66:         if (point.x < picXY.x || point.x > picXY.x + node.clientWidth || point.y < picXY.y || point.y > picXY.y + node.clientHeight) {

  67:             clearInterval(this.timer);//清除定时器

  68:             this.info.style.display = "none";

  69:             this.info.style.width = "56px";//宽度重置初始化

  70:         }

  71:     },

  72:     

  73:     $:function(id){//由id获取结点对象

  74:         return document.getElementById(id);

  75:     },

  76:     

  77:     $$:function(c, t, p){//c:className, t:tagName, p: praentNode。根据节点的class、结点标签类型、及其父级结点来获取一组符合条件的结点数组

  78:         var at = p.getElementsByTagName(t);

  79:         var ms = new Array();

  80:         var r = new RegExp('(^|\\s)' + c.replace(/\-/g, '\\-') + '(\\s|$)');

  81:         var e;

  82:         for (var i = 0; i < at.length; i++) {

  83:             e = at[i];

  84:             if (r.test(e.className)) {

  85:                 ms.push(e)

  86:             }

  87:         }

  88:         return ms

  89:     },

  90:     

  91:     getMousePoint:function(ev){

  92:         var x,y;

  93:         if (typeof window.pageYoffset!= 'undefined') {

  94:             x = window.pageXOffset;

  95:             y = window.pageYOffset

  96:         }

  97:         else 

  98:             if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {

  99:                 x = document.documentElement.scrollLeft;

 100:                 y = document.documentElement.scrollTop

 101:             }

 102:             else 

 103:                 if (typeof document.body != 'undefined') {

 104:                     x = document.body.scrollLeft;

 105:                     y = document.body.scrollTop

 106:                 }

 107:         x += ev.clientX;

 108:         y += ev.clientY;

 109:         return {'x'  ,'y':y};

 110:     },

 111:     

 112:     getPicXY:function(o){

 113:         var x=y=0;

 114:         do {

 115:             x += o.offsetLeft || 0;

 116:             y += o.offsetTop  || 0;

 117:             o = o.offsetParent;

 118:         } while (o);

 119:  

 120:         return {'x'  ,'y':y};

 121:     },

 122:     

 123:     bind:function(f,o){

 124:         return function(){

 125:             return f.apply(o,arguments);

 126:         }

 127:     },

 128:     

 129:     hasClassName:function(o, c){//判断o是否具有值为c的className

 130:         return new RegExp("(?:^|\\s+)" + c + "(?:\\s+|$)").test(o.className);

 131:     },

 132:     

 133:     addClassName:function(o, c){//给o添加名为c的className

 134:         if (!this.hasClassName(o, c)) {

 135:             o.className = [o.className, c].join(" ");

 136:         }

 137:     },

 138:  

 139:     removeClassName:function(o, c){//删除o的值为c的className

 140:         if (this.hasClassName(o, c)) {

 141:             var a = o.className;

 142:             o.className = a.replace(new RegExp("(?:^|\\s+)" + c + "(?:\\s+|$)", "g"), " ");

 143:         }

 144:     },

 145:  

 146:     addListener:function(e, n, o, u){//监听设置封装函数

 147:         if(e.addEventListener) {

 148:             e.addEventListener(n, o, u);

 149:             return true;

 150:         } else if(e.attachEvent) {

 151:             e['e' + n + o] = o;

 152:             e[n + o] = function() {

 153:                 e['e' + n + o](window.event);

 154:             };

 155:             e.attachEvent('on' + n, e[n + o]);

 156:             return true;

 157:         }

 158:         return false;

 159:     }

 160: }

使用这段JS代码，你需要注意下你的页面结构，要在一个固定ID¹的div中输出若干li标签，li标签也要有一个className²，然后在li标签中输出头像图片，同样的关于访客的姓名、评论数量也要在li标签下，并且放到一个span标签中，这个span标签页给加个className³，最后在页面中加个显示访客信息的div，ID⁴固定。

关于页面结构你可以使用firebug或相关工具查看我的友情链接页面的的读者墙的页面结构。也可以下载此demo包。

页面结构写好了，就可以使用new PicWall()来使用上面的js了，它的四个参数分别是上面的1、2、3、4标注。即最外层的div id，显示信息的div id，li标签的className，li标签下放置的读者信息的span标签的className。比如，我的友链页面的读者墙即使用

   1: new PicWall('commentsWall','info','pic','text');

来调用JS。commenswall是我的读者墙那个大div的id，info是一个空的div的id，pic是li标签的class，text是头像旁的span标签的class。更详细的下载demo包自行查看。CSS样式代码也在demo包里。

效果预览，可查看此处（demo包里也有或者我的友链页面）。

Related Posts

• 读者墙效果【二】- 头像自由拖拽 (46)
  上一篇博文《我的读者墙展示（附所用JS代码）》中我分享了自己所用的读者墙JavaScript部分代码。其实关于读者墙我还写了一个版本的js效果，不过离我最终的效果还有差距（最终要实...
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 【效果测试展示篇】Ajax版即时侧边栏评论回复功能 (68)
  自写了《博客加入若干Ajax效果》以来，在博客上陆续添加启用了一些ajax效果，一方面丰富博客体验，一方面也当做练习学习js的一种实践吧。昨天的时候，将wilin版的侧边栏最新评论...
• 让你的评论框自由粘贴代码 (58)
  我前后试用了三种方法。 第一，我想写一个超级正则表达式，来直接将评论框中<code></code>包围的字符串中的“<”转换为“&lt;”。对于只有一对<code></code>标签...
• 为评论框添加文字格式化编辑器 (80)
  我的代码遵寻以下几点效果： 对于普通的加粗（<strong>）、倾斜（<em>）等，如果鼠标没有选择文字，则直接在光标位置处加上完整闭合的标签。然后光标定位到标签中...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7x

• 2010年09月7日, 先看看say: 不知道这个到底有没有人看哦
• 2010年09月7日, 学夫子say: 我也有读者墙的，我的是只显示名字没有头像
• 2010年09月6日, QiQiBoYsay: 消灭44
• 2010年09月6日, QiQiBoYsay: @卢松松 你用火狐还慢？我知道IE下有些问题，展开会很慢。。
• 2010年09月6日, 卢松松say: js加载的好慢。不过看的出博主确实有点功底
• 2010年09月5日, QiQiBoYsay: @snowxh 。。干嘛看头像，看名字呀。。
• 2010年09月5日, snowxhsay: @QiQiBoY 我就是装萌一下！ 我刚一看头像没反应过来你是谁。。。你这不行啊
• 2010年09月5日, QiQiBoYsay: @snowxh 消失几天，居然连邮箱头像都换了。。。

从12:26到13:26正好一个小时内换了三个马甲来发spam，看来时间把握这么精准，一定是定时spam的。

类型二，无知装逼型

特点，客客气气的先说句客套话，然后就出现个傻逼的问题“你用的什么主题？”主题信息底部写有。

类型三，谎话连篇型

其实一分钟也没在俺博客呆过。

类型五，纯粹废话型

要是spam也能坐上沙发，那我真是发那篇文章时倒霉到家了，这都能和spam遇上！！！

类型六，毫不羞耻吹捧型

其实夸赞俺，俺也很高兴，但是别发错文章呀，这个spam却正好发在一篇写我上当受骗的文章下面，靠，我倒霉你还在下面叫好！！！

类型七，论坛灌水积分党

这种贴子的出现源于很多人士想在天涯看连载小说，但是天涯一些论坛的功能只有一定积分才能使用，于是出现了一大堆类似的帖子，专门用来刷积分。

但是，拜托，我这里不是天涯论坛。

类型八，狗咬狗

我想说的是，WP的垃圾评论早已出了，akismet。

类型九，两个蠢蛋型

你老板够蠢，居然不知道你在假装工作，你更蠢，明知道他在假装付你薪水，还为他工作浪费时间。

类型十，非人类

这位发评论的都说了，人家是咔咕。

类型十一，类新手型

刚开博客的新手大概都会有段时间喜欢去别人博客留这样的话

类型十二，alibibi

此位域名实在太个性。马云看到了就震精了。

类型十三，让我无语型

男科医生都来了，还自称砖家，请问前列腺能治吗？

Related Posts

• 修正关于Ajax comments的一个小问题 (39)
  很多人都用willin的Ajax comments，确实是一个非常好的功能，我也一直在用。 我用的版本还是很早期的版本了，期间willin进行了多次修改升级，我一直没动，甚至换了现在新主题还是使...
• 完美解决wordpress无限嵌套<二> 【邮件发送相关问题】 (80)
  但是，后来出现一个问题，让我不得不重新思考无限嵌套这一方式。这个问题就是邮件回复问题。了解我实现无限嵌套原理的，应该的都知道其实在对最后一层进行回复时，是在变相...
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)
  这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接...
• 补充《修改trackback样式，统一评论外观》中代码 (35)
  导航：#trackbacks代码           #代码解释 在《 修改trackback样式，统一评论外观 》中，我只是说了我对trackbacks的样式处理，并没有贴出代码，当然，原...
• 让你的评论框自由粘贴代码 (58)
  我前后试用了三种方法。 第一，我想写一个超级正则表达式，来直接将评论框中<code></code>包围的字符串中的“<”转换为“&lt;”。对于只有一对<code></code>标签...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7u

• 2010年09月6日, 天毅say: @QiQiBoY 汗死，原来是博主发的召唤，A.shun只是rt。好吧，更正我的错误，围观正确的人……
• 2010年09月6日, 天毅say: 接到A.shun的召唤前来围观……
• 2010年09月6日, QiQiBoYsay: @CF 速召唤推特党前来围观此人。。
• 2010年09月6日, CFsay: 以后我每天到你这发垃圾评论
• 2010年09月6日, 海派say: 大部分评论，最终目的都是打广告...不过有些BLOG对SEO是不起作用滴..
• 2010年09月6日, dereksay: @QiQiBoY 没办法啦，可删可不删
• 2010年09月5日, QiQiBoYsay: @derek 一般人肉手动写的，只能算小广告了，人家顺便点评了日志，还算不错了。。
• 2010年09月5日, QiQiBoYsay: @sayisee 已投

我原先觉得这个技术挺神秘的，实现起来应该比较困难，并且在网上也并没有找到相关的文章或者介绍。但是当我真正决定要去这样做时，却发现其实这个真的挺简单的，原理也容易理解。

lazyload，简单地说，就是在浏览器滚动到某个位置时再出发相关函数，实现页面元素的加载或者某些动作的执行。浏览器的滚动位置检测，可以通过一个定时器来循环检测，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断需不要要执行函数。我将这个方法写成了一个类，我自己博客即是使用我的这个方法。

（下面代码纯属自己的小试手，如果有不完善地方可以指出）

   1: function Lazyload(func, obj) {//obj目标节点对象, func要触发的函数

   2:     this.func = func;

   3:     this.obj = obj;

   4:     this.it = setInterval(function() {//2s检查一次

   5:         this.checkScroll();

   6:     }.bind(this), 2000);//bind为setInterval绑定lazyload对象，否则this会指向window对象

   7: }

   8:  

   9: Function.prototype.bind = function(obj) {//对象绑定

  10:     var __method = this;

  11:     return function() { 

  12:         return __method.apply(obj, arguments); 

  13:     };

  14: }

  15:  

  16: Lazyload.prototype.checkScroll = function() {

  17:     var scrollY = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0,//页面滚动条高度

  18:         seeY = window.innerHeight||document.documentElement.clientHeight,//浏览器可视区域高度

  19:         func = this.func;

  20:     if (Math.abs(this.getY() - scrollY) < seeY) {//当目标节点进入可视区域，即页面滚动条高度减去节点距页面顶部距离小于浏览器可视高度

  21:         clearInterval(this.it);//清除定时器

  22:         return func();

  23:     }

  24: }

  25:  

  26: Lazyload.prototype.getY=function(){//目标节点距页面顶部高度

  27:     var obj=this.obj;

  28:     tp = obj.offsetTop;

  29:     if (obj.offsetParent) while (obj = obj.offsetParent) tp += obj.offsetTop;

  30:     return tp;

  31: }

关于代码的一些解释都在注释里了。如何使用呢？

使用这个方法要通过new来新建类对象的方法。参数func即是要触发的函数，obj即是页面上某个节点对象，即当此obj节点进入可视区域时（浏览器滚动到此处）即触发func函数。比如，你要实现当浏览器滚动到页面上id为“test”的节点（b）时触发弹出窗口alert(‘yes’),可以这么做

   1: function a(){alert('yes');}//要出发的函数

   2: var b=document.getElementById('tests');//获取页面节点

   3: new Lazyload(a,b);//使用new关键字建立对象执行

以上就是我自己的lazyload的全部代码与实现方式了。当然，我相信它还有改进之处。

补充一些其他的东西：

我的代码中定时检测的时间设定是2s，也就是说每两秒去比较一次。如果你浏览器拖动太快，目标节点被很快的一闪而过，很可能此时就刚好没有执行checkScroll函数，所以也就不会触发动作了。你可以将时间改为更小的值（在第6行），如500ms，可以避免大多数的快速拖动造成的问题。当然，我觉得其实没必要，如果某人很快的拖动滚动条，说明他要浏览的东西在页面底部，那么其实是没必要加载他快速拖动过的节点的，所以2s我觉得是一个很合理的值。

另外一个问题是我的代码是只触发出现在可视区域中的节点动作，如果你想要实现在当前浏览的页面以上部分的节点全部要加载，那么可以将代码的第20行去掉Math.abs即可。如果要实现在滚动到距目标节点一定高度时就开始触发函数，那么可将20行的seeY改为seeY+200(200即为设定的距离高度)。

关于lazyload的一个具体的实现，就还拿图片的延迟加载来说吧。你可以将图片的地址都改成一个默认的小图片（这个可以在后台用php直接修改输出，也可以用js实现），将正真的图片地址存到图片的alt属性中（也可以指定一个自定义的属性），然后对每个图片绑定new lazyload，要触发的动作函数就是将alt中的值赋给src即可。这样，就实现了图片的lazyload（你就可以消灭jQuery，消灭jQuery的lazyload插件了，也就消灭了那100来K的JS文件）。如果再结合ajax技术，那么也就可以实现如我博客一样的模块延迟加载了。

Related Posts

• JavaScript页面文档初始化 window.onload的替代办法 (49)
  很早，大概去年就在mg12的博客看到他一篇很久以前的文章《 JavaScript 初始化装载方法 》，当时也没注意。这两天在做页面一些部分的延迟加载时，又想起了这个，因为使用window.onload...
• 评论框的简单计数器（无需改动模板，附带输入字数限制功能） (27)
  来过我博客的都知道，我博客很早在评论框右下角就有个小小的计数器，可以显示你在评论框中输入的字数。这个功能很简单，配合模板，其实一两句js代码就能搞定。偶尔有人向我问...
• 读者墙效果【二】- 头像自由拖拽 (46)
  上一篇博文《我的读者墙展示（附所用JS代码）》中我分享了自己所用的读者墙JavaScript部分代码。其实关于读者墙我还写了一个版本的js效果，不过离我最终的效果还有差距（最终要实...
• 我的读者墙展示（附所用JS代码） (47)
  好多人都在博客上弄了个读者墙，我之前也搞过，但是换了新主题之后就没再添加了。所以抽了个时间，在links页面加了读者墙，展示的是最近三个月内的评论数量在前72名的访客头像...
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7s

• 2010年09月5日, 捷易通say: 原来是lazy技术呀！
• 2010年09月2日, QiQiBoYsay: @oYoo 本来就是挺酷的技术。。。
• 2010年09月2日, oYoosay: 延迟加载，感觉很酷。
• 2010年08月31日, QiQiBoYsay: @阿吴 呵呵。。没事瞎折腾的。。
• 2010年08月31日, 阿吴say: 你的博客好多赞的技术
• 2010年08月31日, 小邪say: @liuqiqi 哇，果然够专业，嘿嘿 ~ 谢啦 ~
• 2010年08月30日, liuqiqisay: @小邪 简单。。。直接给你教程。。http://www.neoease.com/wordpress-at-reply/
• 2010年08月30日, 小邪say: 对鸟，能不能把下面这段代码也改成纯js的 ~ 那样我就可以脱离jquery的100多K鸟 ~ <script type="text/javascript"> jQuery(document).ready(function($){$('.reply').click(function(){var atid='"#'+$(this).parent().attr("id")+'"';var atname=$(this).prevAll().find('cite:first').text();$("#comment").attr("value","<a href="+atid+" rel="+'"nofollow"'+">@"+atname+" </a>, ").focus()});$('.cancel-comment-reply a').click(function(){$("#comment").attr("value",'')})}) </script>

但是，后来出现一个问题，让我不得不重新思考无限嵌套这一方式，从而也就有了本文——《完美无限嵌套<二>》。这个问题就是邮件回复问题。了解我实现无限嵌套原理的，应该的都知道其实在对最后一层进行回复时，是在变相的对倒数第二层进行回复。很多人可能在使用willin修改的邮件发送方式，即是通过hook到comment_post，获取新评论的父级评论ID，如果ID不为0，说明这是一条子评论，然后就将邮件发送给父级评论。父级评论的邮箱是来自get_comment()函数获取数据库查询。前面已经说了，对最后一层的回复是变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

我注意到上面的问题，来自于一次我在开发自己的ajax评论时对我在最后一层的评论进行回复测试时，结果zww跑来跟我说，收到一大堆我的邮件。我研究了一下，发现存在上述问题，在搁置了N天后，今天我终于解决了它。

这个问题的解决需要换个思路，不能还是局限于通过查询一条评论的父级ID来判断需不需要发送邮件。我注意到我的每条评论中都有@回复链接，而其中的href中就包含了被回复者的评论id，所以我就从这里着手，想通过获取评论中的存在的@回复来进行邮件发送。而且这种方式，你可以一次回复多个人，比如你想在一条评论里同时回复A、B、C三个人，你只需要依次点击A、B、C下面的reply按钮（如果不想让评论框出现在这三人任何一人下方，则点击一下取消回复，评论框会回到底部，这条回复会被当做一条主评论。但是，别担心，评论框内容不会清空，你的回复依然会通过邮件发送至这三人），然后书写回复内容即可。

主要代码如下：

   1: function comment_mail_notify($comment_id) {

   2:     $comment = get_comment($comment_id);//根据id获取这条评论相关数据

   3:     $content = $comment->comment_content;

   4:     //对评论内容进行匹配

   5:     $match_count=preg_match_all('/<a href="#comment-([0-9]+)?" rel="nofollow">/si',$content,$matchs);

   6:     if($match_count>0){//如果匹配到了

   7:         foreach($matchs[1] as $parent_id){//对每个子匹配都进行邮件发送操作

   8:             SimPaled_send_email($parent_id,$comment);

   9:         }

  10:     }elseif($comment->comment_parent!='0'){//以防万一，有人故意删了@回复，还可以通过查找父级评论id来确定邮件发送对象

  11:         $parent_id=$comment->comment_parent;

  12:         SimPaled_send_email($parent_id,$comment);

  13:     }else return;

  14: }

  15: add_action('comment_post', 'comment_mail_notify');

然后就是发送邮件的函数，简单给个思路

   1: function SimPaled_send_email($parent_id,$comment){

   2:     $admin_email = get_bloginfo ('admin_email');//管理员邮箱

   3:     $parent_comment=get_comment($parent_id);//获取被回复人（或叫父级评论）相关信息

   4:     $author_email=$comment->comment_author_email;//评论人邮箱

   5:     $to = trim($parent_comment->comment_author_email);//被回复人邮箱

   6:     $spam_confirmed = $comment->comment_approved;

   7:     if ($spam_confirmed != 'spam' && $to != $admin_email && $to != $author_email) {

   8:         ....//自由发挥

   9:         wp_mail( $to, $subject, $message, $headers );

  10:     }

  11: }

至此，就完美解决了邮件发送混乱这一问题。你可以在我这里测试，你的任何回复都会准确无误的发送至你要回复的人。

需要注意的是，对评论内容进行匹配@回复相关内容时，你的@回复需要符合上面正则里的规则。我建议，在向评论框里添加@回复时，依照此格式

   1: <a href="comment-"$id>@XXX </a>

你不用画蛇添足去往里面添加什么rel=”nofollow”，因为wordpress会自动给评论里的链接添加这一属性。

然后，当然，只以上部分两段代码就完了吗？如果有人引用了另外一条带@回复的评论，是不是也应该先剥离<blockquote>标签内容里的内容呢？否则，被引用人所回复的那个人不是也会被发送一封邮件吗？这些不是本文内容，所以不在此讨论，仅作提醒。

Related Posts

• 完美解决WordPress嵌套回复的层深问题（无限嵌套）<一> (50)
  很久以前看到过此篇文章《JQuery为WordPress的嵌套回复添加@reply功能》，文中所讲方法也很简单，就是利用jQuery的 克隆功能（clone()）将最后一层的父级评论的回复按钮给copy到最后一层...
• 围观wordpress中文圈内好玩的spam (123)
  类型九，两个蠢蛋型 你老板够蠢，居然不知道你在假装工作，你更蠢，明知道他在假装付你薪水，还为他工作浪费时间。...
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)
  这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接...
• 补充《修改trackback样式，统一评论外观》中代码 (35)
  导航：#trackbacks代码           #代码解释 在《 修改trackback样式，统一评论外观 》中，我只是说了我对trackbacks的样式处理，并没有贴出代码，当然，原...
• 修正关于Ajax comments的一个小问题 (39)
  很多人都用willin的Ajax comments，确实是一个非常好的功能，我也一直在用。 我用的版本还是很早期的版本了，期间willin进行了多次修改升级，我一直没动，甚至换了现在新主题还是使...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7n

• 2010年09月5日, QiQiBoYsay: @zwwooooo 恩，确实，谢谢提醒哈。
• 2010年09月5日, zwwooooosay: 折腾了，文章代码有个小错误，第3行代码：$content=comment->comment_content;少了$
• 2010年09月5日, QiQiBoYsay: @winy 嵌套层数足够深，就不会出现邮件发送混乱问题。你的不用改了。

  变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

  这句在我这里是指如果你对第五层进行回复，其实是在对第四层进行回复，所以如果使用wilin原来的邮件回复，就会发送到第四层那个人那里去了。
• 2010年09月5日, winysay: @QiQiBoY 就是这个意思
• 2010年09月5日, winysay: @QiQiBoY 没说清楚，我的意思是如果嵌套层数足够深，就不会出现

  变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

  这种情况了，是不是？
• 2010年09月5日, QiQiBoYsay: @winy 我是说嵌套1000层也能发送。。。 没有使用我的那个无限嵌套方法，而是通过修改wordpress嵌套层数来达到无限嵌套的，就没必要用我这个邮件发送了，因为每条回复总有一个唯一的父级评论。
• 2010年09月5日, QiQiBoYsay: @winy 嵌套100层也能正确发送。。。
• 2010年09月5日, winysay: 我嵌套999层，不会乱吧，懒得改了，没有多重@不会乱

如何使用？可以在后台添加小工具，或者直接调用相关函数，详查下文支持边栏小工具一栏

文章导航：#为什么使用边栏回复？

                   #防止重复评论

                  #完美无限嵌套

                  #支持widget小工具

                 #其他说明

                 #插件简介

之前在《Ajax版即时侧边栏评论回复功能》一文中我已经提到了我的侧边栏回复，我将其稍作改造，做成了今天的这个插件，名字叫WP RC Reply AJAX，全称是wordpress recent comments reply ajax。

从名字上看，第一个单词——wordpress，顾名思义，就是为wordpress而开发。recent comments，最新评论，即是可以在侧边栏显示最新评论，这个功能和mg12的wp-recentcomments插件几乎一模一样，支持ajax翻页、查看单条评论。当然，mg12的插件设置很丰富，而且也有jQuery版本，可以在翻页时实现一些特效。我的在第一版中就只提供了基本的功能，特效并未添加，以后的版本中会更新上去。当然，都是原生JS，不会有jQuery版本。reply，表明了这个插件最重要的一个功能，即是侧边栏回复。还不知道此为何物的同学，可以移步到我的侧边栏，点击任一评论后边的右向双箭头，进入单条评论查看模式，会出现一个回复按钮，点击之后就可以再侧边栏对这条评论进行回复了。ajax，即是评论支持ajax方式提交。这项是不可选的，如果浏览器支持JavaScript，那么就一定是ajax方式提交的，如果不支持，那么还可以以普通方式提交。

为什么要使用侧边栏回复

也许有人会这么问。我们博客每天都有人留言评论，但是这些评论并不都在同一个页面。而通过边栏的最新评论，我们可以对最新评论一目了然。如果你的最新评论支持ajax翻页查看，那就更好了，无论新收到了多少条评论，都可以通过翻页方式查看到，不必到后台，更不必一页一页的去翻找评论了。同时，我的插件提供了侧边栏回复功能，也就是说你在翻看这些评论的时候，就可以即时对它们进行回复了。而且是通过ajax方式，你回复完一条，可以点击返回按钮，继续对下一条评论进行回复。这些操作中，你并不需要跳转页面，因为一切都是通过ajax异步方式进行的。

防止重复评论

而且，我提供了简单的防止重复回复的功能。边栏的评论一条接一条，我们可能在连续的回复过程中会记不清已经对谁回复过了，这样就会出现对同一条评论回复多次的情况。但是，不用担心，插件已考虑到此情况，回复过的评论在你试图再次回复时，会出现提醒。

完美嵌套，无限嵌套式回复

很多人使用嵌套评论。因为在侧边栏显示的评论，我们很难判断其到底是不是嵌套的最后一层了，如果对最后一层的评论回复了，那么就是无效的嵌套回复，这条回复会被当做一条全新的主评论显示。我的插件解决了这一问题，你可以在边栏放心的进行回复，无论你使不使用嵌套，都不必担心，插件会完美解决你的嵌套难题。

回复会自动添加@回复，免去你折腾麻烦。

提高访客体验，折叠隐藏信息输入框

对于回复时插入的回复框，支持老访客折叠信息框，提高访客体验。同时支持登陆者隐藏信息框。

支持widget小工具

你可以直接在后台小工具设置页面添加“边栏回复小工具”到你的边栏。

如果不想使用小工具，我也提供了一个输出函数

   1: <?php wp_rc_reply_echo ($number=8); ?>

函数只有一个参数，即是显示的评论条数。其直接在要显示的地方进行调用即可。其它参数，如头像大小，截断长度等，请到后台插件设置页面进行设置。

其它说明

后台设置中有一个“太短的评论自动换行”。这个如果不清楚是做什么的，就不要勾选，不要管它即可。我在此简单说明一下，这是我插件中的一个小功能，即是遇到很短的评论，不足设置的截断长度一般的评论，会自动在评论者姓名和评论内容之间加上换行符。当然，这一前提是你设置的头像大小大于32，因为大于32，一般头像右边可以显示两行评论内容（如我的最新评论），但是如果是太短的评论，则只能占据一行，那么下一行就会空了，此时就会显得不太美观，所以需要加上一个换行符，是评论内容在第二行显示。效果请查看我的边栏最新评论，注意观察一条长评论和一条段评论的显示上的区别。也可以参看左上角的截图，winy的评论是在第一行就开始显示的，而liuqiqi的评论却是在第二行显示！！因为liuqiqi的评论太短不足一行，如果显示在第一行，那么第二行就会留下空白，看起来就不那么紧凑了。

另外需要说明的是，插件自带了一个css文件，主要是用来控制翻页按钮的摆放，因为担心一些人对css不太了解，不能将三个按钮很好的摆在一条线上。其它地方都没用css美化，所以需要使用者自行根据自己主题进行些许css设置。

下面是对此插件的一些描述：

Plugin Name: WP RC Reply AJAX

Plugin URI: http://www.qiqiboy.com/plugins/

Description: 1. show recent comments at sidebar. 2. with it, you can reply everyone from widget sidebar by Ajax type.

Version: 1.0.0

Author: QiQiBoY

Author URI: http://www.qiqiboy.com

Download: http://wordpress.org/extend/plugins/wp-rc-reply-ajax/

---

插件名称：WP RC Reply AJAX （最新评论及侧边栏回复）

插件描述：显示最新评论以及在侧边栏回复评论

当前版本：1.0.0

插件作者：QiQiBoY

插件简介：

• 在侧边栏以小工具形式显示最新评论，支持ajax查看、翻页。
• 支持在边栏即时回复评论。（点击一条评论右边的双向箭头，进入单条评论查看模式，然后即可点击右边的回复按钮进行回复操作）
• 边栏回复支ajax方式提交，无需刷新页面，可连续回复。
• 评论提交前可进行简单的错误检测，减少服务器响应消耗。
• 边栏回复支持嵌套评论、支持无限级嵌套。
• 边栏回复自动添加@回复。
• 防重复评论设置，以免评论过快，对一些评论进行重复回复。
• 插件下载：官方目录

插件使用：方法一：直接在后台设置相关选项，然后在添加小工具处向边栏添加“边栏回复小工具”。

方法二：在要显示最新评论的地方（如边栏某个位置或者新建一个页面模板），直接调用

   1: /*

   2:  *输出打印最新评论列表

   3:  */

   4:  

   5: <?php wp_rc_reply_echo('number=&length=&size=&at='); ?>

   6:  

   7: /*此函数支持四个可选参数，此处的参数设置会覆盖掉后台的设置。

   8:  *number是设置评论数量，默认为8；

   9:  *length是设置评论阶段长度，默认为30；

  10:  *size是设置头像的尺寸，默认为32；

  11:  *at是设置自动添加@回复，其值表示从第几层开始加入@回复。默认为0,0表示不添加@回复。

  12:  *这四个参数的值都是整数。

  13:  *如果不清楚参数含义，请不要盲目添加参数。如你可以直接使用<?php wp_rc_reply_echo(); ?>或<?php wp_rc_reply_echo('number=10&length=25'); ?>

  14:  *参数是可以省略的，不区分先后位置。

  15:  */

更多插件使用信息：请点击浏览此文

最后还要赞一下官方的速度，下午四点的时候我插件开发接近尾声，然后向官方提交了插件地址申请，然后在大概晚上九点半的时候便收到了通过邮件，我便立马将插件上传了官方目录。

******有觉得好用的同学欢迎在自己博客中推荐一下O(∩_∩)O~********

Related Posts

• 插件发布：little wp to twitter (47)
  #缓推时间 —— 即当发布日之后，一条更新信息已经同步到twitter，但此后你可能会对日志稍作修改，因为我们很少只点击一次 发布 就完成日志发布的，发布后对日志进行小敲小打是...
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 【SimPaled篇】Introduce My Blog Theme For You (73)
  声明：博客顶部仿自微软全球MSN首页(http://www.msn.com)，仅供本人学习研究之用，未用之牟利。 此主题支持CMS式首页与普通文章列表式首页风格。CMS首页绝大部分元素采用ajax方式装...
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)
  这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接...
• 【效果测试展示篇】Ajax版即时侧边栏评论回复功能 (68)
  自写了《博客加入若干Ajax效果》以来，在博客上陆续添加启用了一些ajax效果，一方面丰富博客体验，一方面也当做练习学习js的一种实践吧。昨天的时候，将wilin版的侧边栏最新评论...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7m

• 2010年09月3日, Fanrsay: 好强大！支持下......原生吧.....原生...
• 2010年08月30日, 菠萝say: @liuqiqi 嗯，我再去看看。
• 2010年08月30日, liuqiqisay: @菠萝 图片上传插件小邪貌似做过呀。。。。。你问问他。。。
• 2010年08月30日, 菠萝say: @QiQiBoY 目前好像使用得不多，但确实是我进我的博客后台，第一个看到这个插件的，居然是你的，厉害!! 对了，QiQi，我有个代码，能不能简单实现以插件的形式插入后台？ 或是你能不能开发一个图片上传插件？
• 2010年08月29日, davidsay: 这个好像很方便哦。。支持下。
• 2010年08月28日, QiQiBoYsay: @羽中 适当利用，提高访客体验。。
• 2010年08月28日, 羽中say: 有点意思，话说ajax太多了也不好啊
• 2010年08月27日, QiQiBoYsay: @静夜燃香 。。。

腾讯微博页有一点很让我喜欢，那就是将鼠标放到用户头像上一会儿，就会在头像上出现一个小的窗口，显示用户的一些资料及其它信息。如右图，这样可以及时方便快速的查看自己及其他人一些相关的信息。

所以我便copy了它的这个功能，整合到了wordpress主题上。

效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓名，邮箱和所用的操作系统、浏览器等信息。另外头像下方是评论者所用的邮箱在我博客所发表过的评论的总数。邮箱我将前三位转为*号了，因为隐私的关系。其实这种后期请求过来的数据，是不会被搜索引擎及各种抓取工具捕获的，所以不存在邮箱账号会被采集到，被滥发垃圾邮件的危险，我即使直接显示了也没关系的。

前台JS处理时还要注意一点，那就是避免重复查询，因为一个页面上可能出现一个用户评论过多次的情况，那么如果鼠标放到这个用户的每条评论的头像上都向服务器发送查询的话，那么就很浪费了。但是，这些访客又没有在博客注册，没有一个唯一的ID能代表其身份。唯一可以证明其身份的就是邮箱了，但是邮箱又不能直接公布，所以我将每个访客的邮箱通过md5加密后的字串的前十位当做这个访客的唯一ID。在对一个访客信息查询后，将这个显示信息div的id标记为访客ID。如果后面再将鼠标放到同一位访客头像上，则会在页面上寻找这个具有唯一id值的信息显示div，如果找到了就直接显示这个div了，不必再次发送查询。其实腾讯微博的做法是在每条微博的<li>标签中加入一个具有唯一字串的rel属性，每个用户具有唯一的字串。它是通过这个字串来标识不同的用户的。
这个到底该怎么做呢？首先当然是获取页面上每个评论了。然后再对头像上的鼠标移上事件设置动作监听addcard

   1: (function(){

   2: //一些打包的简便方法

   3:     function $(id) {//根据ID获取对象

   4:         return document.getElementById(id)

   5:     }

   6:     function $$(c, t, p) {//根据class值获取对象数组

   7:         var at = p.getElementsByTagName(t);

   8:         var ms = new Array();

   9:         var r = new RegExp('(^|\\s)' + c.replace(/\-/g, '\\-') + '(\\s|$)');

  10:         var e;

  11:         for (var i = 0; i < at.length; i++) {

  12:             e = at[i];

  13:             if (r.test(e.className)) {

  14:                 ms.push(e)

  15:             }

  16:         }

  17:         return ms

  18:     }

  19:     function removeNode(obj){//移除页面某一节点

  20:         if(typeof obj == "string")$(obj).parentNode.removeChild($(obj));

  21:         else obj.parentNode.removeChild(obj);

  22:     }

  23:     function insertBe(obj,tar){//在一个节点前插入另一个节点

  24:         tar.parentNode.insertBefore(obj,tar);

  25:     }

  26:     function insertAf(obj,tar){//在一个节点后插入另一个节点

  27:         tar.parentNode.insertBefore(obj,tar.nextSibling);

  28:     }

  29:     function addListener(element, name, observer, useCapture) {//设置监听

  30:         if (element.addEventListener) {

  31:             element.addEventListener(name, observer, useCapture)

  32:         } else if (element.attachEvent) {

  33:             element.attachEvent('on' + name, observer)

  34:         }

  35:     }

  36:     //

  37:     var lis = $$('comment', 'li', $('thecomments'));//取得页面上div#thecomments下具有class=comment的li标签集合li.comment

  38:     for (var i = 0; i < lis.length; i++) {

  39:     (function() {

  40:         var id = lis[i].id,it;

  41:         if (/^li-comment\-[0-9]+$/.test(id)) {

  42:             var avatar=$$('avatar', 'img', $(id))[0];

  43:             addListener(avatar,'mouseover',function(){addcard(id,it)},false);//设置监听

  44:         }

  45:     })();

  46:     }

  47: //...代码未完，继续向下看

  48: })();

addcard()具有两个参数，一个是这条评论的id，一个是个定时器。我们就是根据id来发送请求的。接下来是发送请求了。

   1: function addcard(id,it){

   2:         clearTimeout(it);//先清除下定时器

   3:         if(document.getElementsByTagName('ucard')||0){//先将页面上所有未消失的信息显示框都隐藏

   4:             var ucards=$$('ucard','div',$('thecomments'));

   5:             for(var i=0;i<ucards.length;i++)

   6:                 if(ucards[i].style.display=='block')

   7:                     ucards[i].style.display='none';

   8:         }

   9:         id=id.replace('li-comment-','');

  10:         var ucard,cardid=$('comment-'+id).className;

  11:         if($(cardid)||0){//如果页面上存在具有唯一cardid的div，就直接将它移动到目标位置，设置display，让它显示出来

  12:             ucard=$(cardid);

  13:             insertBe(ucard,$('li-comment-'+id).firstChild);

  14:             ucard.style.display="block";

  15:             addListener(ucard,'mouseout',function(){delcard(cardid,it)},false);//设置鼠标移下动作监听

  16:         }else{

  17:             ucard=document.createElement('div');ucard.className='ucard small';ucard.style.display="block";ucard.id=cardid;//将信息框的id值设置为唯一cardid

  18:             it=setTimeout(function(){//定时1.5s后发送查询请求

  19:                 var xmlHttp,url='?action=showCard&id='+id;//创建xmlhttp对象,url的主要参数是id，后台就是根据id从数据库中获取数据返回前台的

  20:                 try {

  21:                     xmlHttp = new XMLHttpRequest()

  22:                 } catch(e) {

  23:                     try {

  24:                         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

  25:                     } catch(e) {

  26:                         try {

  27:                             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")

  28:                         } catch(e) {

  29:                             alert("Your browser does not support ajax!");

  30:                             return false;

  31:                         }

  32:                     }

  33:                 }

  34:                 xmlHttp.open("GET", url, true);

  35:                 xmlHttp.setRequestHeader("Content-type", "charset=UTF-8");

  36:                 xmlHttp.onreadystatechange = function() {

  37:                     if (xmlHttp.readyState == 4 || xmlHttp.readyState=="complete") {

  38:                         if (xmlHttp.status == 200) {

  39:                             var data = xmlHttp.responseText;

  40:                             ucard.className=ucard.className.replace(/ small/,'');

  41:                             ucard.innerHTML=data;//将数据填入这个div中

  42:                         } else {

  43:                             removeNode(ucard);//获取数据失败就移除这个节点

  44:                         }

  45:                     }

  46:                 };

  47:                 xmlHttp.send(null);

  48:                 insertBe(ucard,$('li-comment-'+id).firstChild);//将节点插入到评论li标签下的第一个节点前面

  49:                 addListener(ucard,'mouseout',function(){delcard(cardid,it)},false);

  50:             },1500);

  51:         }

  52:     }

  53:  

  54: function delcard(cardid,it){//使信息框隐藏，这样处理目前有些问题，我换了一种方式，代码很多，下次再说，这里还是用原始方法吧

  55:     clearTimeout(it);

  56:     it=setTimeout(function(){

  57:         $(cardid).style.display="none";

  58:     },3000);

  59: }

  60:  

  61: addListener($('thecomments'),'click',function(){//加上点击评论列表区域就隐藏信息显示框

  62:     if(document.getElementsByTagName('ucard')||0){

  63:         var ucards=$$('ucard','div',$('thecomments'));

  64:         for(var i=0;i<ucards.length;i++)

  65:             if(ucards[i].style.display=='block')

  66:                 ucards[i].style.display='none';

  67:     }

  68: },false);

OK，我已经贴出了所有我用到的前端JS代码。上面代码中你已经注意到了cardid=$(’comment-’+id).className这一句，这句是获取一个class属性值。有什么用呢？其实这个就是标识唯一访客的ID，我事先在评论列表输出时就给相应的div加上了这个class属性，如下图中的<div id=”comment-4143”…一行。

这串字符从何而来呢？其实是我修改了评论模板，加上了下面这个

   1: <div id="comment-<?php comment_ID(); ?>" class="<?php echo substr(md5($comment->comment_author_email),0,10) ?>">

将email加密后截断前十位输出。

到这里，我觉得该说的都说完了，至于后台，就看你要往前台输出显示什么信息了。其实我想也不会有几个人想要去折腾这个，我给出前台JS代码仅作参考，你可以修改用于其它用途。

最后展示一下自我使用wordpress以来所有评论者中评论数最多的人，我没专门去查询过这个，只是在做这个资料显示功能是，按email统计了每个email的评论数，我在前台看了几个人的，发现应该是zwwooooo和小邪的评论最多，位于前两位，到本文发表时分别是88条和76条。你也可以查看你自己的相关信息，只要点击自己的头像或者将鼠标放到自己头像上就行了。当然，一般是展示前三名，但其实第一名是我了，你们查看我的会显示评论：N条，哈哈，评论统计大于100条就不再显示具体条熟了，只显示N条。嗯，都过N的人多了，我再分等级，评论也能升级了。想要显示N条，那就努力评论到100条吧。(下图前两位是评论数最多，后两位是今天被我收走沙发的两位同学O(∩_∩)O~)

Related Posts

• 添加引用按钮——轻松打造属于你的WordPress引用回复功能 (26)
  之前的《完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>》这篇文章中我讲了自己关于实现WordPress无限嵌套的一个思路。今天又有同学询问引用功能是如何实现的，我就简...
• 【SimPaled篇】Introduce My Blog Theme For You (73)
  声明：博客顶部仿自微软全球MSN首页(http://www.msn.com)，仅供本人学习研究之用，未用之牟利。 此主题支持CMS式首页与普通文章列表式首页风格。CMS首页绝大部分元素采用ajax方式装...
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)
  这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接...
• 博客加入若干Ajax效果 (58)
  评论框的简单计数器（无需改动模板，附带输入字数限制功能） 添加引用按钮——轻松打造属于你的WordPress引用回复功能 wordpress高亮搜索结果+实现关键字前后截断显...
• 补充《修改trackback样式，统一评论外观》中代码 (35)
  导航：#trackbacks代码           #代码解释 在《 修改trackback样式，统一评论外观 》中，我只是说了我对trackbacks的样式处理，并没有贴出代码，当然，原...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7j

• 2010年09月3日, QiQiBoYsay: @Fanr
• 2010年09月3日, Fanrsay: 太强大了太强大了！！
• 2010年09月3日, QiQiBoYsay: @安庆法律人 是的。。。。
• 2010年09月3日, 安庆法律人say: @QiQiBoY 要是没MORE就用不了。
• 2010年08月29日, 深白色say: 哈哈 看到林木木的頭像被拿來當示範了
• 2010年08月29日, yetonesay: 这个效果太牛啦
• 2010年08月28日, QiQiBoYsay: @joyla 没办法，咱不懂优化。。
• 2010年08月28日, joylasay: 发现博客显示有点慢！

声明：博客顶部仿自微软全球MSN首页(http://www.msn.com)，仅供本人学习研究之用，未用之牟利。

此主题支持CMS式首页与普通文章列表式首页风格。CMS首页绝大部分元素采用ajax方式装载，随浏览器滚动条向下滚动加载(Lazyload)，极大地节省了服务器消耗，也加快了页面载入时间（参考本博首页）。普通文章列表式首页采用ajax动态文章加载，实现首页更多文章的展示而不影响页面大小及载入（参考本博blog页面）。

1. CMS首页的slidershow轮换大图和顶部的“我的作品”中图片也都采用lazyload方式，减少页面下载时大图片请求,从而加快页面文档的装载。
2. CMS首页“最新文章”采用AJax技术，实现无刷新翻页，点击“more”按钮可以更新此部分文章。
3. CMS首页“分类日志”采用lazyload方式，并不随页面初始化装载，而是在浏览器滚动条滚到时才会发出ajax请求装载。每个分类栏目右上角有“more+”按钮，点击可以通过ajax方式实现此分类下文章的翻页浏览。
4. 博客侧边栏的每个栏目都是采用lazyload方式，随滚动条装载。文章评论也是此方式。
5. 边栏的最新评论支持翻页浏览、单条评论查看、即时ajax回复等功能。其中最新文章(recent post)部分支持more无限下滚查看。——注：边栏回复参考《无时不在的评论 侧边栏即时回复功能》
6. 发表评论部分支持隐藏访客、管理员信息，实时显示gravatar头像，输入字数统计等，文本输入框支持系列编辑器，自由粘贴代码。——注：实时头像参考《Email输入框处实时显示gravatar头像+email验证+动态信息提醒》，编辑器参考《为评论框添加文字格式化编辑器》，自由粘贴代码参考《让你的评论框自由粘贴代码》，字数统计参考《评论框的简单计数器（无需改动模板，附带输入字数限制功能）》
7. 评论支持无限级嵌套，评论引用、回复功能。——注：无限嵌套参考《完美解决WordPress嵌套回复的层深问题（无限嵌套）》，引用功能参考《添加引用按钮——轻松打造属于你的WordPress引用回复功能》
8. 原生JS实现ajax发表评论。发表评论无需刷新页面即可在边栏最新评论处显示。
9. 评论支持显示文字颜色、大小，图片、音乐等。——注：参考《让评论可以插入图片，更改文字大小、颜色》
10. 内置搜索支持高亮文字、关键字处截断等。——注：参考《wordpress高亮搜索结果+实现关键字前后截断显示。。。 》
11. 联系页面模板、友情链接模板、留言板模板等。。——注：邮件联系表单参考《创建一个可设置cookie相关信息的内置Email联系表单》
12. 页面智能滑动锚点、内置动画特效类，实现一些动画效果的的简单调用。
13. 图片自动按比例限制大小，自动链接大图。——注：参考《我是如何处理文章中图片的》
14. 主题不依赖任何插件，不依赖jQuery。
15. 后台设置支持。
16. 不支持IE6。不解释。

Related Posts

• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 博客加入若干Ajax效果 (58)
  评论框的简单计数器（无需改动模板，附带输入字数限制功能） 添加引用按钮——轻松打造属于你的WordPress引用回复功能 wordpress高亮搜索结果+实现关键字前后截断显...
• 就用这个主题了，不换回老主题了。( ⊙o⊙?) (39)
        当我看关了这款色彩鲜艳的主题，再切换回老版本主题时，视觉上的落差让我实在无法接受那灰蒙蒙的界面。虽说可以给它换副搭色，但是我其实是想试试嵌套...
• 新主题测试进行时。。。 (32)
  之前来过的同学这次再来肯定会眼前一亮，以前那个灰蒙蒙，有点乱的页面换成了现在蓝色主题（bluePaled）。 我又要纠结了，刚发现百度快照更新到当日了。之前都是一周更新一次，...
• 纠结的这几天。。。。。。 (10)
  这个主题暂定名bluePaled，也许会公开发布，也许我会送给别人私用。但是，这一切都要先等到解决了邮件回复问题后。希望有JavaScript，php方面的高手能与我指导一二。即如何自动给回...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7f

• 2010年08月31日, QiQiBoYsay: @Ray Chow 要不lazyload，悲剧的网速下要等更长时间。。。。
• 2010年08月31日, Ray Chowsay: 我觉得 LazyLoad 的地方太多了……我们这里悲剧的网速要等一段时间
• 2010年08月19日, QiQiBoYsay: @laowi 呵呵，其实细节处我好多忽略掉的的。。还请多多提意见
• 2010年08月19日, laowisay: 看似简单 其实挺精致的 细节做的很好啊
• 2010年08月16日, QiQiBoYsay: @underone 额。。你把鼠标放到上面你的评论的你自己的头像上看一下，是IE7呀。。 恩，window 7系统。。应该是IE8的兼容模式。。
• 2010年08月16日, underonesay: @liuqiqi 不能，只有IE8...
• 2010年08月16日, QiQiBoYsay: @MOPVHS 今天是保存草稿的不小心当发布发布出去了，我没设置预发布，还是我手动发布的。。
• 2010年08月15日, MOPVHSsay: @QiQiBoY 原来如此~~~我比较喜欢预发布~~~

1.在评论下插入“回复”按钮

这个当然是能够直接从后台输出页面时加上最好了。就拿现在最流行的那个带头像最新评论来说，可以在foreach循环输出部分的加入回复按钮。这个按钮包含的动作处理就用“onclick”，所以要在此添加

   1: <a id="rc_comment-reply-link" href="javascript:void(0)" onclick="rc_reply(arg1,arg2(,...))">回复</a>

调用函数rc_reply()中我们要传递进去一些需要的参数，那么需要什么呢？因为点击回复按钮后我们是要在此插入评论的表单，而wordpress的发表评论表单包含用户名（author）、邮箱（email）、网址（url）和评论框（comment），但是除此之外，其实还有两个参数，他们是隐藏的input，分别是评论所在页面ID（comment_post_ID）和嵌套时父级评论ID（comment_parent）。这两个参数是必不可少的，author email url则不是必须的，如要你要实现自动填入cookie中访客相关信息，则可以将这三个也当做参数传递。所以，完整的回复按钮如下

   1: <a id="rc_comment-reply-link" href="javascript:void(0)" onclick="rc_reply('<?php $comment->comment_ID ?>', '<?php $comment->comment_post_ID ?>')">回复</a>

2.点击回复后在评论下插入评论表单

这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接将表单以串形式赋值到一个js变量，点击回复后直接在页面中插入。这两种方法各有各的好，我是使用第二种，这种方法·较第一种更好接受参数。

一个完整的大致的表单如下：

   1: <div id="rc_respond">

   2:     <form id="rc_commentform" method="post" action="http://你的域名/wp-comments-post.php">//你的域名最好手写上去，如果使用第一种方法，则可以通过wp的the_bloginfo获取博客地址，使用第二种方法则可用window.location.host等。建议直接写上自己的博客地址

   3:         <p><input type="text" tabindex="1" size="22" value="" id="rc_author" name="author"><label for="author"><small>Name</small></label></p>

   4:         <p><input type="text" aria-required="true" tabindex="2" size="22" value="" id="rc_email" name="email"><label for="email"><small>Mail</small></label></p>

   5:         <p><input type="text" tabindex="3" size="22" value="'" id="rc_url" name="url"><label for="url"><small>Website</small></label></p>

   6:         <p><textarea tabindex="4" rows="5" cols="35" id="rc_comment" name="comment"></textarea></p>

   7:         <p><input type="submit" value="Submit" tabindex="5" id="rc_submit" name="submit">

   8:         <input type="hidden" id="rc_comment_post_ID" value="'" name="comment_post_ID">

   9:         <input type="hidden" value="" id="rc_comment_parent" name="comment_parent"></p>

  10:     </form>

  11: </div>

使用第种方法你就将这个表单所在的div#rc_respond加上style=”displaynone“。如果是使用第二种方法，则可以在js中将这个变成字符串形式交给一个变量。

3.相关JS处理部分

本来想要贴一段代码的，但是后来发现这段代码和具体的页面结构结合很深。由于大家的模板千变万化，所以直接贴出某一具体的代码很可能会误导一些人，所以我就说一下JS里需要处理的部分。首先是要将表单插入到正确的位置，如果你的表单预先输出在页面上，此时就可以使用结点操作将表单移动到需要的位置（如js的appendChild、insertBefore等，以及jQuery的一些结点操作）；如果你的表单还是一窜字符串存在js变量里，则可用innerHTML方式写入到页面的位置上或者是jQuery的html()方法。当然，最重要的是向表单中的comment_post_ID和comment_parent=中填入相关参数，这两个参数值已经是作为函数的参数传递进来了，只需要将值填入即可。

4.解决嵌套问题

边栏的最新评论你并不知道是不是最后一层回复了，即使知道，我们也要想办法能够对其进行回复。如果不对嵌套做相关处理，如果是最后一层评论，你即使回复了，也是无效的，仍然会被当做主评论显示。所以我们要知道一条评论目前的所在层深。怎么取得呢？我们可以循环查询数据库中一条评论表中的commet_parent键值，如果不为0，则说明他有父级评论，则再去查询它的父级评论的comment_parent键值，依次循环。

   1: //这段代码依然是加在后台foreach循环中

   2: $comment_depth = 1;//层深初始化为1

   3: $tmp_c = $comment;$comment_parent

   4: while($tmp_c->comment_parent != 0){//循环查询

   5:     $comment_depth++;

   6:     $tmp_c = get_comment($tmp_c->comment_parent);

   7: }

   8: //关键处，这里依然是用了父级ID替换方法，将对最后一层的回复替换为对倒数第二层的回复

   9: if($comment_depth < get_option('thread_comments_depth'))

  10:     $comment_parent=$comment->comment_ID;

  11: else $comment_parent=get_comment($comment->comment_parent)->comment_ID;

然后你就可以用$comment_parent去替换第一步中的$comment->comment_ID。

做完以上四步，基本上边栏回复的雏形就完成了。当然，此时你回复后点击提交会跳转刷新页面，并不是ajax方式，其实这个也简单，你甚至可以照搬你文章评论处的ajax提交方式，只需改改相关id值即可。

OK，具体中有什么问题还可以留言询问，我尽量解决。

Related Posts

• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 添加引用按钮——轻松打造属于你的WordPress引用回复功能 (26)
  之前的《完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>》这篇文章中我讲了自己关于实现WordPress无限嵌套的一个思路。今天又有同学询问引用功能是如何实现的，我就简...
• 【SimPaled篇】Introduce My Blog Theme For You (73)
  声明：博客顶部仿自微软全球MSN首页(http://www.msn.com)，仅供本人学习研究之用，未用之牟利。 此主题支持CMS式首页与普通文章列表式首页风格。CMS首页绝大部分元素采用ajax方式装...
• 【效果测试展示篇】Ajax版即时侧边栏评论回复功能 (68)
  自写了《博客加入若干Ajax效果》以来，在博客上陆续添加启用了一些ajax效果，一方面丰富博客体验，一方面也当做练习学习js的一种实践吧。昨天的时候，将wilin版的侧边栏最新评论...
• 博客加入若干Ajax效果 (58)
  评论框的简单计数器（无需改动模板，附带输入字数限制功能） 添加引用按钮——轻松打造属于你的WordPress引用回复功能 wordpress高亮搜索结果+实现关键字前后截断显...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/76

• 2010年08月16日, 【SimPaled篇】Introduce My Blog Theme For You - I'm qiqiboy !say: [...] 边栏的最新评论支持翻页浏览、单条评论查看、即时ajax回复等功能。其中最新文章(recent post)部分支持more无限下滚查看。——注：边栏回复参考《无时不在的评论 侧边栏即时回复功能》 [...]
• 2010年08月15日, 超人say: @QiQiBoY 哈哈。。你在ad
• 2010年08月15日, QiQiBoYsay: @超人 额。。我试用后觉得很方便的功能。。 有了这个，我回复你这三条不在一个页面的评论，在侧边栏不用翻页就可以全部回复了。。
• 2010年08月15日, 超人say: 这功能有点奢侈了。。 基本用不上啦~
• 2010年08月15日, 小邪say: @liuqiqi 拖出去切JJ ~
• 2010年08月14日, 江流say: 这个挺实用的 不过我不折腾了- -
• 2010年08月14日, QiQiBoYsay: @Alan 哈哈，无折腾，不WP。。。
• 2010年08月14日, QiQiBoYsay: @减肥药 你减肥要吃多了？

只不过只是这样并不能满足我，我想既然边栏最新评论列表做成ajax可翻页形式，那么就是为了让读者去查看寻找自己感兴趣的评论，为了增进交流的便利，在侧边栏能直接回复自己感兴趣的评论那会很棒。

于是着手实现了这个效果。

考虑会遇到的的难点

在页面上插入表单很容易，要注意的一点是要阻止表单提交默认行为，开发过表单提交前验证的应该都知道怎么做。有困难的一点是评论嵌套，因为嵌套的深度有深度，而在边栏显示的评论你并不知道它是不是最后一层了，如果你对嵌套的最后一层评论回复了，那么这条新评论就会被当做主评论显示。我之前写过《完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>》，看过的应该都知道，我是通过修改js调用脚本中传递的父级评论id值来使回复最后一层的评论在实际上嵌套到倒数第二层，这样就变相的实现了无限嵌套。

所以在解决边栏回复评论功能的嵌套问题是，我也是通过后台查询获取这条评论的嵌套深度，如果它是设置的最大深度了，就返回它的父一级评论的id，这样一来，也就解决了嵌套的问题。

这个功能的优势和局限性

这个功能会极大地方便访客间的交流，两人之间讨论某一问题，你不必一直在一个页面回复评论，你可以在博客的任何一个页面回复他人。甚至不用刷新页面，你只需要翻看边栏，最新的评论就会即时显示，你可以直接对其进行回复，并且是嵌套回复。

当然，局限性也有，主要是不能回复博主的评论，因为最新评论并不显示博主的评论，所以普通访客就不能及时在侧边栏回复博主了。

有兴趣的可以在边栏回复测试，可以在最新评论处翻看找到一个名叫liuqiqi的发表的评论，大家可以对她进行回复测试。liuqiqi就下面这人，一个总是第一时间发表“美美的沙发。。。”的人。在最新评论处翻到她后，点击蓝色右向双箭头（如下图蓝色圆圈中），进入单条评论查看模式（如上图），再点击“reply”即可进行回复。

想要取消回复或者回复成功后想要返回，可以点击下图中的back按钮返回最新评论列表。

你也不用担心在边栏回复后返回记不清回复过谁了，因为你回复过的人会被记录下来，在刷新页面前，你只能对一个人回复一次。

另外我的日志下方的评论回复也换上了自己的，功能还很简单，原生JS的。

Related Posts

• 读者墙效果【二】- 头像自由拖拽 (46)
  上一篇博文《我的读者墙展示（附所用JS代码）》中我分享了自己所用的读者墙JavaScript部分代码。其实关于读者墙我还写了一个版本的js效果，不过离我最终的效果还有差距（最终要实...
• 我的读者墙展示（附所用JS代码） (47)
  好多人都在博客上弄了个读者墙，我之前也搞过，但是换了新主题之后就没再添加了。所以抽了个时间，在links页面加了读者墙，展示的是最近三个月内的评论数量在前72名的访客头像...
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (97)
  效果如你在我博客评论列表处，你可以直接点击评论者头像，或者将鼠标放到头像上2s，就会出现loading图标，从后台获取数据后就会出现一个长方形框，显示了当前评论者的头像，姓...
• 【SimPaled篇】Introduce My Blog Theme For You (73)
  声明：博客顶部仿自微软全球MSN首页(http://www.msn.com)，仅供本人学习研究之用，未用之牟利。 此主题支持CMS式首页与普通文章列表式首页风格。CMS首页绝大部分元素采用ajax方式装...
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)
  这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接...

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/73

• 2010年08月20日, 插件发布：边栏最新评论及ajax回复插件——WP RC Reply AJAX - I'm qiqiboy !say: [...] 之前在《Ajax版即时侧边栏评论回复功能》一文中我已经提到了我的侧边栏回复，我将其稍作改造，做成了今天的这个插件，名字叫WP RC Reply AJAX，全称是wordpress recent comments reply ajax。 [...]
• 2010年08月15日, 小邪say: @QiQiBoY IE内核浏览器去屎 ~
• 2010年08月13日, 【原理指导篇】无时不在的评论 侧边栏即时回复功能 - I'm qiqiboy !say: [...] 在上一篇《Ajax版即时侧边栏评论回复功能》中我简单介绍了我最新给博客加入的一个... [...]
• 2010年08月13日, 透视眼镜say: 精辟！一语中的 。。
• 2010年08月12日, zwwooooosay: @QiQiBoY 我在想，能否做个类似的插件，我看很多针对wp后台的插件
• 2010年08月12日, QiQiBoYsay: @zwwooooo 额。。后台翻了半天，我找不到相关功能代码在哪里。。。wp-admin里东西太多。。
• 2010年08月12日, QiQiBoYsay: @winy 这个必须有。。。O(∩_∩)O~
• 2010年08月12日, QiQiBoYsay: @winy 额。。我不喜欢页面有东西老跟着飘来飘去。。影响我注意力。。