当前位置:首页 > 开发教程 > js/jQuery教程 >

【JQ】无限滚动条-jquery.infinitescroll.js使用说明

时间:2014-05-05 08:38 来源:互联网 作者:源码搜藏 收藏

最基本用法: [javascript] view plaincopy $( #content ).infinitescroll({ //#content是包含所有图或块的容器 navSelector: div.navigation , //导航的容器,成功后会被隐藏 nextSelector: div.navigationa:first , //包含下一页链接的容器 itemSelector:

最基本用法:

[javascript] view plaincopy
 
  1. $('#content').infinitescroll({     //#content是包含所有图或块的容器  
  2.     navSelector  : "div.navigation",   //导航的容器,成功后会被隐藏  
  3.     nextSelector : "div.navigation a:first",  // 包含下一页链接的容器  
  4.     itemSelector : "#content div.post"  // 你将要取来的内容块  
  5. });  
  6.   
  7.  <div id='content'>  
  8.     <div class='post'>...</div>  
  9.     ......  
  10.  </div>  
  11.  <div class='navigation'><a href='p2.html'></a></div>//这里的链接页面名里要有个2才行,后面的页面名同位置换3、4...如p3.html  

更多参数:

[javascript] view plaincopy
 
  1. $('#content').infinitescroll({  
  2.   navSelector  : "div.navigation"//导航的选择器,会被隐藏  
  3.   nextSelector : "div.navigation a:first",//包含下一页链接的选择器  
  4.   itemSelector : "#content div.post",//你将要取回的选项(内容块)  
  5.   debug        : true//启用调试信息  
  6.   loadingImg   : "/img/loading.gif"//加载的时候显示的图片  
  7.                  //默认采用:"http://www.infinite-scroll.com/loading.gif"  
  8.   animate      : true//当有新数据加载进来的时候,页面是否有动画效果,默认没有  
  9.   extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150  
  10.   bufferPx     : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短  
  11.   errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数  
  12.   localMode    : true //是否允许载入具有相同函数的页面,默认为false  
  13.   },function(arrayOfNewElems){  
  14.   //程序执行完的回调函数  
  15. });   
  16.   
  17. //取消绑定事件的函数写法:  
  18. $(window).unbind(‘.infscr’);  
  19.   
  20. //通过事件触发加载数据的写法:  
  21. $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中  
  22.   
  23. //此插件还可以载入任何页面的容器中的内容,可以是id以及是class,并转化到html存储,要比jquery自带的的load强大。  
  24. $('').load('/page/2/ #content div.post',function(){  $(this).appendTo('#content'); });  

实例1:只要有页,就会一直加完为止

[javascript] view plaincopy
 
  1. $('#content').infinitescroll({  
  2.   navSelector  : '#pagenav',  
  3.   nextSelector : '#pagenav a',  
  4.   itemSelector : ".picdiv",   
  5.   debug        : false,   
  6.   loadingImg   : "ajax-loader.gif",  
  7.   loadingText  : "Loading new posts...",  
  8.   animate      : false,   
  9.   donetext     : "I think we've hit the end, Jim"    
  10. },function(){});  
  11.   
  12. <div id='content'>  
  13.    <div class='picdiv'>...</div>  
  14.    ......  
  15. </div>  
  16.   
  17. <span id="pagenav" style="display:none" > <a href="index.phppage=2&show=">Next</a></span>  

实例2:加到10页就不再加

[javascript] view plaincopy
 
  1. var sp = 1  
  2. $(".infinite_scroll").infinitescroll({  
  3.     navSelector: "#more",  
  4.     nextSelector: "#more a",  
  5.     itemSelector: ".item",  
  6.           
  7.     loading:{  
  8.         img: "images/masonry_loading_1.gif",  
  9.         msgText: ' ',  
  10.         finishedMsg: '木有了',  
  11.         finished: function(){  
  12.             sp++;  
  13.             if(sp>=10){ //到第10页结束事件  
  14.                 $("#more").remove();  
  15.                 $("#infscr-loading").hide();  
  16.                 $("#page").show();  
  17.                 $(window).unbind('.infscr');  
  18.                       }  
  19.                   }   
  20.         },errorCallback:function(){   
  21.             $("#page").show();  
  22.         }  
  23.     },function(newElements){  
  24.         var $newElems = $(newElements);  
  25.         $newElems.fadeIn();  
  26.         return;  
  27. });  
  28. <div class='infinite_scroll'>  
  29.    <div class='item'>...</div>  
  30.    ......  
  31. </div>  
  32. <div id='more'><a href='p2.html'></a></div>  



PS:被取用的那个页可以是个完整的包含调用内容块的网页,也可以只有被调用的内容块(连HTML和HEAD和BODY标签都没有)。


js/jQuery教程阅读排行

最新文章