util

<style type="text/css">
    .tips-top{
        background:#333;color:#fff;height:0.3rem;line-height:0.3rem;width:100%;text-align:center;position:fixed;top:-0.2rem;z-index: 99999999;
    }
    #errorTipsRgt,#errorTips,.tips-center{margin:0 auto;  background:#333;color:#fff;line-height:0.3rem;width:80%;text-align:center;position:fixed;top:35%;left:7%;z-index: 99999999;display:none;height: auto;word-break: break-all;padding: 0 0.1rem; border-radius: 4px;
    }
    #errorTipsRgt,#errorTips{top:25%;}
    #loading{background:none;}
    #loading .loader-circle{background:none;-webkit-box-shadow: none;}
</style>
<div id="tips_top" class="tips-top none"></div>
<div id="tips_center" class="tips-center none"></div>
<div id="errorTips" class="tips-center"><span id="qt_global_text"></span></div>
<div id="loading" style="display:none;">
    <div class="loader-circle">
        <div class="spinner" style="width: 20px;height: 20px;position: relative;float: left;">
            <div class="spinner-container container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container2">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container3">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>正在加载中...</div>
</div>
<div id="mask" style="background:black;width:100%;height:100%;position:fixed;z-index:5;left: 0; top: 0; display: none">
</div>
<div id="confirmBox" style="position: fixed;top: 32%;left:0;right:0;width:100%;height:100%;display: none; z-index: 999">
    <div class="panel-feedback">
        <div class="panel-fdback-cont">
            <p class="ta_l" style="text-align: center;"></p>
        </div>
        <div class="btns btns-t2">
            <span class="btn btn-cancel">取消</span>
            <span class="btn btn-confirm">确定</span>
        </div>
    </div>
</div>

util.tips = function(text, cb) {
        $("#tips_top").text(text).animate({
            top: 0
        }, 500, 'ease-out', function() {
            cb && cb();
        });

        clearTimeout(this.tips_ttl);
        this.tips_ttl = setTimeout(function() {
            $("#tips_top").text(text).animate({
                top: '-2rem'
            }, 500, 'ease-out');
        }, 2000);
    };
    tips_center = function(text, cb) {
        $("#tips_center").html(text).fadeIn(500, function() {
            cb && cb();
        });
        clearTimeout(this.tips_center_ttl);
        this.tips_center_ttl = setTimeout(function() {
            $("#tips_center").html(text).fadeOut(500);
        }, 2000);
    };
    util.confirm = function(opt) {
        var $confirmBox = $("#confirmBox");
        var $mask = $("#mask");
        if (opt.alert) {
            $confirmBox.find('.btn-cancel').hide();
        } else {
            $confirmBox.find('.btn-cancel').show();
        }
        $confirmBox.find('.ta_l').html(opt.data);

        $confirmBox.find('.btn-confirm').text(opt.confirm_text || '确定');
        $confirmBox.find('.btn-cancel').text(opt.cancel_text || '取消');

        $mask.show().css({
            'opacity': '0.2'
        });
        $confirmBox.show();
        $confirmBox.off('click', '.btn-confirm').on('click', '.btn-confirm', function() {
            opt.confirm && opt.confirm($confirmBox);
            return false;
        });

        $confirmBox.off('click', '.btn-cancel').on('click', '.btn-cancel', function() {
            $mask.hide();
            $confirmBox.hide();
            opt.cancel && opt.cancel($confirmBox);
            return false;
        });
    };

Q_util.baseRenderDom = function (opt) {
        var method = opt.method || 'html';
        var html = template(opt.tpl, {
            data: opt.data,
            flag: opt.flag
        });

        if (method === 'html') {
            opt.dom.html(html);
        } else {
            opt.dom.append(html);
        }
        opt.cb && opt.cb();
    };

    Q_util.renderErr = function (opt) {
        var html = '<p style="text-align: center;padding: 20px 0;">' + opt.msg + ' <p>';
        opt.el.html(html);
    };
    /**
     *  基础选项卡
     *  @param opt
     *  opt.el  必选 点击元素的container jq对象
     *  opt.subEl  必选 子元素
     *  opt.curEl  可选 切换的内容类
     *  opt.ev  可选 默认为 click 事件
     *  opt.className  可选，默认为current
     *  opt.cb  可选 回调函数
     */
    Q_util.baseTab = function (opt) {
        var event = opt.ev || 'tap';
        var currentClass = opt.className || 'current';
        var subEl = opt.subEl || '';
        opt.el.on(event, subEl, function () {
            var me = $(this);
            var index = opt.el.find(subEl).index(this);
            me.addClass(currentClass).siblings().removeClass(currentClass);
            opt.cb && opt.cb();
            if (!opt.curEl)
                return;
            opt.curEl.hide();
            opt.curEl.eq(index).fadeIn();
            opt.next && opt.next();
        });
    };
// 终端判断
    Q_util.mobile = {
        versions: function () {
            var u = navigator.userAgent,
                app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    Q_util.isWX = function () {
        var ua = navigator.userAgent.toLowerCase();
        return (/micromessenger/.test(ua)) ? true : false;
    };
Q_util.loadMore = function(settings) {
        settings = settings || {};
        var opt = {
            el: "",
            tpl: "",
            ul: ">ul",
            //设置加载更多按钮里的提示信息
            msg: {
                loading: "数据加载中...",
                none: "暂无数据",
                loadmore: "加载更多",
                fail: "数据加载失败"
            },
            //处理数据接口字段兼容问题
            resFilter: function(res) {
                return res.result;
            },
            //设置加载更多按钮的样式，大多是设置上下距离
            css: {
                "text-align": "center",
                "padding": "0.3rem 0",
                "color": "#999"
            },
            //ajax默认参数
            url: "",
            data: {},
            ajax: {
                type: "POST",
                dataType: "json",
                cache: false
            },
            click: "tap",
            defaultPageno: 1,
            //是否是分页数据
            setpage: true,
            //是否初始化时加载
            loadnow: true
        };
        //深层拷贝 true
        $.extend(true, opt, settings);
        var oWrap = $(opt.el);
        //防止多次调用
        if (oWrap.attr("data-loadMore")) {
            return;
        }
        oWrap.attr("data-loadMore", true);
        var oLoadMore = $("<div>").css(opt.css).attr("data-pageno", opt.defaultPageno);
        var oUl = oWrap.children("ul");
        oWrap.append(oLoadMore);
        oLoadMore.on(opt.click, function(event) {
            if (oLoadMore.attr("data-loading") == 1) return;
            if (oLoadMore.attr("data-none") == 1) return;
            //是否有分页
            if (opt.setpage) {
                opt.data.pageno = oLoadMore.attr("data-pageno");
            }
            if (!opt.ajax.cache) {
                opt.data._ = +new Date();
            }
            oLoadMore.attr("data-loading", 1).html(opt.msg.loading);
            $.ajax({
                url: opt.url,
                type: opt.ajax.type,
                dataType: opt.ajax.dataType,
                data: opt.data
            }).done(function(res) {
                var tplData = {};
                var tpl = "";
                tplData = opt.resFilter(res);
                if (res.code == 9999) {
                    //可定制模板
                    if ($.isFunction(opt.tpl)) {
                        tpl = opt.tpl(res);
                    } else {
                        tpl = opt.tpl;
                    }

                    var sHtml = template(tpl, tplData);
                    if (opt.setpage) {
                        if (tplData.pageno == 1 && tplData.val.length == 0) {
                            oLoadMore.html(opt.msg.none);
                            oLoadMore.attr("data-none", 1);
                            opt.noneCb && opt.noneCb(oLoadMore);
                        } else if (tplData.pageno * 1 >= tplData.pages * 1) {
                            oLoadMore.hide();
                        } else {
                            oLoadMore.html(opt.msg.loadmore);
                        }
                        oLoadMore.attr("data-pageno", tplData.pageno * 1 + 1);
                        oUl.append(sHtml);
                    } else {
                        if (tplData.val && tplData.val.length == 0) {
                            opt.noneCb && opt.noneCb(oLoadMore);
                        } else {
                            oWrap.append(sHtml);
                        }
                        oLoadMore.hide();
                    }
                    opt.cb && opt.cb(res);
                } else if (res.code == 1003) {
                    // 未登录

                } else {
                    oLoadMore.html(opt.msg.none);
                    opt.noneCb && opt.noneCb(oLoadMore);
                }

            }).fail(function() {
                oLoadMore.html(opt.msg.none);
                opt.noneCb && opt.noneCb(oLoadMore);
            }).always(function() {
                oLoadMore.attr("data-loading", 0);
            });
            event.preventDefault();
        });

        opt.loadnow && oLoadMore.trigger(opt.click);
    };