CSS 修改超链对话框的标题栏背景色

  • 文档创建者:cherishdqy
  • 编辑次数:13次
  • 最近更新:Carly 于 2020-01-02
  • 1. 概述

    1.1 预期效果

    FineReport 模板预览时,超链对话框的标题栏默认背景色为蓝色。

    当系统中整体配色与蓝色不搭时,用户希望修改对话框标题栏的背景色。如下图所示:

    222

    1.2 实现思路

    用户可通过设置 CSS 样式,实现修改对话框标题栏的背景色。

    2. 示例

    2.1 准备 CSS 文件

    1)新建一个 CSS 文件,命名为 test.css,代码如下:

    .fr-core-window-header{
    background:#466377 !important;
    }

    点击下载 test.css:test.css

    2)将 test.css 文件拷贝到%FR_HOME%\webapps\webroot\help\css目录中,如下图所示:

    1577410717265659.png

    2.2 报表设置

    普通报表与决策报表的设置不相同,用户可根据需要自行选择。

    2.2.1 普通报表

    选择模板>模板 Web 属性>引用 Css,选择上一步保存的 test.css 文件后,点击增加。如下图所示:

    1577410906172317.png

    2.2.2 决策报表

    选择 body,新建初始化事件,输入 JavaScript 代码,如下图所示:

    1577411094370997.png

     JavaScript 代码如下:

    var link = '<link rel="stylesheet" type="text/css" href="' + FR.server + '/help/css/test.css">';
    $("head").append(link);

    注:href 为 CSS 文件的绝对路径。

    2.3 预览效果

    保存模板,点击预览,效果如 1.1 预期效果所示。

    注:不支持移动端。

    3. 已完成模板

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\06-修改超链接-对话框标题栏的背景色.cpt

    点击下载模板:06-修改超链接-对话框标题栏的背景色.cpt

    点击下载 CSS 文件:test.css

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览