JS设置动态背景/边框

编辑
  • 文档创建者:天狮座
  • 浏览次数:14026次
  • 编辑次数:19次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

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


    2. 思路

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


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

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

    1)准备图片

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

    注:右击链接存储图片。


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


    JS 代码如下:

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

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

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

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

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


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

    1)准备图片

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

    注:右击链接存储图片。

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


    JS 代码如下:

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


    3.3 效果展现

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



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

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


    4.1 模板设置

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


    2)拖进去一个报表块,点击编辑,在单元格中使用 webimage 公式调用放置的图片,例如:=webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表单JS实例/2.gif")。这样就给报表块添加了 gif 动图。


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


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



    4.3 保存预览

    保存预览,效果如下图:


    5. 预览效果

    5.1 PC 端预览效果

    1)设置动态背景

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

    222

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

    222

    2)设置动态边框

    222


    5.2 移动端预览效果

    注:不支持移动端。


    6. 已完成模板

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

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

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

    右击存储模板

    2)示例二:在普通报表中设置动态背景

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

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

    点击下载模板

    3)示例三:设置动态边框

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

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

    右击存储模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]