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

 时间:2024-10-14 18:40:17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • AxureRP如何关闭、恢复功能面板
  • 如何利用Axure RP 8设计出不同背景颜色五角星
  • CorelDRAW中怎么做笑脸图标?
  • AxureRP如何使用页面数据的提交按钮#校园分享#
  • ASP网上书店管理系统论文加源码
  • 热门搜索
    国庆节的手抄报图片 大手牵小手手抄报 母亲手抄报大全 保护绿色家园手抄报 手抄报花边边框 世界遗产手抄报 关于圣诞节的英语手抄报 手抄报图片大全2年级 感恩母爱手抄报第一名 邪教手抄报