【表单JS实例】JS改变绝对画布块样式

1. 概述
1.1 问题描述

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

1.2 解决思路

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

2. 示例
2.1 报表设计

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

2.2 图片准备

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

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

2.3 添加初始化后事件

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

JS 代码如下：

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

复制代码

3. 效果预览

保存模板，预览模板，PC 端预览效果如下图所示：

注：不支持移动端

4. 已完成模板

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

模板下载见附件

图片下载见附件

放到远程服务器上，服务器需要重启吗

移动端呢 有方法吗