多语言展示
当前在线:1394今日阅读:86今日分享:14

Axure设计:两个中继器的增删改案例(上)

控件案例使用,通过两个中继器之间的新增,删除,更新等操作,说明各个操作是设计使用~
工具/原料

Axure RP 8

方法/步骤
1

因没有现成的控件可用,所以此篇开场,先建控件环境及简单基本操作设计,下一篇,完善改善各个控件操作~

2

新建2个中继器,分别命名为“中继器A”和“中继器B”

3

设置”中继器A“、”中继器B“间距为5;

4

设置”中继器A“Column0列内容为:演示案例A、演示案例B、演示案例C……

5

删除”中继器B“的所有行

6

进入“中继器A”编辑,新增“文本标签”及两个按键,如下图所示:

7

“文本标签”设置尺寸为250*40,边框为无,文本内容居左

8

命名两个按键,分别为”add“和”del“

9

”按键:add“设置文本内容为”加入清单“”按键:del“设置文本内容为”移除“

10

”按键:add“的单击交互动作:---1.“中继器B”增加一行2.隐藏”按键:add“3.显示”按键:del“---

11

其中,给”中继器B“新增一行,是把”文本标签“内容添加到”中继器B“中去;如下图所示:

12

”按键:del“的单击交互动作:---1.删除“中继器B”一行2.隐藏”按键:del“3.显示”按键:add“---

13

其中,给”删除”中继器B“一行,需要定位删除”中继器A“相同内容的一行;所以,设置条件内容为:[[TargetItem.Column0==Item.Column0]]如下图所示:

14

显示交互动作设置完后,隐藏“按键:del”,并重叠两按键;如下图所示:(可以考虑再新增一条水平线,位置随意)

15

进入“中继器B”编辑,新建一“文本标签”及图标;如下所示(可以考虑再新增一条水平线,位置随意)

16

“文本标签”设置尺寸为250*40,边框为无,文本内容居左;图标命名为“del”;

17

这里简单设置”图标:del“的单击交互动作:---1.删除本行---(下篇,此操作会被优化,中继器B删除本行后,“中继器A”同步切换操作按键)

18

”中继器B“内部布局如下图所示:

19

界面优化下,如下图所示:

20

预览,交作业~(期待下一篇优化吗?哈哈~)

21

觉得不错,对你有帮助的话,请投个票,加个赞哦~

推荐信息