找寻那些幸福...
太多的悲伤又有什么用?拍拍灰尘.继续走,这个地球没有你一样转.
首先我声明,这个不是又产生了一个新的插件,而是我告诉大家我是如何修改mg12的插件ajax comment pager为jQuery方式来实现Ajax.因此很多的地方是针对我现在的这个主题而言的.不具备很高的通用性.只能给大家一些参考性的意见.
我也这里对于评论的翻页进行了部分js代码的重新激活(或者说是重载?这个我有点不好表达).从而在翻页后DOM被局部刷新后,js还能使用.因该是比较完美的解决了原有版本造成的翻页后鼠标悬浮和部分js脚本不能使用的问题.如果你是个爱折腾的人真的有必要参考一下.
Javascript真是个很神奇的东西.在前端设计中应该是具有越来越重要的作用.尽管有时候它拖慢了网页的载入.但是不可否认,相对用户体验来讲,这点点的牺牲还是很值得的.于是我们开始一点一点的在网站上添加代码.提供越来越多的效果.代码也就也来越大.拿mg12的主题以及插件来讲.所有的js都是自己写的.这样有好处,降低了错误的发生,具有较高的可控性.同时代码也不较少.但是像我这种爱折腾的人来讲.那些js远远不能符合我的要求,全部在自己写的话一是能力有限,二是.代码写出来或许也过于冗长了.所以我还是使用的了jQuery.一种更为简单的实现方式.从Google加载过啦的代码是压缩输出的.实际上浏览器只接收到18K左右的压缩文件.只相当于一张小图片的大小.算是很划算的了.所以我现在的很多js都是基于jQuery的.要的就是要充分利用这个18K.修改这个插件也是基于这个考虑.他的脚本有点大.而且我的鼠标悬浮还不能使用….
看吧,我是个爱废话的.下面正式讲.怎么修改的.
原理:通过GET方式向wp_list_comments()函数传递参数.查询指定的评论.这个你看看插件的代码吧.写得很清楚,比较容易理解. Ajax要做的是:点击分页链接后,根据链接获得需要的参数(这个要用到正则表达式).然后从新整理参数,以GET方式发出请求,前面的php函数作出相应,然后返回数据.更新评论(DOM)
弄清楚它是怎么工作的了.一切并好办了.首先我们把服务器端的文件写好.直接提取插件中的ajax-comment-pager.php.修改不需要的地方.就是那些后台的设置参数.我们只需要AJAX function部分.里面的设置参数我们自己根据需要直接填上就行.然后我们看到它是通过add_action(‘init’, ‘cpage_ajax’);这个钩子连上去的.加上这个.把这些代码放到你的主题的functions.php里面.或者为了方便分开管理include进去也行.
然后我们写js.我这里重点强调的是方法.jQuery在这有很大的优势.它的选择器和事件.我们很简单就实现了.你看到mg12的代码.很多就是为了这个服务了.首先我们自己创建一个函数.ajacpload();将Ajax方法写到里面.为什么要单独写个函数处理.就是为了加载完后重置的.以下是那个函数的代码.
function ajacpload(){ $('.ajaxcp').click(function(){ var wpurl=$(this).attr('href').split(/(\?|&)action=cpage_ajax.*$/)[0]; var commentPage = 1; if (/comment-page-/i.test(wpurl)) { commentPage = wpurl.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0]; } else if (/cpage=/i.test(wpurl)) { commentPage = wpurl.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0]; }; //alert(commentPage); var postId =PH.$('cp_post_id').innerHTML; var url = wpurl.split(/#.*$/)[0]; url += /\?/i.test(wpurl) ? '&' : '?'; url += 'action=cpage_ajax&post=' + postId + '&page=' + commentPage; //alert(url); $.ajax({ url:url, type: 'GET', beforeSend: function() { document.body.style.cursor = 'wait'; var C=0.7; $('#commentslist,#commentnavi').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'}); var loading='<span id="cmploading">Loading</span>'; $('#commentpager').html(loading); }, error: function(request) { alert(request.responseText); }, success:function(data){ var responses=data.split('<!--PHILNA-AJAX-COMMENT-PAGE-->'); $('#commentslist').html(responses[0]); $('#commentpager').html(responses[1]); var C=1; $('#commentslist,#commentnavi').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'}); $('#cmploading').remove(); $("#commentslist a[rel='external']").click(function(){window.open(this.href);return false}); $("#commentslist a[href*='http://philna.com'],#commentslist a[href*='javascript'],#commentslist a:has(img),a[href*=#]").attr("rel","inlinks"); $("#commentslist a[rel!='inlinks']").click(function(){window.open(this.href);return false;}); document.body.style.cursor = 'auto'; $('#commentsinfo').ScrollTo(800); reinit(); ajacpload(); } }); return false; }); }
代码很多的部分都是正则表达式.我注释了些alert.就是为了看看中间是否执行的正常不.
重载的办法是什么呢?其实就是通过它自己在做完一些事情以后再加载一次他自己.看到Ajax的success部分.我用了reinit(); 那里面放的只是个init()函数.这个是我为了自己方便理解和分开管理故意这么做的.init()函数里面就尽可以的放你需要重载的js了比如鼠标悬浮.内页链接平滑移动等.总之放你需要的部分.然后我们在函数的最下面.写上:
init(); ajacpload();
这样它们就全部被装载了.执行完Ajax后.又被自己在从新装载一次.从而代码就不在失效.
要注意的:
我虽然贴了不少的代码,但是你直接拷过去肯定不能用.因为我改动的比较多.重点是理解其中的道理.它是如何运作的.相信你理解了以后,自己也能很容易搞出来.
如果你对jQuery的Ajax还不是很了解,建议你看看官方文档.网上也有翻译好了的中文文档.里面有很详尽的解释.另外我在以后分享的几个Ajax方法中也会涉及一些解释.如果你感兴趣,可以留意一下.
PS. 我给博客新增加了个应用.把评论发送到Twitter.这个是直接POST方式发送数据处理的.你的帐号信息.不会被记录.请放心使用.但现在还是beta版.有些还不完善.先凑合着用吧.注意,这个是我自己写的,和水煮鱼的不同,他的好像运行的很稳定.我看看能不能向他取取经.哈哈哈.未来的主题我打算集成这个功能.或者写成插件.前提是还没有其他人写出这个插件…
声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™
Cool
很强大,改天拿来用用!!
@xiaorsz 你的用了分页.评论也较多.所以还是比较建议使用的.加载的js也不多,应该在2K以内.
我用不了ajax comment page,我的主题还不支持评论分页 T_T 谁能贴个让主题支持wp2.7 新版评论的修改教程上来,我是个懒人~
hoho…不过,自己一直没有用分页,很享受不分页,很多留言的感觉=,=…
@Leeiio 改天我写个吧
@sofish 我的首页和评论都用到了jQuery实现的Ajax.效果还可以.翻页很享受.呵呵
…….啊~又要折腾了,现在这个主题还是真的不错~
痛苦中!
有这些效果,主题真好。就是感觉字体小了点儿。
@会律博客 怎么啦~
@Soxiqi 如果你用IE.请不要使用小号字体.请使用中号.其他浏览器里的表现很好.
值得学习,,领会下。。
不错不错,好老的文章,被我翻出来了
没有注释,看得很辛苦
jQuery效果很炫
谢谢分享,先收藏了 有时间研究下
学习了,用在博客上试试
我对这个不了解,不知道留下言能否看到这个效果。
jQuery版ajax comment pager
首先我声明,这个不是又产生了一个新的插件,而是我告诉大家我是如何修改mg12的插件ajax comment pager为jQuery方式来实现Ajax.因此很多的地方是针对我现在的这个主题而言的.不具备很高的通用性.只能给大家一些参考性的意见.
我也这里对于评论的翻页进行了部分js代码的重新激活(或者说是重载?这个我有点不好表达).从而在翻页后DOM被局部刷新后,js还能使用.因该是比较完美的解决了原有版本造成的翻页后鼠标悬浮和部分js脚本不能使用的问题.如果你是个爱折腾的人真的有必要参考一下.
Javascript真是个很神奇的东西.在前端设计中应该是具有越来越重要的作用.尽管有时候它拖慢了网页的载入.但是不可否认,相对用户体验来讲,这点点的牺牲还是很值得的.于是我们开始一点一点的在网站上添加代码.提供越来越多的效果.代码也就也来越大.拿mg12的主题以及插件来讲.所有的js都是自己写的.这样有好处,降低了错误的发生,具有较高的可控性.同时代码也不较少.但是像我这种爱折腾的人来讲.那些js远远不能符合我的要求,全部在自己写的话一是能力有限,二是.代码写出来或许也过于冗长了.所以我还是使用的了jQuery.一种更为简单的实现方式.从Google加载过啦的代码是压缩输出的.实际上浏览器只接收到18K左右的压缩文件.只相当于一张小图片的大小.算是很划算的了.所以我现在的很多js都是基于jQuery的.要的就是要充分利用这个18K.修改这个插件也是基于这个考虑.他的脚本有点大.而且我的鼠标悬浮还不能使用….
看吧,我是个爱废话的.下面正式讲.怎么修改的.
原理:通过GET方式向wp_list_comments()函数传递参数.查询指定的评论.这个你看看插件的代码吧.写得很清楚,比较容易理解.
Ajax要做的是:点击分页链接后,根据链接获得需要的参数(这个要用到正则表达式).然后从新整理参数,以GET方式发出请求,前面的php函数作出相应,然后返回数据.更新评论(DOM)
弄清楚它是怎么工作的了.一切并好办了.首先我们把服务器端的文件写好.直接提取插件中的ajax-comment-pager.php.修改不需要的地方.就是那些后台的设置参数.我们只需要AJAX function部分.里面的设置参数我们自己根据需要直接填上就行.然后我们看到它是通过add_action(‘init’, ‘cpage_ajax’);这个钩子连上去的.加上这个.把这些代码放到你的主题的functions.php里面.或者为了方便分开管理include进去也行.
然后我们写js.我这里重点强调的是方法.jQuery在这有很大的优势.它的选择器和事件.我们很简单就实现了.你看到mg12的代码.很多就是为了这个服务了.首先我们自己创建一个函数.ajacpload();将Ajax方法写到里面.为什么要单独写个函数处理.就是为了加载完后重置的.以下是那个函数的代码.
代码很多的部分都是正则表达式.我注释了些alert.就是为了看看中间是否执行的正常不.
重载的办法是什么呢?其实就是通过它自己在做完一些事情以后再加载一次他自己.看到Ajax的success部分.我用了reinit();
那里面放的只是个init()函数.这个是我为了自己方便理解和分开管理故意这么做的.init()函数里面就尽可以的放你需要重载的js了比如鼠标悬浮.内页链接平滑移动等.总之放你需要的部分.然后我们在函数的最下面.写上:
这样它们就全部被装载了.执行完Ajax后.又被自己在从新装载一次.从而代码就不在失效.
要注意的:
我虽然贴了不少的代码,但是你直接拷过去肯定不能用.因为我改动的比较多.重点是理解其中的道理.它是如何运作的.相信你理解了以后,自己也能很容易搞出来.
如果你对jQuery的Ajax还不是很了解,建议你看看官方文档.网上也有翻译好了的中文文档.里面有很详尽的解释.另外我在以后分享的几个Ajax方法中也会涉及一些解释.如果你感兴趣,可以留意一下.
PS.
我给博客新增加了个应用.把评论发送到Twitter.这个是直接POST方式发送数据处理的.你的帐号信息.不会被记录.请放心使用.但现在还是beta版.有些还不完善.先凑合着用吧.注意,这个是我自己写的,和水煮鱼的不同,他的好像运行的很稳定.我看看能不能向他取取经.哈哈哈.未来的主题我打算集成这个功能.或者写成插件.前提是还没有其他人写出这个插件…
声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™