第1章 概述

在SaCa DataViz中播放图册时,对于超过一页的图册,右下角会显示翻页按钮,点击进行图册页的切换:

tab_page_turn/1

有时会觉得这样的UI不是很友好,而是希望能够在图册页中增加标签,通过点击标签的方式来进行图册页切换。例如下图红框所示,图册共四面,四个翻页标签位于图册页标题两侧:

tab_page_turn/2

本文就来介绍,如何通过DataViz中现有功能的组合,来实现这样的标签翻页的效果。主要是说明实现方法,最终效果并不和上图完全一致。

第2章 实现方法

2.1 预留标签区域

如下图所示,添加图册页标题,并预留出放置标签的位置。

tab_page_turn/3

【注意】先不要往图册页中添加其他内容,要先定义好标签区域,避免复制图册页后还要再删除无用内容。

2.2 添加第一个标签

使用自由块添加标签。拖入自由块,调整其大小和位置。在自由块中拖入富文本,输入图册页名称,设置文本水平和垂直居中。

给文本设置超链接,指向目标图册页。图册页的URL地址可以在播放图册时获取到,切换到某个图册页,复制浏览器地址栏中的地址即可。 其实就是图册播放地址再拼上一个hash,值是图册页的索引,索引从0开始,0表示第一页,即1表示的是第二页,依此类推。

以第一个标签为例,效果如下图所示:

tab_page_turn/4

tab_page_turn/5

为自由块添加背景图,装饰标签:

tab_page_turn/6

2.3 添加更多标签

这里可以使用自由块复制功能,选中第一个标签,然后按[Ctrl+C]复制,再按[Ctrl+V]粘贴出多个标签。

将新生成的标签拖动到适当的位置。按住Ctrl键的同时点击每个自由块,可以同时选中它们,然后点击工具栏上的顶端对齐。

对于每个新生成的标签,修改标签文本和超链接地址,以指向不同的图册页。

效果如下图所示:

tab_page_turn/7

【注意】对应当前图册页的标签应处于选中状态,所以和其它标签背景图不同,同时该标签的文本不用再设置超链接。

2.4 复制图册页

鼠标悬浮在图册页缩略图上,右上角出现按钮,点击“复制此页”按钮,即可完成图册页复制:

tab_page_turn/8

在新复制的图册页中,修改标题文本;修改标签的选中状态,包括切换超链接、更换背景图。

这样标签区域就定义完了,可以在每页中填充实际的内容了。

2.5 隐藏默认翻页按钮

默认的翻页按钮不再需要了,要隐藏掉。在dataviz-web/common/config.js中,将配置项showNavigatorButtons改为false:

tab_page_turn/9

2.6 最终效果

tab_page_turn/1

第3章 结束语

本文介绍的标签翻页实现方法是非常灵活的,例如可以将标签放置到图册页左侧竖排显示,或者任意调整标签的大小和样式。除了使用背景图以外,还可以尝试使用边框组件。
tab_page_turn/9

理论上设计师设计出来的标签翻页效果,都可以在零编码的前提下实现。

results matching ""

    No results matching ""