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

本文主要是介绍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 效果演示

10ca68da939b48328660b6e9343d6626.gif

三、十列表格增删改查

3.1 实现思路

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

3.2 效果演示 

ad13cbab02ae4479a1b73867c8c84506.gif


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

感谢大家的观看 !

ebdbc3d0258c4187837545ddb5a7806c.png

 

这篇关于Axure中继器完成表格的增删改查的自定义元件(三列表格与十列表格)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/517914

相关文章

iOS自定义分享 (一)分享组件的接入

前言 在项目开发中,很多时候需要用到分享的功能。对于新手来说,分享是一个比较棘手的问题。并不是因为分享很难做,只是流程较多,第一次接触难免会出错,只要一个步骤错了,就无法继续下去。在这里对于几种常见的分享总结一下。 实现步骤 第一步:登录对应的网站,注册帐号,创建APP应用,获取AppID和AppKey; 第二步:下载对应的SDK,按照官方提供的文档配置工程,添加相应的依赖库; 第三步:

SpringBoot 学习六:数据库的增删改查

1、新建一个Girl类,添加如下代码: package controlle;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;@Entitypublic class Girl {@Id@GeneratedValueprivate Integer

iOS 判断多个子线程都执行完成

判断A、B、C、D四个子线程都执行完成。   - (void)requestDataList{dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);dispatch_group_t group = dispatch_group_create();dispatch_group

恩恩,迁移完成。。。

有人说找虐就学汇编,还有人说完全靠自己自学一样东西吧,这种经历会让你获益良多的。   这两者一结合在加上有学操作系统的念头,于是用了个把月时间修炼了下汇编。   另外,王爽老师的书是好书啊,极善的那种。   啥也不说了。。。 http://www.asmedu.net/blog/user/usermain.jsp?neighborId=53251

一个操作系统的实现_十分钟完成的操作系统

步骤: 1.编辑器(例如记事本)写入操作系统启动代码,保存为后缀名为.asm的文件格式         2.安装一款虚拟机软件以wm为例,新建一个虚拟机,注意操作系统与版本都选择其他,创建的最后一步选择[自定义硬件], 进入后选择[添加],选择[软盘驱动器],接着[创建空软盘映像],在虚拟机根目录下任意创建一个后缀名为.img或者.flg的映像文件 (可以新建文本文档,更

微信公众号自定义分销商城小程序源码系统 带完整的安装代码吧以及系统部署搭建教程

系统概述 微信公众号自定义分销商城小程序源码系统是一款功能强大的电商解决方案,它集成了商品管理、订单处理、支付接口、分销管理等多种功能。该系统支持自定义界面设计,商家可根据自身需求调整商城的页面布局和风格,打造独特的品牌形象。同时,系统还提供了丰富的营销工具,如优惠券、满减活动、限时折扣等,帮助商家吸引更多用户,提升销售额。 代码示例 系统特色功能 (一)商品管理      商品添加

鸿蒙HarmonyOS开发:@Builder装饰器,自定义构建函数

文章目录 一、自定义构建函数1、自定义组件内自定义构建函数2、全局自定义构建函数3、参数传递规则 二、示例演示1、Image组件2、layoutWeight属性3、定义模型类4、代码5、效果 一、自定义构建函数 ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个

对于集合中的自定义对象使用collections.sort 进行排序,需要实现compartor接口

/**  * 榜单 业务类  *  * @author seawind  *  */ public class RankService {     // 查看榜单     public List<Orderitem> showRank() {         RankDAO rankDAO = new RankDAO();         List<O

自定义类加载器如何避免双亲委派模型

自定义类加载器要避免双亲委派模型,通常意味着你需要直接重写 loadClass 方法而不是仅重写 findClass 方法。loadClass 方法是 Java 类加载机制中实现双亲委派模型的关键部分。 要绕过双亲委派模型,你可以在自定义类加载器的 loadClass 方法中直接调用 findClass 而不是先调用父类加载器的 loadClass。但是,请注意,这通常不是一个好的做法,因为它可

vue读取excel表格内容

vue读取excel文件内容 1. 安装第三方工具 xlsx npm install xlsx 2. 在vue组件中引入xlsx import * as xlsx from 'xlsx' 3. 使用xlsx读取excel文件 html部分 <el-upload action="#" :auto-upload="false" :on-change="handleFi