Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

时间:2024-03-13 07:34:06

Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

效果如图:
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
中继器是axure 7带来的功能,它的主要用途在于:一次性添加一组元件,并可以赋值。设想一个富功能的表格,表头为

姓名(文本) 头像(图片) 性别(下拉菜单)
小米 img 男/女
小米 img 男/女
小米 img 男/女

单要构成这样的表格,可以复制复制复制,不会麻烦很多。但是如果想实现点击按钮,触发事件,然后添加一行呢?
最上面的例子可以看出,最后多了一行1.5月的行。
这个例子同时展现了以下几点:
1. 中继器的制作,包括下拉菜单
2. 中继器初始内容的设置
3. 中继器滚动条效果
4. 按钮单击,将上面的一些文本框内容输入到中继器新一行
5. 不同文本框的互相约束(这个例子中,1月=4周)
作者漫漫冬程博客地址


一.制作元器件

1.首先从左边元件库拖动一个中继器(repeater)过来。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

2.双击元器件,会打开新的页面,就是这个元器件子组件。刚才为什么是1、2、3三个方块?因为默认子组件有一个矩形。我们可以删掉它,添加我们自己的内容。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
3.我们添加了一系列组件,可填的是一个下拉菜单,两个数字。两个数字的角标意味着我们在他们之上创建了事件。这个容后再说。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
注意,对于这三个可编辑的文本框和菜单,都应该给他们以清晰的命名,以后会用到:
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字


二.中继器初始内容的设置

现在我们添加默认设置。点击中继器,在他的右边栏属性中有两部分内容值得关注。一是每项加载时的事件,二是下面的中继器数据集(7.0中叫dataset,这里不再叫了)。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
1. 首先,我们的子组件有三个要分配的单元(科室,月数,周数),创建三列。然后添加文字。注意两点:1.如果添加的是图片,可以右键,有导入图片选项;2。对于下拉菜单,要保证所填文本和想要初始化的那个选项完全一样。
2. 双击”每项加载时“,进入设置。
3. 对于文本框和下拉菜单我们分别处理。对于文本框,如图,左边点击设置文本,中间出现一个设置Text事件。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

4.**科室时间中的周数字(现在知道为什么要写名字了吧),下面开始设置文本。注意,item.XXX就是刚才数据集中的列,这是个固定的写法。刚才周数那一列的名字是week,所以这里是item.week。外面的双括号意指使用这个变量的值。月份数字一样。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

  1. 对于下拉菜单,从左边选择设置列表选中项,然后在右边找到子科室列表**。下面有很多选项。选择被选项的话,可以选某一项作为默认值,或者选择,然后写入[[Item.sick]]。这样我们的内容就绑定完成了。
    Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

作者漫漫冬程博客地址


三.按钮单击绑定

  1. 首先添加一系列文本框作为输入。
    Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字

2.对按钮添加鼠标点击时事件。左边找到添加行,右边选择刚才我们的中继器,然后点击下面的添加行
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
3.这里又出现了三列,实际上是说点击按钮后,新加一行中三列分别是什么。每列中有fx按钮,用于添加较为复杂的情况,单击sick列的fx
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
4.敲黑板,这里是新的知识点,局部变量概念。sick列需要把另一个下拉菜单(子科室列表head)的值作为写入值,因此,添加一个局部变量,这个变量的意思是,某个下拉菜单元件的当前被选项。构造好之后,上面直接插入[[LVAR!]]即可。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
5.其他两个是取文字的,如下图,比较类似,选择指定元件的元件文字构造局部变量:
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
此时我们已经构建完了点击按钮添加一行的所有工作。


四.中继器滚动条效果

中继器列表可能很长,所以我们希望他在一个区域内滚动,非常简单,右键它,选择转换为动态模板,然后就可以圈出中继器的显示范围限制了:
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
然后,右键–>滚动条–>选择横竖滚动条。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字


五.不同文本框的互相约束(这个例子中,1月=4周)

最后,文字约束部分。当A文本框改变时,希望触发B文本框改变。
1.选择A文本框属性中的文字改变时
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
2.依次选择设置文本,**B文本框,打开fx:
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字
3.fx的讲解很明白,他可以对变量进行计算。仍然先设置局部变量,这次是A文本框自己的文字。添加计算,结束。
Axure RP 8.0 用中继器(repeater)完成按钮点击添加下拉菜单和文字


总结

这个例子涉及到axure一些很精髓的部分,如事件绑定,局部变量公式编辑,中继器构造等等。梳理结构有利于以后不时回顾。

作者漫漫冬程博客地址