分享一个discuz touch端的jQuery上拉刷新组件
2016-06-30 10:07
387 查看
最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://www.qugu.vip/static/',不多说直接上代码
var pullrefresh = { init : function() { var pos = {}; var status = false; var divobj = null; var contentobj = null; var reloadflag = false; $('body').on('touchstart', function(e) { e = mygetnativeevent(e); pos.startx = e.touches[0].pageX; pos.starty = e.touches[0].pageY; }) .on('touchmove', function(e) { e = mygetnativeevent(e); pos.curposx = e.touches[0].pageX; pos.curposy = e.touches[0].pageY; if(pos.curposy - pos.starty < 0 && !status) { return; } if(!status && $(window).scrollTop() <= 0) { status = true; divobj = document.createElement('div'); divobj = $(divobj); divobj.css({'position':'relative', 'margin-left':'-85px'}); $('body').prepend(divobj); contentobj = document.createElement('div'); contentobj = $(contentobj); contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'}); contentobj.html('<img src="'+ STATICURL + 'image/mobile/images/icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>'); contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'}); divobj.prepend(contentobj); pos.topx = pos.curposx; pos.topy = pos.curposy; } if(!status) { return; } if(status == true) { var pullheight = pos.curposy - pos.topy; if(pullheight >= 0 && pullheight < 150) { divobj.css({'height': pullheight/2 + 'px'}); contentobj.css({'top': (-30 + pullheight/2) + 'px'}); if(reloadflag) { contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'}); contentobj.find('#refreshtxt').html('下拉可以刷新'); } reloadflag = false; } else if(pullheight >= 150) { divobj.css({'height':pullheight/2 + 'px'}); contentobj.css({'top': (-30 + pullheight/2) + 'px'}); if(!reloadflag) { contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'}); contentobj.find('#refreshtxt').html('松开可以刷新'); } reloadflag = true; } } e.preventDefault(); }) .on('touchend', function(e) { if(status == true) { if(reloadflag) { contentobj.html('<img src="'+ STATICURL + 'image/mobile/images/icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...'); contentobj.animate({'top': (-30 + 75) + 'px'}, 618, 'linear'); divobj.animate({'height': '75px'}, 618, 'linear', function() { window.location.reload(); }); return; } } divobj.remove(); divobj = null; status = false; pos = {}; }); } }; function mygetnativeevent(event) { while(event && typeof event.originalEvent !== "undefined") { event = event.originalEvent; } return event; }
相关文章推荐
- jQuery Ajax 上传文件处理方式介绍(推荐)
- JQuery对CheckBox的一些相关操作
- jQuery获取checkbox选中项等操作及注意事项
- 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
- JQuery点击弹出与收回事件(加号变减号)
- jquery实现清清除单(适用表单内所有控件的置空)
- JQuery实现的动态Table(转)
- jquery简单的点击切换效果
- MVC中使用Ajax提交数据 Jquery Ajax方法传值到action
- ASP.NET MVC中使用jQuery时的浏览器缓存问题详解
- 关于绝对路径和相对路径
- jquery中的attributes和properties
- Jquery 元素遍历,取值
- jquery.validate 设置验证信息的显示
- jquery $(window).height()获取的不是窗口的高度解决
- jquery.validate失去焦点时就验证
- JQuery解析XML数据
- jquery 获取checked选中的值
- 自定义jQuery插件Step by Step
- jQuery插件开发的两种方法及$.fn.extend的详解