首页 > > 网页制作 > css >

Framework7初始化

2018-06-24 00:59:18来源：未知阅读 ()

/**
 * Framework7初始化
 * 需引用jQuery
 * author stumpx
 */

/*---------------------------函数---------------------------*/

/**
 * 为空判断
 * @param s
 * @returns {boolean}
 */
function isEmpty(s) {
    switch (typeof(s)) {
        case 'string':
            return !s.length;
            break;
        case 'array':
        case 'object':
            for (var i in s) return false;
            return false;
            return true;
            break;
        case 'undefined':
            return true;
            break;
        default:
            return !s;
            break;
    }
}

/**
 * 设置跨域
 * */
function crossDomain(allow) {
    if (!allow) return false;
    var settings = {
        crossDomain: !allow,
    };
    $.ajaxSetup(settings);
    $$.ajaxSetup(settings);
    return true;
}
/*---------------------------/函数---------------------------*/

/*tip插件*/
Framework7.prototype.plugins.tip = function(app) {
    'use strict';
    var $ = window.Dom7;
    var t7 = window.Template7;

    app.tip = function(params) {
        var defaults = {
            title: 'tipTitle',
            timeOut: 2000,
        };

        if (typeof params == 'string') {
            var obj = {};
            if (typeof arguments[0] == 'string') {
                obj.title = arguments[0];
            }
            if (typeof arguments[1] == 'number') {
                obj.timeOut = arguments[1];
            }
            params = obj || {};
        } else if (typeof params == 'object') {
            params = params || {};
        }

        for (var def in defaults) {
            if (typeof params[def] === 'undefined') {
                params[def] = defaults[def];
            }
        }

        $('.tip-modal').remove();

        var tipStr = '<div class="preloader-indicator-modal tip-modal"><span class="fg-white">' + params.title + '</span></div>';

        $('body').append(tipStr);
        $('.tip-modal').css('margin-left', -$('.tip-modal').outerWidth() / 2 + 'px');

        setTimeout(function() {
            $('.tip-modal').remove();
        }, params.timeOut);

        return $('.tip-modal')[0];
    };
};

/*dom操作对象*/
var $$ = Dom7;
/*初始化应用*/
var myApp = new Framework7({
    modalTitle: '',
    modalButtonOk: '确认',
    modalButtonCancel: '取消',
    modalPreloaderTitle: '加载中...',
    cache: false,
    material: false,
    pushState: false,
    swipePanel: 'left',
    swipeBackPage: false,
    swipePanelThreshold: 15,
    domCache: false,
    smartSelectBackText: '返回',
    smartSelectPickerCloseText: '完成',
    smartSelectPopupCloseText: '关闭',
    swipePanelOnlyClose: true,
    preloadPreviousPage: false,
    uniqueHistory: false,
});

$.ajaxSetup({ cache: false });
$$.ajaxSetup({ cache: false });

/*初始化视图*/
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});

/*ajax请求*/
$$(document).on('ajaxStart', function(e) {
    if (e.detail.xhr.requestUrl.indexOf('autocomplete-languages.json') >= 0) {
        return;
    }
    isShowLoading = true;
    setTimeout(function() {
        if (!!isShowLoading) {
            myApp.showIndicator();
        }
    }, 300);
});
$$(document).on('ajaxComplete', function(e) {
    isShowLoading = false;
    if (e.detail.xhr.requestUrl.indexOf('autocomplete-languages.json') >= 0) {
        return;
    }
    myApp.hideIndicator();
    var res = e.detail.xhr.responseText;
    if (res.match("^\{(.+:.+,*){1,}\}$")) {
        res = $.parseJSON(res);
        if (res.status == 0) {
            myApp.alert(res.info, function() {
                mainView.router.load({
                    url: res.url,
                    force: true,
                    ignoreCache: true,
                    reload: true,
                });
            });
        }
    } else {
        if (!!res.length) {
            $res = $('<div>' + res + '</div>');
            /*动态工具栏*/
            var $toolbar = $res.find('.toolbar').first();
            if (!!$toolbar.length) {
                if ($toolbar[0].localName == 'script') {
                    $toolbar = $($toolbar.html());
                    if (!!$toolbar.length) {
                        var $oldToolbar = $('.view-main .toolbar');
                        if ($oldToolbar.length) {
                            $oldToolbar.replaceWith($toolbar[0]);
                        } else {
                            $('.view-main').append($toolbar[0]);
                        }
                    }
                }
            }
            /*动态侧边栏-左*/
            var $panelLeft = $res.find('.panel-left').first();
            if (!!$panelLeft.length) {
                if ($panelLeft[0].localName == 'script') {
                    $panelLeft = $($panelLeft.html());
                    if (!!$panelLeft.length) {
                        var $oldPanelLeft = $('.panel-left');
                        if ($oldPanelLeft.length) {
                            $oldPanelLeft.html($panelLeft.html());
                        } else {
                            $('body').append($panelLeft[0]);
                        }
                    }
                }
            }
            /*动态侧边栏-右*/
            var $panelRight = $res.find('.panel-right').first();
            if (!!$panelRight.length) {
                if ($panelRight[0].localName == 'script') {
                    $panelRight = $($panelRight.html());
                    if (!!$panelRight.length) {
                        var $oldPanelRight = $('.panel-right');
                        if ($oldPanelRight.length) {
                            $oldPanelRight.html($panelRight.html());
                        } else {
                            $('body').append($panelRight[0]);
                        }
                    }
                }
            }
        }
    }
});
/*/ajax请求*/

/*显示隐藏导航栏、工具栏*/
$$(document).on('pageInit', function(e) {
    var $page = $(e.detail.page.container);
    if ($page.hasClass('no-navbar')) {
        myApp.hideNavbar('.page-on-center .navbar');
        /*$('.page-on-center .navbar').addClass('navbar-hidden');*/
    } else {
        myApp.showNavbar('.page-on-center .navbar');
        /*$('.page-on-center .navbar').removeClass('navbar-hidden');*/
    }
    if ($page.hasClass('no-toolbar')) {
        myApp.hideToolbar('.page-on-center .toolbar');
        /*$('.page-on-center .toolbar').addClass('toolbar-hidden');*/
    } else {
        myApp.showToolbar('.page-on-center .toolbar');
        /*$('.page-on-center .toolbar').removeClass('toolbar-hidden');*/
    }
});

/*打开picker*/
$(document).on('click', '[open-picker]', function() {
    var $picker = $($(this).attr('open-picker')).first();
    if (!$picker.length) return;
    if ($picker[0].localName == 'script') {
        myApp.pickerModal($picker.html());
    }
});

/*打开popup*/
$(document).on('click', '[open-popup]', function() {
    var $popup = $($(this).attr('open-popup')).first();
    if (!$popup.length) return;
    if ($popup[0].localName == 'script') {
        myApp.popup($popup.html());
    }
});
/*打开popover*/
$(document).on('click', '[open-popover]', function() {
    var $popover = $($(this).attr('open-popover')).first();
    if (!$popover.length) return;
    if ($popover[0].localName == 'script') {
        myApp.popover($popover.html(), this);
    }
});

/*打开alert*/
$(document).on('click', '[open-alert]', function() {
    myApp.alert($(this).attr('open-alert'));
});

/*日期选择*/
$(document).on('focus touchstart', '.calendar', function() {
    var $this = $(this);
    var normal = {
        closeOnSelect: true,
        input: this,
        dateFormat: 'yyyy-mm-dd',
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    };
    if (!!this.value) {
        normal.value = [this.value];
    }
    myApp.calendar($.extend({}, normal, $(this).data()));
});

/*下拉刷新*/
$(document).on('refresh', '.pull-to-refresh-content', function(e) {
    var $this = $(this);
    var url = $this.data('url');
    mainView.router.load({
        url: url,
        force: true,
        ignoreCache: true,
        reload: true,
    });
    myApp.pullToRefreshDone();
});

/*加载更多*/
isInfiniteScroll = true;
$(document).on('infinite', '.page-shop-list .infinite-scroll', function(e) {
    var $this = $(this);
    var url = $this.data('url');
    var nowPage = $this.data('now-page');
    var lastPage = $this.data('last-page');
    var infiniteScrollPreloaderEndStr = '<div class="content-block infinite-scroll-preloader">到底了！</div>';
    if (!!isInfiniteScroll) {
        isInfiniteScroll = false;
        if (nowPage >= lastPage) {
            isInfiniteScroll = true;
            myApp.detachInfiniteScroll($$('.infinite-scroll'));
            $this.find('.infinite-scroll-preloader').remove();
            $this.append(infiniteScrollPreloaderEndStr);
            return;
        } else {
            setTimeout(function() {

                $.ajax({
                    url: url,
                    type: 'POST',
                    async: false,
                    /*true：异步，false：同步*/
                    data: { p: nowPage + 1 },
                    success: function(res) {
                        if (!res.match("^\{(.+:.+,*){1,}\}$")) {
                            isInfiniteScroll = true;
                            var $res = $('<div>' + res + '</div>');
                            var $list = $res.find('.shop-list');
                            var nowPage = $res.find('[data-now-page]').data('now-page');
                            var lastPage = $res.find('[data-last-page]').data('last-page');
                            $this.data({
                                nowPage: nowPage,
                                lastPage: lastPage,
                            });
                            $this.find('.shop-list').append($list.html());
                        }
                    }
                });

            }, 150);
        }
    }
});