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);
    };
    /**
     *  基礎(chǔ)選項(xiàng)卡
     *  @param opt
     *  opt.el  必選 點(diǎn)擊元素的container jq對(duì)象
     *  opt.subEl  必選 子元素
     *  opt.curEl  可選 切換的內(nèi)容類
     *  opt.ev  可選 默認(rèn)為 click 事件
     *  opt.className  可選貌虾,默認(rèn)為current
     *  opt.cb  可選 回調(diào)函數(shù)
     */
    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內(nèi)核
                presto: u.indexOf('Presto') > -1, //opera內(nèi)核
                webKit: u.indexOf('AppleWebKit') > -1, //蘋果灰粮、谷歌內(nèi)核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
                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應(yīng)該程序趾唱,沒有頭部與底部
            };
        }(),
        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",
            //設(shè)置加載更多按鈕里的提示信息
            msg: {
                loading: "數(shù)據(jù)加載中...",
                none: "暫無數(shù)據(jù)",
                loadmore: "加載更多",
                fail: "數(shù)據(jù)加載失敗"
            },
            //處理數(shù)據(jù)接口字段兼容問題
            resFilter: function(res) {
                return res.result;
            },
            //設(shè)置加載更多按鈕的樣式禾锤,大多是設(shè)置上下距離
            css: {
                "text-align": "center",
                "padding": "0.3rem 0",
                "color": "#999"
            },
            //ajax默認(rèn)參數(shù)
            url: "",
            data: {},
            ajax: {
                type: "POST",
                dataType: "json",
                cache: false
            },
            click: "tap",
            defaultPageno: 1,
            //是否是分頁數(shù)據(jù)
            setpage: true,
            //是否初始化時(shí)加載
            loadnow: true
        };
        //深層拷貝 true
        $.extend(true, opt, settings);
        var oWrap = $(opt.el);
        //防止多次調(diào)用
        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);
    };
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市窃这,隨后出現(xiàn)的幾起案子算撮,更是在濱河造成了極大的恐慌抖坪,老刑警劉巖溪烤,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件味咳,死亡現(xiàn)場(chǎng)離奇詭異庇勃,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)槽驶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門责嚷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人掂铐,你說我怎么就攤上這事罕拂。” “怎么了堡纬?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵聂受,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我烤镐,道長(zhǎng),這世上最難降的妖魔是什么棍鳖? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任炮叶,我火速辦了婚禮,結(jié)果婚禮上渡处,老公的妹妹穿的比我還像新娘镜悉。我一直安慰自己,他們只是感情好医瘫,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布侣肄。 她就那樣靜靜地躺著,像睡著了一般醇份。 火紅的嫁衣襯著肌膚如雪稼锅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天僚纷,我揣著相機(jī)與錄音矩距,去河邊找鬼。 笑死怖竭,一個(gè)胖子當(dāng)著我的面吹牛锥债,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播痊臭,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼哮肚,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了广匙?” 一聲冷哼從身側(cè)響起允趟,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎艇潭,沒想到半個(gè)月后拼窥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體戏蔑,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年鲁纠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了总棵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡改含,死狀恐怖情龄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捍壤,我是刑警寧澤骤视,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站鹃觉,受9級(jí)特大地震影響专酗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜盗扇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一祷肯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疗隶,春花似錦佑笋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至坚弱,卻和暖如春蜀备,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背史汗。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國打工琼掠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人停撞。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓瓷蛙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親戈毒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子艰猬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容