雪莉果的Axure原型工厂vol.005 中继器应用（一）——扩展信息

0.中继器是一个非常愚蠢的翻译

先看下面一个示例：

这个交互是不是非常熟悉？你肯定在各种各样的软件网页中见到过，作为一名合格的产品进行，你一定会思考他的原型要怎么实现：动态面板？复杂的显示隐藏交互？还是用javascript实现？
当然，其实都不需要，你只需要学会Axure中最最重要的一个元件——中继器即可。
虽然但是，这个翻译名称我真的很想吐槽，也许以后每次用到它我都会吐槽一次。

1.交互拆解

和之前一样，为了更好的理解这个原型做了什么，我们将交互进行拆解。

1）初始状态，显示第一个标题的内容

2）鼠标移动，移动到关闭的标题

3）该标题展开内容，箭头旋转，并且之前展开的内容收缩

用流程图的形式进行展示，如下图：

接着，我们就按照上述步骤，来制作进度条原型。

2.交互设置步骤

1）首先创建所有需要的元件，并且为各元件命名，方便设置交互时选择。

其中，显示内容为为中继器，包括3列，分别为标题，内容以及是否展示的标识“show”，并将第一条数据的show列设置为1，默认进行显示。

2）然后，我们添加中继器的正常交互，设置标题元件的文字为中继器内的title列，内容元件的文字为中继器内的info列。

这时，中继器显示如下：

3）然后，我们开始添加条件，当show值为0时，隐藏内容元件；当show值为1时，旋转右侧的箭头；因为几个条件时并列的，我们可以在情形上右键切换成【如果】，此时，每次数据加载时，都会按顺序判断三个条件是否满足。


4）这时，效果显示如下，第一项内容默认展开其他内容隐藏；

需要理解一个点，当中继器中的元件设置隐藏时，各项加载时就不会渲染这个元件，会导致每行数据总体的宽和高可以不同。
5）然后我们来添加鼠标的交互，当鼠标移动到别的标题时，来展开本标题的内容，并隐藏别的标题下的内容。为了操作简易，我们将标题元件和箭头元件进行组合，给这个组合添加交互。

鼠标移入时，更新本行数据的show为1，更新后会重新加载本项，根据之前设置的中继器交互，便会显示出本行的内容；更新所有不为本行的数据的show为0，则会隐藏其他所有的内容。

6）到此，该交互的设置完毕。

3.一些说在最后的话

首先，再让我吐槽一下中继器这个名字。
其次，中继器确实是Axure中最重要的一个元件，很多通过js都需要大段编码的交互效果，对于中继器来说反而是舒适区。
最后，留下一些思考，如果用中继器，是不是也可以做出图片展开收缩的效果呢？

演示链接: link