最新历史版本 :图片轮播 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本插件版本功能变更
11.01.0.0-
11.03.0.1新增图片放大预览、提示和链接跳转功能

1.2 应用场景

当企业官网想要展示企业文化、产品和服务,电子商务平台想要展示最新商品、促销活动等场景时,希望实现动态展示图片,提升页面视觉效果和用户体验,同时希望实现点击图片进行网页链接跳转。如下图所示:

723-1040.gif

1.3 功能介绍

帆软提供「图片轮播」插件,主要用于动态展示图片。

  • 支持左右和上下方向的轮播

  • 支持点击图片跳转网页链接

  • 支持自动播放,自定义持续时间和间隔

  • 不支持 IE 浏览器,推荐使用谷歌浏览器或火狐浏览器

  • 不支持移动端

  • 暂不支持在 FVS 中使用控件联动图片轮播图表

2. 插件介绍编辑

2.1 插件安装

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

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

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

2.2 功能入口

1)普通报表

选中单元格并调整到合适大小,点击上方工具栏插入图表按钮,插入「图片轮播」。如下图所示:

722-1426.png

2)FVS可视化看板

在 FVS 中添加表格组件。编辑表格,上方工具栏中选择插入图表,在图表类型窗口,选择「图片轮播」,如下图所示:

注:FVS,仅支持在「表格组件」中插入图片轮播使用,不支持直接在「图表组件」中使用图片轮播。

717-1450.png

3)决策报表

在决策报表上方的图表工具栏,选择图片轮播图标,即可添加,如下图所示:

注:决策报表,支持在报表块或图表块中使用图片轮播。

717-1538.png

2.3 属性设置

选择右侧「单元格元素>设置」栏,如下图所示:

sz.png

具体说明如下表所示:

设置说明
基本

图片布局

图片显示的布局,包含如下类型:

  • 布局1:被替换的内容正好填充元素的内容框。整个对象将完全填充此框,如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

  • 布局2:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

  • 布局3:被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

动画类型

图片轮播效果方向,包括:

  • 左右滑动

  • 上下滚动

显示控制按钮若勾选,则显示手动控制轮播的按钮

链接打开事件

点击轮播图片的触发链接跳转的鼠标事件,包括

  • 无鼠标事件

  • 鼠标单击事件

  • 鼠标双击事件

  • 鼠标右击事件

若选择无鼠标事件,则点击图片不做任何链接跳转。

链接打开方式

点击轮播图片的触发链接跳转的打开方式,包括:

  • 新窗口打开

  • 当前窗口打开

自动播放

若勾选自动播放,则会启动自动轮播图片效

支持自定义「动画持续时间(毫秒)」和「动画间隔(毫秒)

图片文件
增加图片

配置方式:

1)增加/修改

输入图片文件地址,输入网页链接和提示内容

点击「增加」按钮,即可将对应的信息加入到下方列表中

选择下方列表中某一行,点击「修改」按钮,即可对内容进行修改覆盖

2)删除、上移、下移

选择下方列表中某一行,点击「删除」/「上移」/「下移」按钮,即可对内容进行删除或顺序调整

配置要求:

1)图片文件

预览时展示的图片来源,支持填写磁盘文件和绝对路径

  • 磁盘文件:支持读取工程/webroot/WEB-INF/resources文件夹及其子文件夹中的图片,填写resources下的相对路径即可

  • 绝对路径:填写可访问的图片链接地址,点击「测试连接」确保可访问

2)网页链接

鼠标点击图片时跳转的网页链接。非必填项,为空则不跳转。

3)提示内容

鼠标悬浮在图片上显示的提示内容。非必填项,为空则不提示。

bj.png

数据集

从数据集中获取图片配置

路径规则、配置说明均与图片文件>编辑中的规则一致。

2.4 图片缩放预览

「分页预览」下,支持图片全屏缩放预览:

 1)鼠标放在轮播图片上,图片的右上角会出现全屏图标 full.png ,鼠标单击即可出现全屏图片预览界面。

 2)在全屏图片预览界面,鼠标可以拖动图片,也可以用鼠标滑轮上下缩放图片。

 3)点击全屏图片预览界面的右上角的退出图标 t.png ,即可退出图片预览。

3. 示例编辑

3.1 准备图片资源

点击下载并解压获取示例图片:示例轮播图片.zip

将示例图片放入工程/webroot/WEB-INF/resources文件夹中,如下图所示:

723-1022.png

3.2 新建图表

1)新建一张普通报表

2)将单元格调整到合适大小,选中单元格。

3)点击上方工具栏插入图表按钮,插入「图片轮播」。

717-1428.png

3.3 设置图表属性

1)选中图表所在单元格,点击「单元格元素」。

2)选择「设置」栏

  • 基本」:勾选显示控制按钮,其余属性默认设置

  • 自动播放」:勾选自动播放,其余属性默认设置

  • 图片文件」:点击「编辑」按钮,选择磁盘文件,分别选中示例图片,并添加对应网页链接和提示内容,如下图所示:

723-1034.png

3.4 效果预览

保存报表,点击「分页预览」,效果如 1.2 节应用场景中所示。

注:不支持移动端。

4. 模板下载编辑

点击下载模板:图片轮播.cpt