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

来源：互联网发布：word文档翻译软件编辑：程序博客网时间：2024/06/05 22:43

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

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

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

怎么办呢，苦逼程序员改呗，懒得改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的例如：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="data">
    <div>something1</div>
    <div>something2</div>
    <div>something3</div>
    <div>something4</div>
    <div>something5</div>
    <div>something6</div>
    <div>something7</div>
    <div>something8</div>
    <div>something9</div>
    <div>something10</div>
</div>

　那么这样引用

1
2
3
$('.data>div').loading({
    'parents':'div'
});

如果你用的是ul>li

就这样：

1
2
3
$('.date>li').loading({
    'parents':'ul'
});

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

代码很烂欢迎指正~~

0 0