在CSDN用户个人中心-我的收藏页面中，有一个新建收藏夹的功能。
地址：https://i.csdn.net/#/user-center/collection-list
通过添加一些信息，可以创建收藏列表。
既然是列表，我们就可以通过中继器来实现。
首先，我们添加“新建收藏夹”的按钮。
这个按钮包含：一个宽度200像素，高度65像素的灰色边框（颜色代码：EDEDED）矩形，一个宽高16像素的图标以及一个14号字的文本标签组成。
当光标进入按钮时，矩形与图标的颜色会发生改变，所以需要为它们设置[鼠标悬停的样式]。
矩形的样式是将填充颜色设置为浅灰色，颜色代码“F6F7F8”。
图标的样式是将图片设置为另外一个深色的图标。
把组成“新建收藏夹”按钮的三个元件组合，命名为“新建收藏夹”，并且勾选组合属性中的[触发内部元件鼠标交互样式]选项。
在“新建收藏夹”按钮的下方放入中继器元件，命名为“收藏列表”。
然后，完成中继器的基础准备工作。
温馨提示：如果还不了解中继器，请先完成《中继器的应用（1）》的学习。
1、创建模板
双击中继器，进入模板的编辑区。
模板的内容与“新建收藏夹”按钮类似，只是多了一些图标与文本。
多出的图标都需要设置[鼠标悬停的样式]，并且，目录名称前方是两个重叠的图标。一个图标是“公开图标”，另一个是“私密图标”。
“私密图标”在样式面板中设为隐藏。
所有模板元件组合到一起，命名为“收藏目录”，并勾选组合属性中的[触发内部元件鼠标交互样式]选项。
注意，“收藏目录”的模板摆放时，要摆放在中继器模板编辑区（0,-1）的位置上，也就是原点向上移动1像素的位置，这样能够避免两个列表项之间的线段变为粗线。
2、添加数据
一开始收藏列表并没有任何内容，所以，样式面板的数据表格中，要删除所有的行。
然后，对应着需要保存的数据，添加三个列，列名分别为“DirName”、“Description”和“IsOpen”。
3、绑定数据
每个收藏夹只是“目录名称”不同，我们把“目录名称”在[每项加载时]进行绑定。
删除原有的交互，或者对原有的[设置文本]动作进行修改。
选择[目标]元件为[目录名称]，将数据项的列值绑定到元件的[文本]。
默认情形下，“目录名称”前方显示的是“公开图标”。
但是，如果新建收藏夹时选择的是“私密”，则需要显示“私密图标”。
所以，我们需要添加“私密收藏”的情形。
并通过条件判断数据列“IsOpen”中的[值]等于“false”，也就是假值。
当符合条件时，[隐藏][公开图标]，[显示][私密图标]。
不要忘记，两种情形没有逻辑关系，要通过右键菜单中的“切换为[如果]或[否则]”的选项。将第二个情形的条件转为“if”开头。
到这里，我们就完成了中继器的准备工作。
接下来，我们需要创建新建收藏夹的面板。
具体的实现过程，在这里不便过多描述，请参考本教程源文件完成，原型素材也从源文件中获取。
温馨提示：如果对样式设置比较生疏，可以参考《常用样式设置（1）》、《常用样式设置（2）》和《常用样式设置（3）》，以及《Axure的7种交互样式（5）-提示的交互样式》。如果对动态面板使用比较生疏，可以参考《动态面板的应用（1）》。如果不了解“单选按钮组”，请参考《元件属性中的组》。如果以上这些你都不了解，你凭什么看这么高级的教程？
这里只提醒一些关键点。
收藏夹名称输入框是文本框元件，需要命名为“目录名称输入”。
收藏夹描述输入框是文本域元件，需要命名为“目录描述输入”。
公开与私密选项，分别命名为“公开选项”和“私密”选项，并且要在属性中设置“单选按钮组”的名称为“私密选项”。
动态面板命名为“新建收藏面板”，并且将其“固定到浏览器”中央的位置，再在样式面板中，将这个元件设为隐藏。
完成新建收藏夹的面板之后，我们可以给“新建收藏夹”按钮添加[单击时]的交互事件，[显示][新建收藏面板]，[更多选项]中添加[灯箱效果]。
再为动态面板中的“取消”按钮添加[单击时]的交互事件，[隐藏][新建收藏面板]。
最后，是最关键的一步。
“确定”按钮[单击时]为中继器[收藏列表][添加行]。
点击[添加行]按钮编辑添加的内容。
我们通过局部变量获取“目录名称输入”的[元件文字]、“目录描述输入”的[元件文字]以及“公开选项”的[选中状态]。
添加到中继器的一行数据中。
另外，还要[隐藏][新建收藏面板]。
并且，通过[设置文本]为空值，清除“目录名称输入”和“目录描述输入”的[元件文字]。
到这里，我们就完成了本案例所要实现的内容。
当然，我们并没有做没有输入内容并点击“确定”按钮时所产生的交互。
关于这个内容，大家可以查看原网页的交互效果，自行通过[添加情形]进行判断来完成。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 中继器的应用（2）