【仅供内部供应商使用,不提供对外解答和培训】

Page tree

【仅供内部供应商使用,不提供对外解答和培训】

Skip to end of metadata
Go to start of metadata

前言

FineReport V8.0中,默认的加载等待动画是一张GIF图片,以及“正在加载”的文字说明。在特殊的应用场景中,可能需要根据实际项目的需求,提供不同的加载动画,那么久可以使用页面加载动画接口进行插件开发来实现目的。

关键接口

加载动画实现函数
FR.HtmlLoader.loadingEffect

 

默认的实现
FR.HtmlLoader.loadingEffect = function (cfg) {
    var el = cfg.el;
    var config = $.extend({
        show : false,
        overflow : false
    }, cfg || {});
    var $indicator = el.data('indicator');
    if (!$indicator) {
        $indicator = $("<div class='load-indicator'></div>");
        $("<div class='loading-ec-indicator'></div>").appendTo($indicator);
        $("<div class ='text-indicator' style='font-size:11pt'>" + FR.i18nText("FR-Basic_Loading") + "</div>").appendTo($indicator);
        var o = {
            position: 'fixed',
            margin: 'auto',
            left: '0px',
            right: '0px',
            top: '0px',
            bottom: '0px',
            height: '64px',
            width: '64px'
        };
        $indicator.css(o);
        el.data('indicator', $indicator);
    }

    if (!config.show) {
        $indicator.detach();
        //加载完再auto
        el.css('overflow', 'auto');
        el.css('overflow', config.overflow || 'auto');
    } else if (config.show && !$indicator.is(':visible')) {
        el.append($indicator);
        //如果加载动画的高度宽度小于当前报表块的展示区域, 会出现滚动条, 所以要hidden
        el.css('overflow', 'hidden');
    }
};

 

只需要在自己的JavaScript文件中重写这个函数,就可以实现自定义的加载动画了,不管是用全新的gif图片,还是使用Canvas来绘画都是可以的。

示例代码

https://git.oschina.net/fanruan/plugins-free/tree/master/plugin-page-loading

效果图

  • No labels