JS实现控件融入背景

  • 文档创建者:axing
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2020-08-13
  • 1. 概述

    1.1 预期效果

    决策报表深色背景下,控件原本的白色显得很刺眼,如下图所示:

    image.png

    如何将控件背景修改成与主体背景颜色一致呢,效果如下图所示:

    image.png

    1.2 实现思路

    使用 JS 获取主体背景颜色,然后修改控件背景,以及其他控件属性。

    2. 示例

    2.1 报表设计

    1)新建一个决策报表,设置 body 布局方式为绝对布局,如下图所示:

    image.png

    2)如下图依次添加下拉单选控件,日期控件,文本控件,数字控件和按钮控件,并给控件设置默认值。

    Snag_6bb65b28.png

    3)日期控件需要取消勾选允许直接编辑,否则直接编辑日期控件内容时,会出现白色背景色。

    1.png

    4)按钮控件自定义背景,初始背景颜色设置为透明,如下图所示:

    Snag_6bbb03e7.png

    5)选中 body 添加初始化后事件,如下图所示:

    Snag_1fd131cc.png

    JavaScript 代码如下:

    setTimeout(function(){	
            
    //以下修改文本控件、数字控件的属性
    $(".fr-texteditor").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置背景和字体颜色
    $(".fr-texteditor").css("border","none");//去除边框

    //以下修改下拉单选控件,下拉复选控件和日期控件的属性
    $(".fr-trigger-text.fr-border-box").css({"background":"rgba(0,0,0,0)"});//设置控件本身背景
    $(".fr-trigger-text").find("input").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置控件输入框背景和字体颜色
    $(".fr-trigger-text").css("border","none");//去除边框
          $(".fr-trigger-btn-up").css({"background":"rgba(0,0,0,0)","border":"none"});//设置控件右侧点击按钮
    },100)

    2.2 效果预览

    保存报表,点击表单预览,效果如下图所示:

    image.png

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\JS实现控件融入背景.frm

    点击下载模板:JS实现控件融入背景.frm

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!