最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

中继器的应用(2)

教程 小楼一夜听春语 3353浏览

在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)