决策报表弹出框整体样式修改

  • 文档创建者:hubery1027
  • 编辑次数:7次
  • 最近更新:Kevin-s 于 2019-11-12
  • 1. 描述

    决策报表开发时,针对非白色背景的弹出窗口加载时出现的短暂空白,我们希望消除掉这个闪烁的空白,效果如下图所示:
    3FFC872F-7E38-45D9-A3B7-B4ABBCE8372C.GIF

    2. 思路

    决策报表添加初始化 JS 事件,引用自定义的 CSS 样式实现对弹出框整体样式进行修改,

    3. 示例

    1)新建 CSS 文件:dialogcss.css

    代码如下:

    fr-core-window-header.fr-core-panel-style-blue
    {
        background:#093574;
    }
    .fr-core-window-body
    {
        background:#093574  !important;;
    }
    .fr-core-panel-body-border
    {
        border: 0px solid  !important;
        position: absolute  !important;
        top: 30px;left: 0px  !important;
        border-top: none  !important;
        width: 1400px  !important;
        z-index: 0  !important;
    }

    2)将该 CSS 文件放置于%FR_HOME%\webapps\webroot\help\css\dialogcss.css路径下。

    image.png

    3)父表单添加初始化事件,JS 代码如下:

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

    Snag_9fd7cc.png

    4. 效果预览

    PC 端预览效果如下图所示:

    AB80349A-3CBE-46AF-8FB8-57D76C441E2F.GIF

    注:不支持移动端。

    5. 已完成模板

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_主表.frm

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_子表1.frm

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\决策报表弹出框整体样式修改_子表2.frm

    点击下载模板:

    决策报表弹出框整体样式修改_主表.frm

    决策报表弹出框整体样式修改_子表1.frm

    决策报表弹出框整体样式修改_子表2.frm


    附件列表


    主题: 报表设计
    • 有帮助
    • 没帮助
    • 只是浏览