如题,这里要说的就是这个小插件
为什么要做这样的插件呢,因为公司的产品经理提出了这样的要求!-_-!
数据其实不是很多,也没有传图片,所以还是很快就能取到,但一次显示太多把页面搞的很长,产品说:体验不好,做成分页的。
怎么办呢,苦逼程序员改呗,懒得改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'
});
|
很简单的功能 调用也很简单啦~~
代码很烂 欢迎指正~~