移动平台插件库--自定义滚动插件

(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);