历史版本13 :JS设置动态背景/边框 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

一般设计器里面的插入图片只能够插入png或jpg的静态图片,如果需要插入gif动图的话,在设计器里面很难完成。那么该如何添加动态图呢?

2. 思路编辑

通过js设置动态背景,使用WEBIMAGE()函数设置动态边框。

3. 操作步骤:设置动态背景编辑

3.1 示例一(在决策报表中)

1)准备图片

准备gif动图,将gif动图放在文件夹%FR_HOME%\WebReport\picture下,这里的图片名为1.gif

注:右击链接存储图片。

222

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

222

js代码如下:

setTimeout(function() { $('.content-container').css('background', 'url(http://localhost:8075/WebReport/picture/1.gif)'); }, 1000);

注:图片需放在服务器上,url中的地址要填写图片的实际地址。 

注:如果动态背景图分辨率大小比屏幕的分辨率大小要小,那么动态背景图会平铺。

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

3)保存模板,预览效果如下:

222

3.2 示例二(在普通报表中)

1)准备图片

准备一张gif动图作为背景,同示例一,将gif动图放在文件夹%JAVA_HOME%\WebReport\picture下,图片命名为1.gif

注:右击链接存储图片。

2)选择文件->新建普通报表,选择模板->模板web属性,点击分页预览设置,添加加载结束事件,如下图所示:

222

js代码如下:

setTimeout(function(){ $('.content-container').css('background','url(http://localhost:8075/WebReport/picture/1.gif)'); },1000);
3.3 效果展现

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

222

4. 操作步骤:设置动态边框编辑

那么如何制作让动态的边框在决策报表中显示呢(添加动态图)?

4.1 准备图片

将以.gif为后缀的边框动图放在文件夹%JAVA_HOME%\WebReport\picture下。这里将图片命名为2.gif

注:右击链接存储图片。

222

4.2 模板设置

1)新建决策报表,设置body的布局方式为绝对布局,缩放逻辑为适应区域,如下:

222

2)拖进去一个报表块,点击编辑,在单元格中使用webimage公式调用放置的图片,例如:=WEBIMAGE("./picture/2.gif")。这样就给报表块添加了GIF动图。

222

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

222

4.3 保存预览

保存预览,效果如下图:
222

5. 预览效果

5.1 PC端预览效果

1)设置动态背景

示例一(在决策报表中):

222

示例二(在普通报表中):

222

2)设置动态边框

222

5.2 移动端预览效果

注:不支持移动端。

6. 已完成模板

1)示例一:在决策报表中设置动态背景

模板效果在线查看请点击:JS设置动态背景或边框-示例一.frm

已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\17-JS设置动态背景或边框-示例一.frm

2)示例二:在普通报表中设置动态背景
模板效果在线查看请点击:JS设置动态背景或边框-示例二.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\17-JS设置动态背景或边框-示例二.cpt
3)示例三:设置动态边框
模板效果在线查看请点击:JS设置动态背景或边框-示例三.frm
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\17-JS设置动态背景或边框-示例三.frm