(function ($) {
if (!$) {
throw "请先加载jqUi库!";
}
if (!baseTools) {
throw "请先加载mobile.tools.js库!";
}
/**
* 获取指定区域可以使用的区域
* @param params {CUR_PANEL:'Panel的dom对象',GD_TAGOBJ:'固定参照节点对象'}
*/
var getUserRect = function (params) {
var userRect = {top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0};
var gdTagObjRect = {top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0};
if (params.GD_TAGOBJ) {
var temRect = params.GD_TAGOBJ.getBoundingClientRect();
gdTagObjRect.top = temRect.top;
gdTagObjRect.left = temRect.left;
gdTagObjRect.bottom = temRect.bottom;
gdTagObjRect.right = temRect.right;
gdTagObjRect.width = temRect.width;
gdTagObjRect.height = temRect.height;
}
var panelRect = params.CUR_PANEL[0].getBoundingClientRect();
//计算可使用的区域
userRect.top = gdTagObjRect.bottom;
userRect.left = panelRect.left;
userRect.bottom = panelRect.bottom;
userRect.right = panelRect.right;
userRect.width = userRect.right - userRect.left;
userRect.height = userRect.bottom - userRect.top;
return userRect;
};
/**
* 自定义滚动插件
* @param params 参数格式{CUR_PANEL:'当前PANEL对象',GD_TAGOBJ:'固定参照节点对象'
* callback:{scrollend:fn(el,args),scrollend:fn(el,args)}}可以使用滚动事件有scrollstart/scrollend
* @returns {*|Object|Array}
*/
$.fn.baseScroller = function (params) {
if (this.length != 1)
return;
var opts = $.extend({
callback: {}
}, params);
var curItem = this[0];
var obj = $(curItem);
var baseScroller = obj.parent();
if (baseScroller[0].id.indexOf("baseScrollerDiv") == -1) {
throw "请为滚动区添加baseScrollerDiv!";
}
var userRect = getUserRect(opts);
if (mbTools.mbObj) {
//解决在android设备上输入法显示关闭时无法resize的问题
$(window).one('resize', function () {
userRect = getUserRect(opts);
baseScroller.css({height: userRect.height});
});
}
//防止多次测试滚动,提高响应速度
if (curItem.getAttribute("INIT_SCROLLER") == "YES") {
myScroller.scrollToTop();
return this;
}
baseScroller[0].setAttribute("INIT_SCROLLER", "YES");
/*
//获取滚动时参照节点对象的位置信息
var gdTagObjRectBtm = 0;
if (params.GD_TAGOBJ) {
gdTagObjRectBtm = params.GD_TAGOBJ.getBoundingClientRect().bottom;
}
//获取当前Panel的位置信息
var panelRect = params.CUR_PANEL[0].getBoundingClientRect();
//计算可滚动区域的高度
var scrollHight = parseInt(panelRect.bottom) - parseInt(gdTagObjRectBtm) - 2;
baseScroller.css({height: scrollHight, width: '100%', position: 'relative'});
*/
baseScroller.css({'margin-top': '2px', height: parseInt(userRect.height) - 2, width: '100%', position: 'relative'});
var myScroller = obj.scroller({
scrollBars: true,
verticalScroll: true,
vScrollCSS: "afScrollbar"
});
opts.scroller = myScroller;
//返回当前滚动区的scroller对象
this.getScroller = function () {
return myScroller;
};
//绑定指定事件
if (opts.callback) {
for (var key in opts.callback) {
//逐一绑定事件
$.bind(myScroller, key, function (e) {
if (opts.callback[key]) {
opts.callback[key](this, opts);
}
});
}
}
return this;
};
//是否分页逐级加载完成
var bFinish = true;
/**
* 自定义分页查询滚动插件
* @param params 参数格式{CUR_PANEL:'当前PANEL对象',GD_TAGOBJ:'固定参照节点对象',
* bShow:'是否遮罩',msg:'提示信息',delay:3000,
* callback:{infiniteend:fn(el,args)}}
* @returns {*|Object|Array}
*/
$.fn.baseScrollerPageQuery = function (params) {
if (this.length != 1)
return;
var opts = $.extend({
bShow: params.bShow === undefined ? false : params.bShow,
msg: params.msg === undefined ? '处理中,请稍候...' : params.msg,
delay: params.delay === undefined ? 3000 : params.delay,
callback: {}
}, params);
var curItem = this[0];
var obj = $(curItem);
var myScroller = obj.baseScroller(opts).getScroller();
//无限滚动,对应的事件是infinite-scroll、infinite-scroll-end
myScroller.addInfinite();
//在顶部滚动时对应的事件是refresh-release
// myScroller.addPullToRefresh();
// $.bind(myScroller, "refresh-release", function () {
// console.log("refresh-release");
// });
myScroller.enable();
var infDivID = this[0].id + "_infinite";
$.bind(myScroller, "infinite-scroll", function () {
// console.log("infinite-scroll>>" + bFinish);
if (!bFinish)
return;
bFinish = false;
var self = this;
var infObj = $(self.el).find("#" + infDivID);
if (infObj.size() == 0)
// $(self.el).append("<div id='" + infDivID + "' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>"
// + opts.msg + "</div>");
$(self.el).append("<div id='" + infDivID + "' class='baseMask' style='height: 40px; line-height: 40px;'>"+ opts.msg + "</div>");
$.bind(myScroller, "infinite-scroll-end", function () {
// console.log("infinite-scroll-end");
$.unbind(myScroller, "infinite-scroll-end");
if (opts.bShow)
baseTools.showMask(opts.msg);
//只有到了底部且有提示加载时才能够触发回调
if (0 >= (self.el.scrollHeight - self.el.offsetHeight)) {
setTimeout(function () {
if (opts.callback.infiniteend)
opts.callback.infiniteend(this, opts);
$(self.el).find("#" + infDivID).remove();
self.clearInfinite();
bFinish = true;
}, opts.delay);
}
if (opts.bShow)
baseTools.hideMash();
});
});
return this;
};
})(af);
if (!$) {
throw "请先加载jqUi库!";
}
if (!baseTools) {
throw "请先加载mobile.tools.js库!";
}
/**
* 获取指定区域可以使用的区域
* @param params {CUR_PANEL:'Panel的dom对象',GD_TAGOBJ:'固定参照节点对象'}
*/
var getUserRect = function (params) {
var userRect = {top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0};
var gdTagObjRect = {top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0};
if (params.GD_TAGOBJ) {
var temRect = params.GD_TAGOBJ.getBoundingClientRect();
gdTagObjRect.top = temRect.top;
gdTagObjRect.left = temRect.left;
gdTagObjRect.bottom = temRect.bottom;
gdTagObjRect.right = temRect.right;
gdTagObjRect.width = temRect.width;
gdTagObjRect.height = temRect.height;
}
var panelRect = params.CUR_PANEL[0].getBoundingClientRect();
//计算可使用的区域
userRect.top = gdTagObjRect.bottom;
userRect.left = panelRect.left;
userRect.bottom = panelRect.bottom;
userRect.right = panelRect.right;
userRect.width = userRect.right - userRect.left;
userRect.height = userRect.bottom - userRect.top;
return userRect;
};
/**
* 自定义滚动插件
* @param params 参数格式{CUR_PANEL:'当前PANEL对象',GD_TAGOBJ:'固定参照节点对象'
* callback:{scrollend:fn(el,args),scrollend:fn(el,args)}}可以使用滚动事件有scrollstart/scrollend
* @returns {*|Object|Array}
*/
$.fn.baseScroller = function (params) {
if (this.length != 1)
return;
var opts = $.extend({
callback: {}
}, params);
var curItem = this[0];
var obj = $(curItem);
var baseScroller = obj.parent();
if (baseScroller[0].id.indexOf("baseScrollerDiv") == -1) {
throw "请为滚动区添加baseScrollerDiv!";
}
var userRect = getUserRect(opts);
if (mbTools.mbObj) {
//解决在android设备上输入法显示关闭时无法resize的问题
$(window).one('resize', function () {
userRect = getUserRect(opts);
baseScroller.css({height: userRect.height});
});
}
//防止多次测试滚动,提高响应速度
if (curItem.getAttribute("INIT_SCROLLER") == "YES") {
myScroller.scrollToTop();
return this;
}
baseScroller[0].setAttribute("INIT_SCROLLER", "YES");
/*
//获取滚动时参照节点对象的位置信息
var gdTagObjRectBtm = 0;
if (params.GD_TAGOBJ) {
gdTagObjRectBtm = params.GD_TAGOBJ.getBoundingClientRect().bottom;
}
//获取当前Panel的位置信息
var panelRect = params.CUR_PANEL[0].getBoundingClientRect();
//计算可滚动区域的高度
var scrollHight = parseInt(panelRect.bottom) - parseInt(gdTagObjRectBtm) - 2;
baseScroller.css({height: scrollHight, width: '100%', position: 'relative'});
*/
baseScroller.css({'margin-top': '2px', height: parseInt(userRect.height) - 2, width: '100%', position: 'relative'});
var myScroller = obj.scroller({
scrollBars: true,
verticalScroll: true,
vScrollCSS: "afScrollbar"
});
opts.scroller = myScroller;
//返回当前滚动区的scroller对象
this.getScroller = function () {
return myScroller;
};
//绑定指定事件
if (opts.callback) {
for (var key in opts.callback) {
//逐一绑定事件
$.bind(myScroller, key, function (e) {
if (opts.callback[key]) {
opts.callback[key](this, opts);
}
});
}
}
return this;
};
//是否分页逐级加载完成
var bFinish = true;
/**
* 自定义分页查询滚动插件
* @param params 参数格式{CUR_PANEL:'当前PANEL对象',GD_TAGOBJ:'固定参照节点对象',
* bShow:'是否遮罩',msg:'提示信息',delay:3000,
* callback:{infiniteend:fn(el,args)}}
* @returns {*|Object|Array}
*/
$.fn.baseScrollerPageQuery = function (params) {
if (this.length != 1)
return;
var opts = $.extend({
bShow: params.bShow === undefined ? false : params.bShow,
msg: params.msg === undefined ? '处理中,请稍候...' : params.msg,
delay: params.delay === undefined ? 3000 : params.delay,
callback: {}
}, params);
var curItem = this[0];
var obj = $(curItem);
var myScroller = obj.baseScroller(opts).getScroller();
//无限滚动,对应的事件是infinite-scroll、infinite-scroll-end
myScroller.addInfinite();
//在顶部滚动时对应的事件是refresh-release
// myScroller.addPullToRefresh();
// $.bind(myScroller, "refresh-release", function () {
// console.log("refresh-release");
// });
myScroller.enable();
var infDivID = this[0].id + "_infinite";
$.bind(myScroller, "infinite-scroll", function () {
// console.log("infinite-scroll>>" + bFinish);
if (!bFinish)
return;
bFinish = false;
var self = this;
var infObj = $(self.el).find("#" + infDivID);
if (infObj.size() == 0)
// $(self.el).append("<div id='" + infDivID + "' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>"
// + opts.msg + "</div>");
$(self.el).append("<div id='" + infDivID + "' class='baseMask' style='height: 40px; line-height: 40px;'>"+ opts.msg + "</div>");
$.bind(myScroller, "infinite-scroll-end", function () {
// console.log("infinite-scroll-end");
$.unbind(myScroller, "infinite-scroll-end");
if (opts.bShow)
baseTools.showMask(opts.msg);
//只有到了底部且有提示加载时才能够触发回调
if (0 >= (self.el.scrollHeight - self.el.offsetHeight)) {
setTimeout(function () {
if (opts.callback.infiniteend)
opts.callback.infiniteend(this, opts);
$(self.el).find("#" + infDivID).remove();
self.clearInfinite();
bFinish = true;
}, opts.delay);
}
if (opts.bShow)
baseTools.hideMash();
});
});
return this;
};
})(af);