[通用]目录

1.1 版本

1.2 应用场景

移动端默认显示九宫格目录样式，在一级目录比较少的情况下，目录界面会显的很空，平台可更改目录样式，提供横幅和模板设置，可在目录页中展示。

1.3 功能简介

管理员进入FineBI系统，选择「管理系统>移动平台>目录」，可对移动端目录结构进行设置。如下图所示：

APP 预览移动端目录方法请参考：移动平台 第四章节。 

HTML5 预览移动端目录方法：HTML5 端访问仪表板/工程 。

2.1 目录结构

平台默认移动端目录结构为「九宫格」，如下图所示：

移动端效果如下图所示：

1）App

2）HTML5

注：用户若想设置其他样式的目录结构，请参考 目录结构插件 。 

2.2 样式设置

2.2.1 九宫格样式设置

目录结构为九宫格时，可对移动端「一级目录」样式进行设置。 

打开「修改九宫格默认设置」按钮，如下图所示：

其中一级目录各设置项具体介绍如下表所示： 

2.2.2 分类导航目录树样式设置

注：下载「分类导航目录树」插件后，才可选择分类导航目录树结构，插件下载请参考 目录结构插件 。 

目录结构为分类导航目录树时，可对移动端「一级目录样式」和「二级目录样式」进行设置。

「目录结构」选择「分类导航目录树」，打开「分类导航目录树默认设置」按钮，如下图所示：

其中一级目录、二级目录各设置项具体介绍如下表所示： 

默认设置效果如下图所示：

2.3 目录搜索框

目录搜索框，默认是开启状态，点击关闭后，在移动端不显示搜索框。

注：关闭目录搜索框后，应用目录树插件以及多级目录页也都没有搜索框。

2.4.1 添加横幅

示例中使用的图片：横幅图片.zip

在「目录」Tab 页下开启「横幅」；

点击左上角的「」号，弹出编辑框，添加横幅，并点击「确定」。如下图所示：

1）名称：不能为空，且不能重复。

2）手机：上传手机端横幅图片，上传的图片会等比例缩放为 375*188，推荐图片格式为：PNG、JPG 。

3）平板：上传 Pad 端横幅图片，上传的图片会等比例缩放为 1024*188，推荐图片格式为：PNG、JPG 。

4）链接：

• 非必填，点击图片时跳转的超链，输入相对路径或 http/https 开头的绝对路径。

• 跳转 cpt/frm，模板上只有批注（翻页）按钮。

• 导航栏标题为横幅标题。

• 链接地址有问题时，提示相应的错误。

注：允许上传的文件格式包括 PNG、JPG、GIF，如果上传图片格式错误，会提示「XXX 是禁止上传的文件类型」。

2.4.2 编辑横幅

当添加 2 个及以上横幅时，可设置横幅轮播间隔，默认为 5 秒，则每隔 5 s 自动轮播横幅，也可以手动滑动切换。如下图所示：

2.4.3 移动端效果

当添加了 2 个横幅，轮播间隔为 2 秒时，移动端效果如下图所示：

1）App

2）HTML5

2.5 模板

2.5.1 添加模板

在「目录」Tab 页下开启模板；

模板选择目录首页.frm（自定义选择模板），显示位置为「目录上方」。如下图所示：

注：若开启了模板功能但不选择模板，则模板功能不生效。

注意事项：

1）示例中插入的模板: 目录首页.zip

2）放置在%JAVAHOME%/webapps/webroot/WEB-INF/reportlets文件夹下。如下图所示：

3）刷新 FineBI 工程地址，在「移动平台」中即可出现模板。

2.5.2 移动端效果

注：效果中的目录图标为自定义的目录图标，可参考本文 2.6.2 章节。

1）App

2）HTML5

2.6 目录图标

FineBI 设计器内置三套（扁平、缤纷、渐变）类型的图标，同时也可以「自定义」图标。如下图所示：

2.6.1 内置目录图标

左侧为目录树，选中目录或模板，点击右侧图标，即可为目录或模板更换图标。如下图所示：

2.6.2 自定义图标

1）上传图标

「自定义」Tab 页下，点击「」，上传图标。如下图所示：

2）设置图标

以「新手入门」目录设置自定义图标为例，选中「新手入门」目录，点击刚刚上传好的自定义图标。步骤如下图所示：

3）删除图标

点击右上角的「编辑」进入图标删除状态，点击需要删除的小图标上方叉，弹出「确定删除该元素？」，点击「确定」，图标删除完成，点击「返回」退出图标删除状态。

如下图所示：