jquery-rocktouch.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /**
  2. * 居于touch.js下屏幕滚动操作的
  3. */
  4. (function ($) {
  5. function rockclass(element, options){
  6. var me = this;
  7. var opts = $.extend({
  8. ondragstart:function(){},
  9. ondrag:function(){},
  10. ondragrlend:function(){},
  11. ondragrl:function(){},
  12. scrollbool:false,
  13. dropdown_bgcolor:'#f1f1f1', //下拉背景色
  14. dropdown_success:function(){} //下拉回调
  15. }, options);
  16. var obj = element;
  17. this._init=function(){
  18. this.rand = js.getrand();
  19. this.reloadbo = false;
  20. this.mobj = $(obj);
  21. for(var a in opts)this[a]=opts[a];
  22. touch.on(obj, 'dragstart', function(e){
  23. me._dragstart(e);
  24. });
  25. touch.on(obj, 'drag', function(e){
  26. e.preventDefault()
  27. me._drag(e);
  28. });
  29. touch.on(obj, 'dragend', function(e){
  30. me._dragend(e);
  31. });
  32. };
  33. this._dragstart=function(e){
  34. if(this.reloadbo)return;
  35. this.startarr = [e.distanceX, e.distanceY, this.mobj.scrollTop(), e.timeStamp];
  36. this.mobj.stop();
  37. this.ondragstart(e);
  38. };
  39. this._drag=function(e){
  40. if(this.reloadbo)return;
  41. var lx = e.direction;
  42. if(lx=='right' || lx=='left'){
  43. this._dragrightleft(e)
  44. return;
  45. }
  46. this.upheight = 0;
  47. if(this.scrollbool){
  48. clearTimeout(this._hidescrollstime);
  49. var hei = e.distanceY-this.startarr[1];
  50. var lef = this.startarr[2]-hei;
  51. if(lef<0)lef=0;
  52. this.mobj.scrollTop(lef);
  53. if(lef==0 && hei>0 && this.startarr[2]==0)this._upstart(hei,e);//继续下拉刷新
  54. }
  55. this.ondrag(e);
  56. };
  57. this._dragrightleft=function(e){
  58. var yd = e.distanceX-this.startarr[0];
  59. this.ondragrl(yd,e);
  60. };
  61. this._upstart=function(hei){
  62. if(this.reloadbo)return;
  63. hei = hei*0.5;
  64. this.upheight = hei;
  65. if(hei>200)return;
  66. var sid = 'updowns_'+this.rand+'';
  67. $('#'+sid+'').remove();
  68. var tx= '↓ 下拉刷新';
  69. if(hei>50)tx='↑ 释放立即刷新';
  70. var s = '<div id="'+sid+'" style="height:'+hei+'px;overflow:hidden; line-height:50px;text-align:center;color:#666666;background:'+this.dropdown_bgcolor+';font-size:14px;position:relative"><div style="height:50px;line-height:50px;position:absolute;left:0px;bottom:0px;width:100%">'+tx+'</div></div>';
  71. this.mobj.before(s);
  72. };
  73. this._dragend=function(e){
  74. var lx = e.direction;
  75. var jg,hei,heis,hms,jgs,ass;
  76. jg = e.timeStamp-this.startarr[3];
  77. if(lx=='right' || lx=='left'){
  78. this._dragrightleftend(e);
  79. return;
  80. }
  81. hei = e.distanceY-this.startarr[1];
  82. heis= hei >0 ? -1 : 1;
  83. hms = 200;
  84. jgs = (hms-jg)/0.2 * heis;
  85. if(jg<hms){
  86. ass = this.mobj.scrollTop();
  87. this.mobj.animate({scrollTop:ass+jgs}, hms-jg+400);
  88. }
  89. var sid = 'updowns_'+this.rand+'';
  90. if(get(sid)){
  91. var o1 = $('#'+sid+'');
  92. if(this.upheight>50){
  93. this.reloadbo = true;
  94. o1.animate({'height':'50px'},200,function(){
  95. o1.html('<img src="images/loading.gif" align="absmiddle"> 刷新中...');
  96. me.dropdown_success(e);
  97. });
  98. }else{
  99. $('#'+sid+'').slideUp(200);
  100. }
  101. }
  102. };
  103. this._dragrightleftend=function(e){
  104. var yd = e.distanceX-this.startarr[0];
  105. this.ondragrlend(yd,e);
  106. };
  107. this.dropdown_ok=function(ts){
  108. this.reloadbo = false;
  109. var o1 = $('#updowns_'+this.rand+'');
  110. if(!ts)ts='√ 刷新成功';
  111. o1.html(ts);
  112. setTimeout(function(){o1.slideUp(200,function(){o1.remove();});}, 500);
  113. };
  114. this.scroll = function(){
  115. this.scrollbool = true;
  116. this.mobj.css('overflow','hidden');
  117. var off = this.mobj.offset();
  118. this.scrollsid = 'scrolllists_'+this.rand+'';
  119. var l = off.left+this.mobj.width()-6;
  120. var s = '<div style="height:80px;width:5px;background:rgba(0,0,0,0.3);display:none;overflow:hidden;border-radius:2px;right:0px;top:0px;position:absolute" id="'+this.scrollsid+'"></div>';
  121. s='<div id="'+this.scrollsid+'_min" style="height:'+obj.clientHeight+'px;width:5px;overflow:hidden;position:fixed;z-index:1;background:rgba(0,0,0,0);left:'+l+'px;top:'+off.top+'px">'+s+'</div>';
  122. $('body').append(s);
  123. this.resize();
  124. this.mobj.scroll(function(){
  125. me._scrollov();
  126. });
  127. this.mobj.resize(function(){
  128. me.resize();
  129. });
  130. };
  131. this._hidescrolls = function(){
  132. clearTimeout(this._hidescrollstime);
  133. this._hidescrollstime = setTimeout(function(){
  134. $('#'+me.scrollsid+'').fadeOut();
  135. },1000);
  136. };
  137. this._scrollov=function(){
  138. var top,zh,bl,mh,off,lets;
  139. top = this.mobj.scrollTop();
  140. off = this.mobj.offset();
  141. lets= off.top;
  142. zh = obj.scrollHeight-obj.clientHeight;
  143. mh = obj.clientHeight-80; //可滚动高度
  144. bl = top/zh;
  145. var jgt = bl*mh;
  146. $('#'+this.scrollsid+'').css('top',''+jgt+'px').show();
  147. this._hidescrolls();
  148. };
  149. this.resize = function(){
  150. var off = this.mobj.offset();
  151. var l = off.left+this.mobj.width()-6,hei = obj.clientHeight;
  152. $('#'+this.scrollsid+'_min').css({'left':''+l+'px','top':''+off.top+'px','height':''+hei+'px'});
  153. }
  154. };
  155. $.fn.rocktouch = function(lx, options){
  156. var can = $.extend({}, options);
  157. var clsa = new rockclass(this[0], can);
  158. clsa._init();
  159. clsa[lx]();
  160. return clsa;
  161. };
  162. })(jQuery);