接口作用
提供自定义的报表加载动画。
接口内容
$.extend(FR, {
HtmlLoader : function(){
return {
loadingEffect : function(cfg) {}
}
}()
});
$.extend(FR, {
HtmlLoader: function () {
return {
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');
}
}
}
}()
});
接口接入
需要使用JavaScriptFileHandler接口,引入自定义的JavaScript文件,然后在xml中注册Handler的实现类。
<extra-core>
<JavaScriptFileHandler class="com.fr.plugin.loading.GradientFileLoader"/>
</extra-core>
示例效果
接口示例
示例源码:https://code.fanruan.com/fanruan/demo-page-loading
注意事项
同一时间,仅能有一个实现了该接口的插件生效。