JS改变绝对画布块样式

  • 文档创建者:Kevin-s
  • 编辑次数:6次
  • 最近更新:Carly 于 2019-10-09
  • 1. 概述

    1.1 问题描述

    决策报表中,绝对画布块没有样式设置的选项,因而用户无法对其边框、背景色、透明度、背景图片等样式属性进行修改,该如何实现呢?

    1.2 解决思路

    通过给绝对画布块添加初始化事件的 JS 代码,进而修改其样式属性。

    2. 示例

    2.1 报表设计

    新建决策报表,添加两个绝对画布块,如下图所示:

    image.png

    2.2 图片准备

    将要用到的背景图片image1.jpg放置到路径:%FR_HOME%\webapps\webroot\scripts\css目录下,如下图所示:

    点击下载image1.jpg图片:image1.jpg

    1570601301294859.png

    2.3 添加初始化后事件

    选中绝对画布块 absolute0 ,点击控件设置>事件,添加初始化后事件,如下图所示:


    765.png

    JS 代码如下:


    setTimeout(function() {
    $("div[widgetname='ABSOLUTE0']").css("border", "5px solid black"); //设置absolute0的边框大小、线型、颜色
    $("div[widgetname='ABSOLUTE0']").css("opacity", "0.5"); //设置absolute0的背景透明度为0.4(0-1)
    $("div[widgetname='ABSOLUTE0']").css("background", "pink"); //设置absolute0的背景色为粉色
    $("div[widgetname='ABSOLUTE1']").css('background', 'url(http://localhost:8075/webroot/scripts/css/image1.jpg)');
    //设置absolute1的背景为图片image1.jpg
    }, 20);

    3. 效果预览

    保存模板,预览模板,PC 端预览效果如下图所示:

    image.png

    注:不支持移动端

    4. 已完成模板

    已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\07-JS改变绝对画布块样式.frm

    点击下载模板:07-JS改变绝对画布块样式.frm

    点击下载image1.jpg图片:image1.jpg

    附件列表


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