今天是

爱酷家


当前位置:首页 > 站长学院 > 其他教程

emlog的AJAX无限翻页精简强化版

收集整理   发布时间:2012-11-13 19:44:00   阅读

emlog的AJAX无限翻页精简强化版

1、首先引用jQuery库,应该大多数主题都会需要这个库,如果引用过了,接着往下看。
2、本文重点:infiniteScroll.js插件(只有5K !!!看你的小还是我的小!哈哈哈……附件下载),在你的模板header.php或者footer.php引入即可。不要问我怎么引入,不会的谷歌百度去,还是不会就不要折腾了吧。
3、一段关键的js代码,插入到你的模板header.php或者footer.php的<body>或者</body>之前即可:

代码:
$(function(){ 

                   var $container = $('#content');

                   $container.infinitescroll({

                        navSelector  : '#pagenavi',    // 页码ID提供选择器

            nextSelector : '#pagenavi a',  // 下一页的ID

            itemSelector : '.ajax',     // 需要将下一页内容加载到的css选择器中

            loadingImg : template_url+'images/ajax.gif',//这是加载时的GIF动画图片,template_url是我事先定义好的模板的url地址

            loadingText : '加载中…',  //显示的提示文字                                 

            animate : true,  //加载完毕是否采用动态效果,这里是毕家波同学提供的代码没有的内容

            extraScrollPx: 150,//向下滚动的像素的动态效果,这里是毕家波同学提供的代码没有的内容

            donetext : '已经到最后一页了' , //到最后一页如果继续翻页时显示到最后的提示

                                      },



                    // 如果翻页成功,这里执行一个js函数,通过appended的方法,可以不断循环显示新的一页的内容,这里与毕家波同学提供的代码,我做了修改

            function( arrayOfNewElems ) {

              $container.isotope( 'appended', $( newElements ) ); 

                }

            );

             }); 

4、当然,遵从MJJ的原文,在你的log_list.php文件中的 <div id="contentleft">后添加:<div class="mjj">,在<div id="pagenavi">    前添加:</div>,不添加也可以,不过得根据你的模板修改js代码。
5大功告成,去体验你博客的无限翻页吧。

点击下载附件



注:⊙如转载本站原创作品,请务必包保留本文地址:

内容: