盘点：Axure同步选择和删除标签区域案例教程

热爱足球

在用axure制作原型交互时，经常遇到要多选框，几乎每一个人都会在络上发布或者搜集信息，对于这些杂乱的信息，常见的做法是利用标签对它们进行整理。已选标签同步出现选择的棱，也可以进行手动删除，自动同步，例如，对图片进行分类

?

?

这个功能，我们可以用中继器来做。中继器适用于重复的项目列表，这里就是点击选中复选框时，在上方已选标签列表中会自动添加对应的标签。点击删除已选标签，待选标签中已经被选中的复选框会取消选中。

?

我们一起来看一下具体的做法。首先，我们这里用到的是两个中继器：已选标签和待选标签。其中，已选标签的数据集中暂时没有数据；待选标签中有两列数据，除了tab列，还有一列是用来判断当前项目是否选中，0为未选中，1为选中。

?

?

?

把内容准备好之后，我们就可以开始来进行一下设置。在choice的这个中继器中，我们选择tab。当然，获取数据集中的tab是一定的。除此之外，在每项加载的时候，需要设置选中的状态，就用到了另外的一列数据：selected。如果等于1，设置为选中，否则，设置为未选中。

?

?

在点击待选的标签时，选中和未选中是不一样的。选中标签的时候，需要将数据传递到另一个中继器中也就是已选标签中（命为chosed），这里只需给chosed中继器中添加一行即可，这一行的数据等于待选中的数据。

?

?

当然，不要忘记，将记录状态的selected的数据更新为1。

?

取消选中标签的时候，跟上面的情况相反，要将已选的数据进行删除，同时将selected的数据更新为0。

?

这时候就能够点击待选的标签，添加或者删除已选标签，像这样：

?

?

选择了标签之后，我们可以在已选标签中点击删除按钮，将已选择的标签删除，同时，取消下方标签的选中状态。那么需要设置删除按钮的鼠标单击时事件。这里的设置其跟在待选标签中直接取消选中标签思路是一样的：同样将selected中的数据更新为0，同时删除行即可。

?

要注意的是，更新selected数据时条件的设置，当两个中继器中的tab数据一致时，更新数据为0。

?

这个同步选择和删除标签的功能经过分析之后，我们可以知道它的现并不难。这里用到的是两个中继器，利用添加行和删除行设置标签的选择和删除。另外，在一个中继器中有一列数据是不在界面中有所展示，是用来对状态进行记录，这种使用方式其在中继器中也是比较常见的。



知道了它的现原理和方法之后，我们可以举一反，制作更多类似或者更进一步的功能。举一反很重要。











即便如此，Axure 原型库也要坚守行业的品质，为公司打造独一无二的产品。Axure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。https://www.axure9.com