JS设置动态背景/边框

  • 文档创建者:天狮座
  • 编辑次数:23次
  • 最近更新:405763775 于 2019-10-12
  • 1. 概述

    1.1 问题描述

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

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

    1.2 解决思路

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

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

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

    2.1 准备图片

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

    点击下载 1.gif :1.gif

    222

    2.2 添加初始化后事件

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

    1570776164501705.png

    JS 代码如下:

     

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

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

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

    2.3 模板预览

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

    222

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

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

    3.1 准备图片

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

    点击下载 1.gif1.gif

    3.2 添加加载结束事件

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

    1570776439469121.png

    JS 代码如下:

     

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

    3.3 模板预览

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

    222

    4. 设置动态边框

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

    4.1 新建模板

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

    222

    4.2 添加动态边框

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

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

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

    222

    2)设置单元格左右缩进为 0,如下图所示:

    222

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

    222

    4.3 模板预览

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

    5. 预览效果

    5.1 决策报表设置动态背景

    222

    5.2 普通报表设置动态背景

    222

    5.3 设置动态边框

    222

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

    6. 已完成模板

    6.1 决策报表设置动态背景

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

    点击下载模板:17-JS设置动态背景或边框-示例一.frm

    点击下载 1.gif1.gif

    6.2 普通报表设置动态背景

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

    点击下载模板:17-JS设置动态背景或边框-示例二.cpt

    点击下载 1.gif1.gif

    6.3 设置动态边框

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

    点击下载模板:17-JS设置动态背景或边框-示例三.frm

    点击下载 2.gif2.gif


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!