ajax无刷新手动加载分页文章
前面介绍过通过jquery插件infinite scroll实现滚动自动无限分页,在用户体验上有个很大的弊端,如果网站文章很多,访客要到达页面底部则比较困难。那么对于想避免这种情况的站长,可以使用infinite scroll插件手动加载的模式,即是当用户点击“查看更多”按钮时,ajax无刷新加载下一页文章列表。
操作方法:
1、下载infinite scroll插件:见文章结尾处
2、把jquery.infinitescroll.js文件和behaviors/manual-trigger.js文件复制到自己主题的根目录
3、在主题的header.php文件/head之前添加引用代码(前提是已经引入了jquery库文件):
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.infinitescroll.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url');?>/js/manual-trigger.js"></script> <script type="text/javascript"> $(document).ready(function(){ var infinite_scroll = { loading: { msgText: '', finishedMsg: '<div class="pagenavi"><a rel="next" href="javascript:void(0);">所有文章均已加载完成</a></div>' //加载到最后一页的提示文字 }, behavior: 'twitter', nextSelector:".pagenavi a",//分页的a标签 navSelector:".pagenavi",//分页的样式名称 itemSelector:".post", //每篇文章的样式名称 contentSelector:"#section" //列表的样式名称或ID名称 }; $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){ $('.pagenavi').insertAfter('#section'); //加载下一页后,分页条显示的位置 }); $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll ); }); </script>
以上js对应的html结构(参考):
<div id="section"> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> </div> <div class="pagenavi"> <a href="#">查看更多</a> </div>