分享一个discuz touch端的jQuery下拉刷新组件
最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码
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 + '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 + '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;
}
}
if(divobj != null)// fixed bugs by Nelson 20160818
{
divobj.remove();
}
divobj = null;
status = false;
pos = {};
});
}
}; function mygetnativeevent(event) { while(event && typeof event.originalEvent !== "undefined") {
event = event.originalEvent;
}
return event;
}
分享一个discuz touch端的jQuery下拉刷新组件的更多相关文章
- SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件
SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...
- 打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)
前言 近期在做项目时,使用了一个开源的下拉刷新ListView组件.极其的不稳定,bug还多.稳定的组件又写得太复杂了,jar包较大.在我的一篇博客中也讲述过下拉刷新的实现,即Android打造(Li ...
- Google自己的下拉刷新组件SwipeRefreshLayout
SwipeRefreshLayout SwipeRefreshLayout字面意思就是下拉刷新的布局,继承自ViewGroup,在support v4兼容包下,但必须把你的support librar ...
- Android内置下拉刷新组件SwipeRefreshLayout
也许下拉刷新之前,你可能会使用一些第三方的开源库,例如PullToRefresh, ActionBar-PullToRefresh等待,但现在有的正式组成部分---SwipeRefreshLayout ...
- Android之SwipeRefreshLayout下拉刷新组件
SwipeRefreshLayout概述 SwipeRefrshLayout是Google官方更新的一个Widget,可以实现下拉刷新的效果.该控件集成自ViewGroup在support-v4兼容包 ...
- Google官方下拉刷新组件---SwipeRefreshLayout
今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新增加的一个widget,于是赶紧抢先体验学习下. SwipeRefreshL ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- vue-上拉加载、下拉刷新组件
vue在移动端开发过程中,上拉加载.下拉刷新是页面的基本需求,现在给大家介绍一种基于touch事件封装的刷新组件. 组件支持传参.传递事件.请求成功异步回调.上拉与触底触发加载或刷新. 父子组件间的通 ...
随机推荐
- jsp 头像上传显示部分代码实现
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%> <% ...
- .Net Core--目录
参考资料: .Net Core官网 https://www.microsoft.com/net/core 官方文档: https://docs.asp.net 博客园中文文档: http://www. ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Sql Server函数全解<一>字符串函数
阅读目录 1.ASCII()函数 2.CHAR()函数 3.LEFT()函数 4.RIGHT()函数 5.LTRIM()函数 6.RTRIM()函数 7.STR()函数 8.字符串逆序的函数REVER ...
- getComputedStyle/currentStyle/style之间的爱恨情仇
getComputedStyle是? getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...
- python3的编码问题
Python3对文本(str)和二进制数据(bytes)作了更为清晰的区分. 文本默认是以Unicode编码(python2默认是ascii),由str类型表示,二进制数据则由bytes类型表示. s ...
- Cordova环境搭建 & HelloWorld
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- iOS web remote debug 正确的姿势
在使用iOS Remote debug需要做以下准备 1. iOS devices 开启java script and web inspector 开启方式如下: 2. mac OS 自带的Safar ...
- [Sass]嵌套
[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿 ...
- android 实现返回键执行home键方法
在公司的产品开发,中老板很是执着于,不要看到启动界面,但是又不想去掉启动界面. so 实现返回键执行home键方法. public boolean onKeyDown(int keyCode, Key ...