1. 概述
1.1 版本
| 报表服务器版本 | APP 版本 | HTML5 移动端展现插件版本 | 功能变动 |
|---|---|---|---|
| 11.0 | V11.0 | V11.0 | - |
1.2 应用场景
模板页面较长时，用户希望通过点击侧边导航定位到本页面的指定组件位置。以 App 为例，如下图所示：
模板页面较长时，用户希望通过点击超链定位到本页面的指定组件位置。以 App 为例，如下图所示：
2. 功能介绍
仅决策报表支持此功能。
1）body 的移动端面板勾选「手机重布局」时：
body 的移动端面板支持设置「导航样式」。
body 的移动端面板、Tab 块的 tabpane 的移动端面板 、绝对画布块 absolute 的 移动端面板支持设置「显示该层级下的组件导航」。
其余组件和控件的移动端面板支持设置「使用导航」。
2）实现快速定位组件，有以下两种方法：
设置导航样式为「侧边导航」。
无需设置导航样式，导航样式保持为默认的「无」，设置 JS 超链。
2.1 导航样式
2.1.1 功能入口
1）选中「body」，点击「移动端」。
2）勾选「手机重布局」，则出现「导航样式」设置。
3）点击 导航样式 旁的「...」按钮，进入导航样式设置界面，分为「无」和「侧边导航」。
2.1.2 侧边导航
1）「侧边导航」的设置界面如下图所示：
2）具体设置项如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 按钮导航样式 | 按钮尺寸 | 支持设置按钮尺寸，默认尺寸为 80*38 ，最小尺寸为 20*20 ，最大尺寸为 150*100 |
| 按钮间隔 | 支持设置按钮间隔，默认为 5 | |
| 圆角 | 支持设置圆角，默认为 2 | |
| 默认样式 | 背景颜色 | 支持设置默认样式的背景颜色 |
| 不透明度 | 支持设置默认样式背景颜色的不透明度，默认为50% | |
| 按钮边框 | 支持设置默认样式的按钮边框类型 | |
| 边框颜色 | 支持设置默认样式的按钮边框颜色 | |
| 字符 | 支持设置默认样式按钮字符的字体、字号、颜色、斜体、加粗 | |
| 选中样式 | 背景颜色 | 支持设置选中样式的背景颜色 |
| 不透明度 | 支持设置选中样式背景颜色的不透明度，默认为85% | |
| 按钮边框 | 支持设置选中样式的按钮边框类型 | |
| 边框颜色 | 支持设置选中样式的按钮边框颜色 | |
| 字符 | 支持设置选中样式按钮字符的字体、字号、颜色、斜体、加粗 | |
2.2 显示该层级下的组件导航
1）body 的移动端面板勾选了「手机重布局」之后，body 的移动端面板 、 Tab 块的 tabpane 的移动端面板、绝对画布块 absolute 的移动端面板才会出现「显示该层级下的组件导航」。
2）其中，body 的「显示该层级下的组件导航」在勾选「手机重布局」后自动勾选，其余 Tab 块的 tabpane 、绝对画布块 absolute 的「显示该层级下的组件导航」需要手动勾选。如下图所示：
注： body 下除普通组件外，还有绝对画布块、Tab 块等容器时， body 和 body 下的容器都勾选了「显示该层级下的组件导航」，预览时只显示最外层容器的导航。
2.3 使用导航
body 的移动端面板勾选了「手机重布局」之后，其余组件和控件的移动端面板中才会出现「使用导航」。如下图所示：
注1：「导航名称」默认为控件名，可自定义，支持换行符、空格符；若名称过长，则截断显示。
注2：冻结组件不能使用导航；组件若勾选「使用导航」按钮，则不能冻结。
注3：最多只能显示 8 个导航按钮，超过 8 个则不显示；导航排列顺序与「body>移动端>控件顺序」一致。
注4：绝对画布块 absolute 没有「使用导航」功能，即 body 下的导航不支持绝对画布块 absolute。绝对画布块内的组件有「使用导航」选项，但勾选无效果。
3. 示例一：侧边导航快速定位
3.1 准备模板
点击下载模板：零售集团实时监控-phone.frm
或在 FineReport 设计器中打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\零售集团实时监控-phone.frm
3.2 侧边导航
1）在右侧属性面板中选中「body」，点击「移动端」，勾选「手机重布局」。
2）点击 导航样式 旁的「...」按钮，选择「侧边导航」，配置具体设置项。如下图所示：
3.3 使用导航
1）选中报表块「report0」，点击「移动端」，勾选「使用导航」，导航名称为「销售情况」，如下图所示：
2）选中图表块「chart0」，点击「移动端」，勾选「使用导航」，导航名称为「销售额分布」，如下图所示：
3）选中图表块「chart3_c」，点击「移动端」，勾选「使用导航」按钮，导航名称为「数据时段分布」，如下图所示：
3.4 效果预览
以 App 为例，效果预览如下图所示：
4. 示例二： JS 超链快速定位
4.1 准备模板
同3.1节。
4.2 JS 超链
JS 超链的使用语句为：
_g().jumpToMark("markName")
注：「markName」可为控件名称、表格组件名称、图表块名称、Tab-tabpane 名称。
1）进入 report0 编辑页面，选中 A3 单元格，点击右侧属性面板中的「超级链接」按钮。
2）点击「+」按钮，选择「JavaScript脚本」，输入 JS 语句：
_g().jumpToMark("chart1")
3）进入「表单」编辑页面，点击右侧「组件设置」，双击「chart2」。
4）点击「特效>交互属性」，点击「+」按钮，选择「JavaScript」，如下图所示：
5）输入 JS 语句：
_g().jumpToMark("chart0")
6）同样的方法再次为 chart2 添加 JavaScript 链接，输入 JS 语句：
_g().jumpToMark("report1")
7）分别双击「JavaScript1」、「JavaScript1」，重命名为「实时销售额」、「顶部」，如下图所示：
4.3 使用导航
点击「组件设置」，分别选中「report1」、「chart0」、「chart1」，选择「移动端」，勾选「使用导航」，如下图所示：
4.4 效果预览
以 App 为例，效果预览如下图所示：
注1：该方法不支持横屏。
注2：若全屏放大后触发 JS ，则退出全屏跳转到对应组件。
