四.Ajax 评论
根据上文所述，现在主题中已经有评论分页了，要做到 Ajax 的评论分页，只需 JavaScript 的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载。假设主题模板 comments.php 的评论模块结构如下：
<div> <h3>Comments</h3> <!-- 显示正在加载新评论 --> <div><span>Loading...</span></div> <!-- 评论列表 --> <ol> <li>...</li> <li>...</li> <li>...</li> </ol> <!-- 评论分页导航 --> <nav> <a href="#">1</a> ... </nav> </div>
在你的 js 文件中加入以下 js 代码实现评论分页
// 评论分页 $body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body'); // 点击分页导航链接时触发分页 $('#comments-navi a').live('click', function(e){ e.preventDefault(); $.ajax({ type: "GET", url: $(this).attr('href'), beforeSend: function(){ $('#comments-navi').remove(); $('.comment_list').remove(); $('#loading-comments').slideDown(); $body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 ); }, dataType: "html", success: function(out){ result = $(out).find('.comment_list'); nextlink = $(out).find('#comments-navi'); $('#loading-comments').slideUp('fast'); $('#loading-comments').after(result.fadeIn(500)); $('.comment_list').after(nextlink); } }); });
加载条的 css （仅供参考）
复制代码 代码如下:
#loading-comments {display: none; width: 100%; height: 45px; background: #a0d536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }
您可能感兴趣的文章: