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);
    };
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容