图片轮播控件插件

  • 文档创建者:枫城
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2020-05-07
  • 1. 概述

    1.1 版本

    报表服务器版本

    JAR 包

    插件版本

    10.02016-12-15V2.5
    9.02016-12-15V2.4
    8.02016-12-15V2.4

    1.2 应用场景

    用于美化决策报表,当用户或公司需要动态展示图片时,可以使用图片轮播控件,丰富报表的展示效果。

    1.3 功能介绍

    支持在一个控件中插入多张图片,并能够自主设置切换的方式,包括 2D 和 3D 的各种特效。

    2. 插件介绍

    2.1 插件安装

    点击下载插件:图片轮播控件

    设计器插件安装方法参照:设计器插件管理

    服务器安装插件方法参照:服务器插件管理

    2.2 操作方法

    安装好插件后 ,打开对应决策报表,点击控件面板的下拉按钮,可以发现多了个图片轮播控件,拖拽至决策报表设计器主体即可,如下图所示:

    Snag_11eade4.png

    2.3 属性说明

    选中控件,弹出控件属性,属性设置如下图所示:

    Snag_11cc7a0.png

    1)是否 3D 效果

    是:图片通过轮播块翻转的播放模式。

    否:2D 展示效果,图片多为百叶窗效果等平面切换效果。

    2)图片

    默认选择一个文件夹,文件夹内是你要轮播的图片,单张图的话则光是图片展示效果。

    3)图片布局

    3D 模式独有:cover 覆盖,fill 填充,contain 包含。

    4)效果

    2D 模式下:simple 简单,up 向上消失,switchud上下切换,fliplr 弹球效果,flipud 别针效果,reduce 逐步减少效果。

    3D 模式下:slide 左右滑动,scroll 纸卷( 上下滑动 )。

    5)导航块

    circles 循环 轮播块同时轮播,squares 方块 轮播块随机轮播,no 不设置。

    5)自动播放

    True 自动轮播,Flase 手动点击轮播。

    6)动画用时

    设定轮播时间。

    7)轮播间隔

    图片间切换的时间。

    注:图片如果不选择自定义图片文件夹,则是插件默认的图片。

    3. 示例

    3.1 图片准备

    将自定义图片放到对应文件夹,几个轮播块就准备几个文件夹,每个文件夹可以放不同主题的图片,如下图所示:

    Snag_11bd291.png

    注:GIF 动图不支持轮播。

    3.2 报表设计

    新建决策报表,点击控件下拉按钮,将四个图片轮播控件拖拽到 body 组件。

    四个轮播块设置相同的控件属性,只是图片文件夹不同。

    开启 3D 效果,图片选择相应文件夹,图片布局为填充,3D 效果为slide,导航块为circle,字段播放为true,动画用时和间隔采用默认设置。

    Snag_12052ca.png

    3.3 效果预览

    保存报表,点击表单预览,轮播效果如下图所示:

    21C7D47C-E04F-44CA-8A2B-6F772C13534C.GIF

    注:不支持移动端

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\other\图片轮播控件插件.frm

    点击下载模板:图片轮播控件插件.frm

    点击下载图片:悟帆手机节气壁纸.rar

    5. 注意事项

    5.1 不支持远程设计

    1)问题描述

    远程设计时,图片轮播控件插件无法正常读取图片,会有 404 报错信息,如下图所示:

    企业微信截图_15881396667297.png

    2)解决方案

    本地模板使用该插件后,设计器安装路径%FR_HOME%\webapps\webroot\下会生成 imgroll 文件夹,该文件夹才是存放模板对应图片的地方。如下图所示:

    如果用户需要在远程设计时使用该插件,需要将模板和该文件夹同时拷贝到远程服务器。

    Snag_2385e105.png

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!