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

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

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

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

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

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

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

以第一个标签为例，效果如下图所示：

为自由块添加背景图，装饰标签：

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

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

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

效果如下图所示：

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

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

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

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

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

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

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