将实时取到的数据进行分页显示的插件

如题，这里要说的就是这个小插件

为什么要做这样的插件呢，因为公司的产品经理提出了这样的要求！-_-！



数据其实不是很多，也没有传图片，所以还是很快就能取到，但一次显示太多把页面搞的很长，产品说：体验不好，做成分页的。

怎么办呢，苦逼程序员改呗，懒得改css和ajax部分了，而且她要求其他几个页面比较长的也要这个效果，所以就写了个jq插件。





这么简单的功能，所以写起来也就不那么难，主要就是计算什么时候隐藏、什么时候显示、显示多少个、加载过程图



额，就这么点问题吧

下面上代码：

1 $.fn.extend({          
 2     loading:function(data){
 3         var anc = $(this);　　　　　　　　//获取被操作的类
 4         var parents=data.parents;　　　　//被操作的类的父级标签
 5         var bol=true,cut,tipschange,cut1,tipstime,cut2;
 6         for(var i=0;i<anc.length;i++){
 7             (function(i){
 8                 if(bol){
 9                     if(anc.eq(i).offset().top>$(document.body).height()){　　　　//判断一次显示几条数据，根据页面高度判断
10                         if(i<=2){i=3;}
11                         cut=i;
12                         cut2=cut;
13                         bol=false;
14                     }
15                 }
16             })(i)    
17         }
18         anc.parents(parents).append('<p class="tipstexthidden" style="opacity: 0;"></p>');　　　　
19         function hidden(cut){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//隐藏超出页面高度的数据
20             for(var i=0;i<anc.length;i++){
21                 if(i>=cut){
22                     anc.eq(i).css('display', 'none');
23                 }
24             }
25             anc.parents(parents).append('<p class="tipstext">向上拉动，查看更多！</p>')　　　　//插入提示框
26             $('.tipstext').css({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//提示框css样式
27                 fontSize: '12px',
28                 color: '#646464',
29                 textAlign:'center'
30             });
31         }
32 
33         function move(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断并执行显示条目
34             tipschange=$('.tipstexthidden').offset().top+$('.tipstexthidden').height()-$(document.body).height();
35             if($("body").scrollTop()>=tipschange+20){
36                 clearInterval(tipstime);
37                 show();
38             }
39         }
40         function show(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//显示一定的条目
41             anc.parents(parents).append('<div class="tipsphoto" ><img src="img/loading.gif" width="70px" alt=""></div>')
42             cut1=cut2+cut;
43             $('.tipsphoto').css({
44                 position: 'fixed',
45                 top: '50%',
46                 left:"50%"
47             });
48             $('.tipsphoto>img').css({
49                 position: 'relative',
50                 top: '-50%',
51                 left:'-50%'
52             });
53             setTimeout(function(){
54                 if(cut1<anc.length){
55                     for(var i=0;i<=cut1;i++){
56 
57                             anc.eq(i).css('display', 'block');
58                     }
59                     $('.tipsphoto').css('display', 'none');
60                     cut2=cut1;
61                     tipstime=setInterval(move, 30);
62                 }
63                 if(cut1>=anc.length){
64                     for(var i=0;i<=cut1;i++){
65                             anc.eq(i).css('display', 'block');
66                     }
67                     $('.tipsphoto').css('display', 'none');
68                     $('.tipstext').css('display', 'none');
69                 }
70             }, 2000)
71         }
72         if(anc.length==0){}else{　　　　　　　　　　　　　　　　　　　　　　　　　//判断有数据显示的时候才执行
73             if((anc.eq(anc.length-1).offset().top+anc.eq(0).height())>$(document.body).height()){　　　　//数据高度大于屏幕高度开始执行
74                 hidden(cut);
75                 tipstime=setInterval(move, 30);　　　　　　　　　　　　　　　　//30ms检测一次是否显示后面的数据
76             }            
77         }
78 
79     }
80 
81 });

以上就是这个插件的全部内容及注释



下面是如何使用

如果你的数据是div的 例如：

　那么这样引用

　　

如果你用的是ul>li

就这样：

　　

很简单的功能 调用也很简单啦~~

代码很烂 欢迎指正~~