【Axure8.0】——利用中继器动态添加、删除原件



前言


  前面介绍了Axure8.0的一些基本功能,


  这次给大家介绍一个挺好玩的元件——中继器



正文


  此元件可以在一定程度上实现动态 添加、删除 元件


  下面介绍一下此功能的进阶之路



  基本款


1、添加中继器元件

 ① 中继器的属性中将中继器修改成一行

 ② 将中继器自动生成的一个事件删除

 ③ 调整一下自动生成的矩形的大小

 ④ 拖入一个文本框,随便输些文字,最后变成这个样子

【Axure8.0】——利用中继器动态添加、删除原件_第1张图片

2、 动态添加元件

 ① 对矩形添加鼠标单击事件

 ② 选择添加行动作

 ③ 勾选目标中继器

 ④ 单击下方的添加行

 ⑤ 点击图标添加一行,并确定

【Axure8.0】——利用中继器动态添加、删除原件_第2张图片


预览一下效果就是这样的

单击一下添加一组元件,并且添加的元件完全一样

元件之前的属性和事件全都不变

【Axure8.0】——利用中继器动态添加、删除原件_第3张图片


3、 动态删除元件

 ① 对矩形添加一个右击事件(请忽略截图中左上角的文字)

 ② 选择删除行动作

 ③ 勾选目标中继器

 ④ 选择this并确定

  这样右击哪一个矩形对应的哪一组元件就删除了

【Axure8.0】——利用中继器动态添加、删除原件_第4张图片


  略吊款


  为了更加方便一些,我将原本的中继器稍微修改了一下。


  并将上面的两个用例复制到了两个button的单击事件上了

【Axure8.0】——利用中继器动态添加、删除原件_第5张图片

在基本款中存在一些小问题:

 如果将某一个文本框的内容修改之后


 单击任意一个添加或者删除按钮


 所有的文本框都会变为原本设置的内容


 在某些时候,这样是不太好的


下 面 是 对 上 一 版 本 的 改 进


1、对文本框添加失去焦点事件

 ① 选择更新行动作

 ② 勾选目标中继器

 (前两步与前面的步骤类似,并未在图中表示)

 ③ 单击下拉菜单选择列

 ④ 在下拉菜单中选择目前唯一存在的一列Column0,并单击fx

 ⑤ 弹出窗体,单击插入变量或函数,选择元件下的text


【Axure8.0】——利用中继器动态添加、删除原件_第6张图片


2、对此文本框添加载入时事件

 ① 选择设置文本

 ② 选择当前元件

 (前两步与前面的步骤类似,并未在图中表示)

 ③ 单击fx

 ④ 弹出窗体,单击插入变量或函数

 ⑤ 选择中继器下的Item.Column0

【Axure8.0】——利用中继器动态添加、删除原件_第7张图片


到这里就修改完成了。


本来我还有1~2个版本给大家展示的,


但是通过前面的一些阐述,相信优秀、聪明的客官能将此元件开发的更好玩。。


结语


          该写的不是我相写的,写出来的又总是微不足道



你可能感兴趣的:(【Axure8.0】——利用中继器动态添加、删除原件)