手机版 欢迎访问人人都是自媒体网站

当前位置:主页 > 推广 >

中继器系列(一):信息新增、删除、简单筛选

时间:2021-04-13 09:20|来源:网络整理|编辑:|点击:

在Axure中中继器是一个神奇的东西,最近在处理列表的时候使用到了中继器的增、删、查。现在对于这个模块做一个简单的教程。算是之前想做Axure系列的学习笔记的开始吧。

 中继器系列(一):信息新增、删除、简单筛选

一、前期准备

电脑:mac和win都可以(案例以win系统为例,mac类似)

软件:Axure 8.0(如需软件可以文章后面留言)

熟练程度:初级(会使用简单的元件即可)

相关使用元件:矩形、按钮、中继器、文本框,多行文本框、下拉列表框。

二、效果展示

效果展示:https://ksyyq0.axshare.com

三、正文(制作过程) 1. 搭建初始静态界面

在静态界面的搭建中会使用到前期准备中所提及的元件以及相关属性。这些都是比较基本的操作,就部一一解释了。搭建后的界面如下图,所用元件也做了详细命名处理,大家可以看命名后缀进行一些元件的区分。

中继器的新增、删除、筛选教程(原型下载)

2. 中继器关联相关初始数据

中继器的相关初始数据都可以在Axure中前期录入部分数据。录入数据后需要将数据与之前中继器中的文本进行绑定。(如果有些数据为相关同的数据,就可以不用关联,直接复用,具体可以自行查看中继器基础知识)。

中继器的新增、删除、筛选教程(原型下载)

中继器的新增、删除、筛选教程(原型下载)

3. 信息删除

这一步主要操作为信息的删除,主要以删除行为例。

中继器的新增、删除、筛选教程(原型下载)

四、信息增加 1. 本步主要主要操作为信息的增加

思路:初始加载隐藏弹框,在点击上部新增的时候进行弹框显示,输入相关信息,然后点击新增,信息添加入表格,弹框隐藏。

给弹框的【新增】按钮添加鼠标点击事件:

中继器的新增、删除、筛选教程(原型下载)

2. 为行中的数据绑定输入源

中继器的新增、删除、筛选教程(原型下载)

添加绑定信息

中继器的新增、删除、筛选教程(原型下载)

姓名绑定

中继器的新增、删除、筛选教程(原型下载)

性别绑定

中继器的新增、删除、筛选教程(原型下载)

备注绑定

3. 优化数据添加逻辑——姓名不能为空

思路:在新增按钮点击新增时判断姓名文本框中是否有字符的输入,如果没有就在姓名输入栏下显示【姓名不能为空】提示,如果有字符输入就直接添加成功,弹框隐藏。

中继器的新增、删除、筛选教程(原型下载)

字符为空提示

中继器的新增、删除、筛选教程(原型下载)

不为空成功添加

Copyright © 2018 DEDE97. 织梦97 版权所有 京ICP