替换官方默认动画和图标

编辑
  • 文档创建者:flyingsnake
  • 浏览次数:4251次
  • 编辑次数:22次
  • 最近更新:Wendy123456 于 2019-12-05
  • 1. 概述

    1.1 预期效果

    对于一些官方图标客户不满意的情况,此处提供一个方法供大家替换。例如,可将正在加载的图标替换成如下样式:

    222

    1.2 思路

    通过 CSS 替换官方加载动画图片。

    2. 操作步骤

    下面提供一种只需要 CSS、JavaScript 文件和加载图标,即可替换官方加载动画图片的方法。

    2.1 材料准备

    下载并解压该压缩包:test.zip

    将解压到的 test 文件夹放到 %FR_HOME%\webapps\webroot\help\css 路径下。如下图所示:

    100.png

    2.1.1  loader.gif

    文件夹中的  loader.gif 是本文示例的加载动画图片,如下图所示:

    123.gif

    注: JAR 包时间在 2019-12-05 及之后的 FineReport 设计器中,加载动画与之前的有所不同。

            如需使用之前的加载动画,可下载下面的文件并替换到上文的 test 文件夹中。

    点击下载文件:loader.gif

    2.1.2 loader.css

    loader.css 文件内容如下所示:

    .loading-local-indicator-pic {
        background: url('${contextPath}/help/css/test/loader.gif');
        background-size: cover;
    }
    .loading-whole-indicator-pic {
        background: url('${contextPath}/help/css/test/loader.gif');
        background-size: cover;
    }

    注:用户若需修改 loader.gif  文件的名字或路径,请自行修改代码。

    2.1.3 loader.js

    loader.js 文件内容如下所示:

    FR.HtmlLoader.useCustomLoadingAnimation = function() {return true;}

    2.2 引用 CSS、JavaScript 文件

    1)在 FineReport 设计器中,选择服务器>服务器配置>引用Css,选择 loader.css 并增加,如下图所示:

    1572848306610582.png

    2)点击引用JavaScript ,选择 loader.js 并增加,如下图所示:

    1572848415834506.png

    注 1:更换图标时,只需要把加载的图标 loader.gif 替换即可看到新图标(需要清空一下浏览器缓存)。

    注 2:替换的图标大小不要超过 64*64 ,否则看到的图标会显示不全。

    2.3 预览效果

    PC 端预览效果如本文 1.1 章「预期效果」中相同。

    注:该方法不支持移动端。

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]