【Axure9.0教程】中继器实现：下拉列表复选

参考文章：【Axure 教程】中继器高级用法-下拉多选 - 知乎

原型网址：Untitled Document​​​​​​

一、中继器赋值

1. 标签中继器

        拖出一个中继器命名为【标签】，中继器内容如下：

首先为中继器添加元素：标签（组）、显隐状态、更新时间；

         1. 标签组如下：

 

        其中高光部分为文本段落，居中对齐、中部对齐，命名为【标签文本】。

        2. 拖出文本框命名为【显隐状态】，紧挨在【标签组】右边，并设为隐藏。

        3. 拖出矩形命名为【更新时间】，紧挨在【显隐状态】右边，并设为隐藏。

然后为【标签】中继器增加交互：

 2. 列表中继器

        再拖出一个中继器命名为【列表】，中继器内容如下：

首先为中继器添加元素：选项、选中状态、背景；

        1. 拖出文本段落，居中对齐、中部对齐，命名为【选项文本】。

        2. 拖出文本框命名为【选中状态】，紧挨在选项右边，并设为隐藏。

        3. 拖出矩形命名为【背景】，在【选项文本】和【选中状态】之下，并完全重合。

 然后为【列表】中继器增加交互：

二、下拉选项交互

为【选项文本】设置交互

1. 设置单击时交互：

 2.设置选中交互：

        更新行，设置【标签】中继器的状态值，规则：[[Item.Option==TargetItem.tag_Text]]，状态值设置：[[TargetItem.tag_State*(-1)]]，更新时间设置：[[Now.getTime()]]

         并更新行设置【列表】中继器当前行的选项状态值为：[[Item.State*(-1)]]

 3. 设置取消选中交互：

        更新行，设置【标签】中继器的状态值，规则：[[Item.Option==TargetItem.tag_Text]]，状态值设置：[[TargetItem.tag_State*(-1)]]，更新时间设置：[[Now.getTime()]]

        并更新行，设置【下拉列表】中继器当前行的选项状态值：[[Item.State*(-1)]]

 三、删除标签交互设置（SVG）

为【×】设置单击时交互：

        更新行，设置【标签】中继器当前行的标签状态值：[[Item.tag_State*(-1)]]，设置更新时间：[[Now.getTime()]]

         更新行，设置【列表】中继器的选项状态值：[[TargetItem.State*(-1)]]，规则：[[Item.tag_Text==TargetItem.Option]]

 四、设置状态变化时的交互

为【选中状态】设置文本改变时交互：

 设置【背景】交互样式：

为【显隐状态】设置文本改变时交互：

 五、组装

拖出文本框用于模拟下拉框；拖出三角形用于模拟下拉框的交互动作，拖出热区覆盖在三角形上扩大显示/隐藏下拉选项的交互范围，将【标签】中继器放在文本框内，【列表】中继器放在文本框下方并隐藏。

 为热区设置单击时交互：

 现在，你可以点击预览来验收成果了！