替换官方默认动画和图标

编辑
  • 文档创建者:flyingsnake
  • 浏览次数:3356次
  • 编辑次数:15次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

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



    2. 思路

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


    3. 操作步骤

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


    3.1 准备图片

    准备替换的动画,以下面的 gif 图为例:




    注:可右击图片,进行下载。

    下载后修改名称为 loader.gif,放置在%FR_HOME%\webapps\webroot\help\css目录下。


    3.2 新建 CSS、JavaScript 文件


    1)用记事本或任意文本工具新建一个 CSS 文件,命名为 loader.css,CSS 文件内容如下:

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

    同样放置在%FR_HOME%\webapps\webroot\help\css下。

    2)相同的方法新建一个 loader.js 文件,内容如下:

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

    同样放置在%FR_HOME%\webapps\webroot\help\css下。




    3.3 引用 CSS、JavaScript 文件

    打开设计器,选择服务器-服务器配置,切换到引用 CSS 标签,选择 loader.css 并增加,如下图:

    再切换到引用 JavaScript 标签,选择 loader.js 并增加,如下图:

    保存后预览,即可看到如上效果。

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

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

    此处提供一些动态加载的动画:网页加载 loading-GIF 动画图


    4. 预览效果

    4.1 PC 端预览效果

    如上


    4.2 移动端预览效果

    注:不支持移动端。


    附件列表


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

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

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