历史版本6 :[通用]移动端弹窗 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本JAR 包版本APP 版本HTML5 移动端展现插件移动端弹窗插件
10.02020-01-1510.4.55V10.4.55
V10.4.55

1.2 应用场景

通常情况下,点击模板中的超链后,超链子模板在新页面打开,用户若需要超链子模板以弹窗的形式展示,通过安装「移动端弹窗」插件可实现。

注:用户也可通过 JavaScript 事件实现该场景,详情请参见:[通用]JS 通过按钮控件开关对话框

1.3 功能简介

「移动端弹窗」插件可使超链子模板以弹窗的形式展示,并且用户可自定义弹窗样式及内容。效果如下图所示:

1579224791361497.png

注1:移动端弹窗插件可在 CPT 模板和 FRM 模板中使用,弹窗效果在 APP 和 HTML5 端都支持。

注2:App 版本、HTML5 移动端展现插件版本为 10.4.66 及之后时,弹窗显示的子模板中若存在超链将正常触发。

1.4 插件安装

插件下载请点击:移动端弹窗

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

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

2. 超链中弹窗设置编辑

注:超级链接的使用请参考: 超链典型应用

2.1 生效范围

 「移动端弹窗」在超链中的生效范围如下表所示:

位置生效范围
超链单元格>超级链接
单元格>条件属性>超级链接
图表>超级链接

2.2 界面介绍

注:在所添加的超链中,「超链类型」选择移动端弹窗。

移动端弹窗的设置界面中,「形式」分为模板文本,下面将分别介绍。

2.2.1 模板界面

「形式」选择模板时,移动端弹窗设置界面如下图所示:

1579164288404005.gif

「形式」选择模板时,各属性项说明如下表所示:

属性备注
模板
可选择链接到的模板,支持 CPT 模板、FRM 模板
参数模板可传参数
样式「形式」选择模板时,固定为居中弹窗
边框可对弹窗「边框」的线条颜色圆角进行设置
背景
可自定义弹窗背景颜色
弹窗大小

「手机端规则」和「平板规则」默认选择为自定义,此时可在下方的宽高调节控件中设置弹窗大小(以百分比形式设置,如弹窗宽度占屏幕宽度的 xx% );

「手机端规则」和「平板规则」选择高度自适应时,可设置弹窗宽度占屏幕宽度的百分比

注:设置「弹窗大小」时,若用户输入的宽高数值超过最大限度,直接限制输入;若用户输入的宽高数值小于最低限度,直接限制输入。

2.2.2 文本界面

「形式」选择文本时,移动端弹窗设置界面如下图所示:

1579166043103151.gif

「形式」选择文本时,各属性项说明如下表所示:

属性备注
文本

文本可定义文本内容(支持公式输入),支持换行符 \n ;可为文本内容选择文本字体、文本颜色、是否加粗、是否有下划线、是否斜体

样式「形式」选择文本时,固定为跟随弹窗
边框
可对弹窗「边框」的线条颜色圆角进行设置
背景可自定义弹窗背景颜色
弹窗大小

手机端规则和平板规则默认选择为自定义,此时可在下方的宽高调节控件中设置弹窗大小(以百分比形式设置,如弹窗宽度占屏幕宽度的 xx% );

手机端规则和平板规则选择高度自适应时,可设置弹窗宽度占屏幕宽度的百分比

注:设置「弹窗大小」时,若用户输入的宽高数值超过最大限度,直接限制输入;若用户输入的宽高数值小于最低限度,直接限制输入。

3. 事件中弹窗设置编辑

注:在所设置的事件中,「事件类型」选择移动端弹窗。

3.1 生效范围


位置
生效范围
事件单元格控件>事件
表单 body 控件>事件
模板 Web 属性>分页预览&填报预览>事件设置
注:Web 事件中,不支持设置文本弹窗。
参数界面控件>事件

3.2 界面介绍

事件中移动端弹窗设置界面,与超链中移动端弹窗设置界面相同,此处不再介绍,请参考本文 2.2 章节

4. 移动端弹窗效果示例编辑

单元格超链中弹窗效果为例,介绍移动端弹窗在 APP 中的效果。

4.1 居中弹窗超链

4.1.1 单个超链

单元格中单个超链,「形式」选择模板时,移动端效果(以 APP 效果为例)如下图所示:

1579174720304615.jpg

4.1.2 多个超链

单元格中多个超链,「形式」选择模板时,移动端效果(以 APP 效果为例)如下图所示:

1579174407407656.jpg


4.2 跟随弹窗超链

4.2.1 单个超链

单元格中单个超链,「形式」选择文本时,移动端效果(以 APP 效果为例)如下图所示:

1579175159165868.jpg

4.2.2 多个超链

单元格中多个超链,「形式」选择文本时,移动端效果(以 APP 效果为例)如下图所示:

1579176244579395.jpg