/** * jqury的下拉上拉加载插件,带样式滚动条,呵呵。 * createname:雨中磐石 * homeurl:http://www.rockoa.com/ * Copyright (c) 2016 rainrock (xh829.com) * Date:2016-11-24 */ (function ($) { function rockclass(element, options){ var me = this; var opts = $.extend({ ondragstart:function(){}, ondrag:function(){}, ondrayrl:function(){}, ondrayrlend:false, scrollbool:true, //是否添加滚动条样式 downbool:false, //是否下拉加载 upbool:false, //是否上拉加载 leftbool:false, //左 rightbool:false, //右 ondownbefore:function(){return true}, onupbefore:function(){return true}, downbgcolor:'#f1f1f1', //下拉背景 upmsgdiv:'' //上来提示区域 }, options); var obj = element; this._init=function(){ this.rand = js.getrand(); this.reloadbo = false; this.mobj = $(obj); for(var a in opts)this[a]=opts[a]; obj.addEventListener('touchstart',function(e){ me._dragstart(e); },false); obj.addEventListener('touchmove',function(e){ me._dragmove(e); },false); obj.addEventListener('touchend',function(e){ this.removeEventListener('touchmove', function(){}, false); this.removeEventListener('touchstart', function(){}, false); me._dragend(e); },false); this._initscrool(); }; this._dragstart=function(e){ if(this.reloadbo)return; $('#updowns_'+this.rand+'').remove(); this.startarr = [e.touches[0].clientX, e.touches[0].clientY, this.mobj.scrollTop(),obj.scrollHeight-this.mobj.height()]; if(this.upbool && this.upmsgdiv)this.startarr[4]=$('#'+this.upmsgdiv+'').html(); this.upstartbo = false; this.up_ysa = 0; this.movearr = [0,0]; this.ondragstart(e); }; this._dragmove=function(e){ if(this.reloadbo)return; this.upheight = 0; var hei = e.touches[0].clientY-this.startarr[1],downbo=false,upbo=false,ler = e.touches[0].clientX-this.startarr[0]; this.movearr = [ler,hei]; var updown = Math.abs(hei) > Math.abs(ler); if(this.up_ysa==0)this.up_ysa = updown ? 1 :2; //js.msg('msg',''+hei+'.'+ler+''); //下拉刷新 if(this.downbool && this.up_ysa==1){ var dowbcak = this.ondownbefore(); if(hei>0 && dowbcak && this.startarr[2]==0){ e.preventDefault(); downbo = true; } if(downbo){ this._downstart(hei, dowbcak); } if(!downbo)$('#downs_'+this.rand+'').remove(); } //上拉刷新 if(this.upbool && this.up_ysa==1){ var upback = this.onupbefore(); if(hei<0 && upback && this.startarr[2]==this.startarr[3]){ e.preventDefault(); upbo = true; } if(upbo){ this._upstart(hei, upback); } if(!upbo)this.translateY(0); } if(this.up_ysa==2){ e.preventDefault(); this.ondrayrl(ler, e); } //左滑动 if(this.leftbool && ler<0 && this.up_ysa==2){ this.mobj.css('transform','translateX('+ler+'px)'); } //右滑动 if(this.rightbool && ler>0 && this.up_ysa==2){ this.mobj.css('transform','translateX('+ler+'px)'); } this.ondrag(e,this.movearr); }; this._downstart=function(hei){ if(this.reloadbo)return; hei = hei*0.6; this.upheight = hei; if(hei>200)return; var sid = 'downs_'+this.rand+'',tx= '↓ 下拉刷新',o1; if(hei>50)tx='↑ 释放立即刷新'; if(get(sid)){ o1 = $('#'+sid+''); o1.css('height',''+hei+'px').find('div').html(tx); }else{ var s = '
'+tx+'
'; this.mobj.before(s); } }; this._upstart=function(hei, bsrs){ if(this.reloadbo)return; hei = hei*0.6; this.upheight = hei; if(hei<-200)return; var a = {msg:'↑ 上拉刷新','msgok': '↓ 释放立即刷新','msgdiv':this.upmsgdiv},i; if(typeof(bsrs)=='object'){ for(i in bsrs)a[i]=bsrs[i]; } var tx= a.msg; if(hei<-50)tx=a.msgok; if(a.msgdiv)$('#'+a.msgdiv+'').html(tx); this.upstartbo = true; this.translateY(hei); }; this.translateY=function(h){ var o = obj,val= "translateY("+h+"px)"; o.style.transform=val; o.style.webkitTransform=val; o.style.msTransform=val; o.style.MozTransform=val; o.style.OTransform=val; }; this._dragend=function(e){ var sid = 'downs_'+this.rand+''; if(get(sid)){ var o1 = $('#'+sid+''); if(this.upheight>50){ this.reloadbo = true; o1.animate({'height':'50px'},200,function(){ o1.html(' 刷新中...'); me.ondownsuccess ? me.ondownsuccess(e) : me.ondownok(); }); }else{ $('#'+sid+'').slideUp(200); } } var bhui = true; if(this.upheight<0){ this.translateY(0); if(this.upheight<-50){ this.reloadbo = true; if(this.onupsuccess){ this.onupsuccess(); }else{ setTimeout(function(){me.onupok()}, 500); } bhui = false; } } if(this.upstartbo || bhui){ if(this.upmsgdiv)$('#'+this.upmsgdiv+'').html(this.startarr[4]); } if(this.ondrayrlend){ this.ondrayrlend(this.movearr[0], e); } }; this.ondownok=function(ts){ this.reloadbo = false; var o1 = $('#downs_'+this.rand+''); if(!ts)ts='√ 刷新成功'; o1.html(ts); setTimeout(function(){o1.slideUp(200,function(){o1.remove();});}, 500); }; this.ondownerror=function(ts){ if(!ts)ts='× 超时失败'; this.ondownok(ts); }; this.onupok=function(ts){ this.reloadbo = false; this.upstartbo = false; }; this.onuperror=function(ts){ if(!ts)ts='× 超时失败'; this.ondownok(ts); }; this._initscrool=function(){ if(!this.scrollbool)return; var off = this.mobj.offset(); this.scrollsid = 'scrolllists_'+this.rand+''; var l = off.left+this.mobj.width()-6; this.scroor_h = 80; this.scroor_hs = obj.scrollHeight; var s = ''; s='
'+s+'
'; $('body').append(s); this.resize(); this.mobj.scroll(function(){ me._scrollov(); }); }; this._hidescrolls = function(){ clearTimeout(this._hidescrollstime); this._hidescrollstime = setTimeout(function(){ $('#'+me.scrollsid+'').fadeOut(); },1000); }; this._scrollovs=function(){ clearTimeout(this._scrollovstime); this._scrollovstime=setTimeout(function(){ me._scrollov(); },1); }; this._scrollov=function(){ var top,zh,bl,mh,wzh; top = this.mobj.scrollTop(); wzh = obj.scrollHeight; if(wzh!=this.scroor_hs){ this.resize(); } zh = wzh-obj.clientHeight; mh = obj.clientHeight-this.scroor_h; //可滚动高度 bl = top/zh; var jgt = bl*mh; $('#'+this.scrollsid+'').css('top',''+jgt+'px').show(); this._hidescrolls(); }; this.hidescrolls=function(){ $('#'+this.scrollsid+'').hide(); } /** * 窗口改变时重新设置滚动条 */ this.resize = function(){ if(!this.scrollbool)return; var off = this.mobj.offset(),zh; var l = off.left+this.mobj.width()-6,hei = obj.clientHeight; zh = obj.scrollHeight; $('#'+this.scrollsid+'_min').css({'left':''+l+'px','top':''+off.top+'px','height':''+hei+'px'}); var bl = hei/zh;if(bl>1)bl=0.9; this.scroor_h = bl * hei; $('#'+this.scrollsid+'').css({'height':''+this.scroor_h+'px'}); this.scroor_hs = zh; } }; $.fn.rockdoupull = function(options){ var can = $.extend({}, options); var clsa = new rockclass(this[0], can); clsa._init(); return clsa; }; /** * 长按 */ function longpress(element, options){ var me = this; var opts = $.extend({ ondragstart:function(){return true;}, //按下前 ondragend:function(){return true;}, //按下后 downbgcolor:'#f1f1f1', //下拉背景 presstime:500, onpress:function(){} }, options); var obj = element; var obj = element; this.ele = obj; this._init=function(){ this.mobj = $(obj); for(var a in opts)this[a]=opts[a]; obj.addEventListener('touchstart',function(e){ me._dragstart(e); },false); obj.addEventListener('touchend',function(e){ me._dragend(e); },false); }; this._dragstart=function(e){ if(!this.ondragstart(e))return false; e.preventDefault(); this.oldbackcolor = obj.style.backgroundColor; obj.style.backgroundColor = this.downbgcolor; this.anxiamiao = 0; clearInterval(this.shumiaotime); this.shumiaotime=setInterval(function(){ me.downtimes(e); },100); }; this.downtimes=function(e){ this.anxiamiao+=100; if(this.anxiamiao>=this.presstime){ this._dragend(e); this.onpress();//触发 } }; this._dragend=function(e){ obj.removeEventListener('touchstart', function(){}, false); clearInterval(this.shumiaotime); if(typeof(this.oldbackcolor=='string'))obj.style.backgroundColor = this.oldbackcolor; this.ondragend(this.anxiamiao>=this.presstime,e); }; } $.fn.longpress = function(options){ var can = $.extend({}, options); var clsa = new longpress(this[0], can); clsa._init(); return clsa; }; })(jQuery);