Axure中继器完成表格的增删改查的自定义元件(三列表格与十列表格)

目录

一、中继器

1.1 定义

1.2 特点 

1.3 适用场景

二、三列表格增删改查

2.1 实现思路

 2.2 效果演示

三、十列表格增删改查

3.1 实现思路

3.2 效果演示 


一、中继器

1.1 定义

  1. 在Axure中,"中继器"通常指的是界面设计中的一个元素,用于传递信息或事件。它类似于计算机网络中的中继器,但其作用更多地涉及到交互设计。
  2. 具体来说,Axure中的中继器是一种特殊的图形元素,通常以箭头的形式表示,用于连接不同的页面或部件。中继器的作用是将一个页面或部件中发生的事件或信息传递给另一个页面或部件,实现页面之间或组件之间的交互。
  3. 例如,你可以在Axure中创建一个中继器,将一个按钮的点击事件传递给另一个页面上的一个表单,以更新表单中的内容。中继器还可以用于模拟用户在应用程序中的流程,使得用户操作可以被正确地处理和响应。
  4. 需要注意的是,Axure中的中继器与计算机网络中的中继器并没有直接的关联,它们只是名称相似而已。

1.2 特点 

在Axure中,中继器的特点如下:

  1. 用于传递信息或事件:中继器是连接不同页面或部件之间的一个元素,主要用于传递信息或事件。

  2. 以箭头形式表示:中继器通常以箭头的形式出现,它的方向表示信息或事件的传递方向。

  3. 可以自定义样式:Axure提供了多种中继器样式可供选择,用户还可以自定义中继器的颜色、粗细、箭头类型等属性。

  4. 可以设置交互效果:用户可以为中继器添加交互效果,比如鼠标悬停时改变颜色、点击时弹出特定页面等。

  5. 可以用于模拟应用程序:通过将多个页面或部件通过中继器连接起来,用户可以在Axure中模拟应用程序的流程,从而更好地测试和优化应用程序的交互设计。

需要注意的是,尽管中继器在Axure中具有重要的作用,但并不是所有的设计项目都需要使用中继器。在实际使用中,用户应根据具体情况进行选择和应用。

1.3 适用场景

中继器可以在以下场景中使用:

  1. 跨页面交互:如果你需要在不同的页面之间传递信息或事件,可以使用中继器将它们连接起来。例如,当用户在一个页面上点击按钮时,可以通过中继器将这个事件传递给另一个页面上的表单,以更新表单中的内容。

  2. 组件之间的交互:当你的设计中需要多个组件之间交互时,可以使用中继器将它们连接起来。例如,你可以在一个页面上创建一个滑块组件和一个文本框组件,使用中继器将它们连接起来,当用户拖动滑块时,文本框中的值会随之改变。

  3. 应用程序流程模拟:通过将多个页面或部件通过中继器连接起来,用户可以在Axure中模拟应用程序的流程,从而更好地测试和优化应用程序的交互设计。

  4. 改进用户体验:中继器可以用来改善用户体验,例如,当用户在一个页面上完成了某个操作时,可以通过中继器立即将页面转到下一个步骤,避免用户在等待时间过长时感到不满或迷失。

总之,中继器是一种有效的工具,可以帮助设计师在Axure中实现更好的交互设计,提高用户体验。但需要注意的是,在使用中继器时,应避免过度使用,保持简洁明了,以便用户更好地理解和操作。

二、三列表格增删改查

2.1 实现思路

  1. 表格头部设计:利用矩形与文本标签进行表头设计。
  2. 插入中继器元件:表格数据部分。在中继器内部设置删除与修改的按钮(附带点击事件与标记行),点击修改按钮,会弹出修改界面,可对表格选中行的数据进行修改。
  3. 搜索框与新增按钮:外部则插入查询搜索框与查询、新增按钮,点击新增按钮能弹出新增页面进行信息添加并赋值到表格。
  4. 新增与修改界面:搭建新增修改界面,并且设置隐藏。当点击相对应的按钮是方可显示。
  5. 分页条:给中继器设置多页显示,规定每页项的数量,并且设置点击时的交互,达到数据分页的效果。

 2.2 效果演示

三、十列表格增删改查

3.1 实现思路

十列表格的实现思路与三列表格一样,不同的是,十列表格数据部分,中继器插入图片进行显示需要另外操作。

3.2 效果演示 


最后Axure中继器完成表格的增删改查的自定义元件(三列表格与十列表格)就到这里,祝大家在学产品的路上一路通畅!

感谢大家的观看 !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/287295.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android的组件、布局学习

介绍 公司组织架构调整,项目组需要承接其他项目组的android项目,负责维护和开发新需求,故学习下基础语法和项目开发。 组件学习 Toolbarheader布局部分 就是app最顶部的部分 他的显示与否,是与F:\androidProject\android_lear…

issue阶段的选择电路的实现

1-of-M的仲裁电路 为什么要实现oldest-first 功能的仲裁呢? 这是考虑到越是旧的指令,和它存在相关性的指令也就越多,因此优先执行最旧的指令,则可以唤醒更多的指令,能够有效地提高处理器执行指令的并行度,而且最旧的指…

JNDI注入Log4jFastJson白盒审计不回显处理

目录 0x00 前言 0x01 Maven 仓库及配置 0x02 JNDI 注入简介 0x03 Java-第三方组件-Log4J&JNDI 0x04 Java-第三方组件-FastJson&反射 0x05 白盒审计 - FastJson 0x06 白盒审计 - Log4j 0x07 不回显的处理方法 0x00 前言 希望和各位大佬一起学习,如果…

通用的java中部分方式实现List<自定义对象>转为List<Map>

自定义类 /*** date 2023/12/19 11:20*/ public class Person {private String name;private String sex;public Person() {}public Person(String name, String sex) {this.name name;this.sex sex;}public String getName() {return name;}public String getSex() {return…

单片机应用实例:LED显示电脑电子钟

本例介绍一种用LED制作的电脑电子钟(电脑万年历)。其制作完成装潢后的照片如下图: 上图中,年、月、日及时间选用的是1.2寸共阳数码管,星期选用的是2.3寸数码管,温度选用的是0.5寸数码管,也可根据…

国产ToolLLM的课代表---OpenBMB机构(清华NLP)旗下ToolBench的安装部署与运行(附各种填坑说明)

ToolBench项目可以理解为一个能直接提供训练ToolLLM的平台,该平台同时构建了ToolLLM的一个开源训练指令集。,该项目是OpenBMB机构(面壁智能与清华NLP联合成立)旗下的一款产品,OpenBMB机构名下还同时拥有另外一款明星产…

scrapy快加构造并发送请求

scrapy数据建模与请求 学习目标: 应用 在scrapy项目中进行建模应用 构造Request对象,并发送请求应用 利用meta参数在不同的解析函数中传递数据 1. 数据建模 通常在做项目的过程中,在items.py中进行数据建模 1.1 为什么建模 定义item即提前…

Vue+ElementUI前端添加展开收起搜索框按钮

1、搜索框添加判断 v-if"advanced" <el-form-item label"创建日期" v-if"advanced"><el-date-pickerv-model"daterangeLedat"size"small"style"width: 240px"value-format"yyyy-MM-dd"type&q…

LED恒流调节器FP7126:引领LED照明和调光的新时代(调光电源、汽车大灯)

目录 一、FP7126概述 二、FP7126功能 三、应用领域 随着科技的进步&#xff0c;LED照明成为了当代照明产业的主力军。而在LED照明的核心技术中&#xff0c;恒流调节器是不可或缺的组成部分。今天&#xff0c;我将为大家介绍一款重要的恒流调节器FP7126&#xff0c;适用于LED…

设计模式(三)-结构型模式(5)-外观模式

一、为何需要外观模式&#xff08;Facade&#xff09;? 要实现一个大功能&#xff0c;我们需要将它拆分成多个子系统。然后每个子系统所实现的功能&#xff0c;就由一个称为外观的高层功能模块来调用。这种设计方式就称为外观模式。该模式在开发时常常被使用过&#xff0c;所…

WPF仿网易云搭建笔记(7):HandyControl重构

文章目录 专栏和Gitee仓库前言相关文章 新建项目项目环境项目结构 代码结果结尾 专栏和Gitee仓库 WPF仿网易云 Gitee仓库 WPF仿网易云 CSDN博客专栏 前言 最近我发现Material Design UI的功能比较简单&#xff0c;想实现一些比较简单的功能&#xff0c;比如消息提示&#xff0…

Android studio Android SDK下载安装

我们访问地址 https://developer.android.google.cn/studio?hlzh-cn 拉下来直接点击下载 然后来下来 勾选 然后点击下载 下载好之后 我们双击打开 点击下一步 确认上面的勾选 然后下一步 这里 我们选择一下安装目录 然后点击下一步 安装 安装完之后点击进行下一步 Fin…