相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲解。在这想跟大家分享下。AJAX加载文章的内容。当然，这里还是基于JQ的load方法来实现。OK，来看效果：
首先，定义三个变量：
- var objTag= $(".post");//定义要获取内容所在的节点
- var num= objTag.length;//定义节点的数量
- var _cache=new Object;//建立一个缓存对像
然后构建一个加载的函数：
- function loadentry(n){
- var _url=$(objTag[n]).children(".archive-post-title").children("h2").children("a").attr("href");//定义要加载文章的地址
- $('<div class="details"><div style="width:160px;margin-top:8px;padding:0 2px;font-size:12px;background: #01E343; color:#FFF;">正在加载文章内容，请稍等！</div></div>').insertBefore($(objTag[n]).children(".singledata"));//插入提示信息
- if(_cache[_url]==null){//判断是否有缓存
- $(objTag[n]).children(".details").load(_url+" .post .entry",function(){
- _cache[_url]=$(objTag[n]).children(".details").html();
- $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
- });//加载文章内容
- }else{
- $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
- $(objTag[n]).children(".details").html(_cache[_url]);//直接显示缓存对像的内容
- $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
- }
- $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
- }
这部分对于不懂JQ的人来说可能有点复杂。懂JQ的人看起来一定很简单。就是一个对DOM的操作。通过动态的插入清除节点来实现我们需要的效果。关健在于“.load()”的用法。
到这已经实现了加载了。接着需要做个删除也就是收起全文；相比加载，删除要简单的多了，就是直接删除节点就行了。
- function closentry(n){
- $(objTag[n]).children(".details").animate({height: 'toggle'}, "slow",function(){$(this).remove()});
- $(objTag[n]).children(".archive-arrow").remove();
- $('<div class="archive-arrow"><span title="阅读全文" class="show" onclick="loadentry("'+n+'");">阅读全文↓</span></div>').insertAfter($(objTag[n]).children(".archive-post-title").children("p"));
- }
这段代码就是一个基本的节点操作。在这就不作说明了；当然，最后我们需要插入节点并绑定事件。
- $(document).ready(function(){
- for(a=0;a<num;a++){
- $(objTag[a]).children(".archive-post-title").children(".archive-arrow").append('<span class="show" title="阅读全文" onclick="loadentry("'+a+'");">阅读全文↓</span>');
- }
- });
OK，到这里这个AJAX加载效果就完成了。详细的效果可以点击侧边栏的分类导航。
哎,俺只能望代码兴叹了,等着大侠下次升级主题时把这个功能加上去
让我咋说你了，整个一技术高手啊，实在佩服。都能自己写主题了，不错不错。
呵呵，正好可以用到我网站上，谢谢了哦！
Merry Christmas 圣诞快乐！
从外观到内容，灰常喜欢你的站，想申请个链。您是愿意加呢？还是愿意加呢？ 我最近才开始折腾WordPress的。
好多的站点都喜欢AJAX了，AJAX很强大
嗯，现在很多博客开始采用这种架构了
-________-”收藏了.你那昵称必须得超过3个字.超人只有2个字. 没办法就把全称给输入了~
囧。这个验证是个最基本最简单的。一般来说汉字要被算作两个字符的。
实用。。。。收藏了…..
想法不错，但是要全文输出了。