【表单JS实例】JS设置动态背景/边框

1. 概述
1.1 问题描述

设计器里面的插入图片只能够插入格式为 png 或 jpg 的静态图片。

如果需要插入 GIF 动图的话，该如何完成呢？

1.2 解决思路

用户可通过 JS 设置动态背景，可使用 WEBIMAGE() 函数设置动态边框。

2. 决策报表设置动态背景

本小节具体讲述如何在决策报表中添加 GIF 动态背景。

2.1 准备图片

准备 GIF 动图，将 GIF 动图放在文件夹%FR_HOME%\webapps\webroot\help\picture下，图片命名为 1.gif。如下图所示：

示例图片下载见附件

2.2 添加初始化后事件

选择文件>新建决策报表，在控件列表中选择 body，添加初始化后事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2.     $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
   
3. }, 1000);

复制代码

注：图片需放在服务器上，URL 中的地址要填写图片的实际地址。

注：如果复制的代码后面出现空格请删掉，否则会出现语法错误

2.3 模板预览

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

3. 普通报表设置动态背景

本小节具体讲述如何在普通报表中添加 GIF 动态背景。

3.1 准备图片

准备一张 GIF 动图作为背景，同示例一，将 GIF 动图放在文件夹 %FR_HOME%\webapps\webroot\help\picture 下，图片命名为 1.gif。

示例图片下载见附件

3.2 添加加载结束事件

选择文件>新建普通报表，选择模板>模板 Web 属性>分页预览设置，添加加载结束事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2.     $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
   
3. }, 1000);

复制代码

3.3 模板预览

保存模板，点击分页预览，效果如下图所示：

4. 设置动态边框

本小节具体讲述如何让动态的边框在决策报表中显示。

4.1 新建模板

1）新建决策报表，设置 body 的布局方式为绝对布局，缩放逻辑为适应区域，如下图所示：

4.2 添加动态边框

1）拖进去一个报表块，点击编辑，在单元格中使用 webimage 公式调用放置的图片。

例如：=webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表单JS实例/2.gif")。

这样就给报表块添加了 gif 动图。

2）设置单元格左右缩进为 0，如下图所示：

3）然后叠加在需要边框的组件（这里指模块 1 和模块 2）周边即可，这样就可以显示动态边框了。

4.3 模板预览

保存预览，效果如下图所示：

5. 预览效果
5.1 决策报表设置动态背景

5.2 普通报表设置动态背景

5.3 设置动态边框

注：以上三者不支持移动端。

6. 已完成模板
6.1 决策报表设置动态背景

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例一.frm

模板下载见附件

6.2 普通报表设置动态背景

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例二.cpt

模板下载见附件

6.3 设置动态边框

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例三.frm

模板下载见附件