axure教程

本文介绍如何在Axure中使用中继器实现动态插入行的功能,包括编辑、保存、删除操作,以及右键菜单的创建。详细步骤讲解了中继器的状态切换、数据更新和交互动作配置,帮助用户掌握中继器高级用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们知道中继器可以实现列表,对于平常所axure教程见到的表格可以非常容易的实现。

并且,还可以通过中继器的一些交互动作实现添加、删除、更新、筛选与排序的操作。

但是,没有插入行的操作。偶尔会在某些群里看到有人提出这样的需求:我要插入啊!我要在中间那个地方插入啊!我教你怎么插入。先看一下插入的效果。

 

提示:因为AxureRP8没有在右键触发交互时xure教程屏蔽浏览器菜单(Axure RP 7是可以的),所以需要点一下屏幕中菜单以外的位置,才能看到自己的菜单。

接下来,我们来实现这个axure教程交互效果。

这里涉及到一些功能,我先来axure教程做一下描述:

  • 实现中继器列表每行包含显示状态和编辑状态;
  • 实现选项菜单;
  • 实现点击编辑按钮时,转为编辑状态;
  • 实现点击保存按钮时,更新当前行数据;
  • 实现点击删除按钮时,删除当前行数据;
  • 实现中继器某一行中点击鼠标右键时,在鼠标指针所在位置显示菜单;
  • 实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态;
  • 实现点击菜单中后面插入选项时,在行后插入新行并为编辑状态。

根据上方的描述,我们来axure教程分步实现每一个功能。

一、实现中继器列表每行包含显示状态和编辑状态。

1、放入中继器并命名为“List”,双击打开中继器axure教程,在中继器的编辑区放入5个矩形并命名;

 

2、将前面的4个矩形全选,点鼠标右键,选择转换为动态面板,命名为“RowPanel”;

3、双击动态面板将“State1”名称改为“Show”,点中这个axure教程状态后,点击“重复”;

4、将新出现的状态命名为“Edit”,并且将状态中axure教程的所有矩形的命名去除,再添加三个文本框到前3个矩形上,分别命名。

 

现在中继器中所有元件组成如下:

 

5、在属性中为中继器“List”添加一些数据。

 

提示:上图中能够看到,数据集中有一列名为“IndexText”的数据,这是实现插入效果的关键,用途在后面说明。

6、在【每项加载时】为中继器添加基本交互,让axure教程列表能够显示中继器中的数据。

 

 

7、在页面编辑区中,添加4个矩形作为表头,此时,已经正常显示了列表内容。

 

二、实现选项菜单。

添加两个矩形,作为菜单选项,并转换为动态面板(也可以组合);命名为“MenuPanel”后隐藏。

 

到这里所有的元件,准备完毕。

三、实现点击编辑按钮时,转为编辑状态。

编辑按钮添加【鼠标单击时】为“MenuPanel”【设置面板状态】为“Edit”,并且通过【获取焦点】的动作,将光标进入姓名输入框“NameInput”。

 

四、实现点击保存按钮时,更新当前行数据。

 

五、实现点击删除按钮时,删除当前行数据。

 

六、实现中继器某一行中点击axure教程鼠标右键时,在鼠标指针所在位置显示菜单。

为中继器中的动态面板“RowPanel”添加【鼠标右击时】的交互,设置动作为【移动】选项菜单“MenuPanle”【到达】鼠标指针所在的位置;并且,【显示】选项菜单“MenuPanle”。

不过,这里为了能够在当前行的前后进行axure教程插入,我们需要通过全局变量“Temp”记录一下当前行的编号,也就是前面提到的数据集中的“IndexText”。

 

七、实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态。

提示:此处为前面插入的关键步骤。

我们思考一下:在某一行的前面插入axure教程一个新行,从编号的角度来说,当前行的编号和新插入行的编号应该是什么样的呢?

我想是这样:插入位置以及之后axure教程每一行的编号都要增加1,而新插入行的编号为插入位置的行编号。

所以,在这里,我们需要处理行的编号,将所有大于等于插入位置行编号的行,现有编号都增加1。

这个处理,通过按【条件】【更新行】动作axure教程来实现。

提示:还记得我们将插入位置的行编号存入到了“Temp”变量中吗?

然后,通过【添加行】添加一个编号为插入axure教程位置行编号的行。

最后,别忘了【隐藏】选项菜单“MenuPanel”。

 

八、实现点击菜单中后面插入选项时,在行后插入axure教程新行并为编辑状态。

提示:此处为后面插入的关键步骤。

后面插入和前面插入的过程差不多。

区别在于改变编号的逻辑。

后面插入时,插入位置自身编号不变,所以是将axure教程行编号大于插入位置编号的行进行编号增加1的操作。

然后,将变量中保存的编号也需要增加1,和新插入行的编号保持一致。

并且,插入的行的编号也是插入位置axure教程行编号增加1之后axure教程的编号,即变量中的新编号。

 

不过,到这里,大家会发现插入的行,还是在列表最下方出现。

九、添加排序

我们还需要对列表按编号升序排列,这个排序效果应该是中继器加载时就能够生效的。

 

十、设置插入的行为编辑状态

【添加行】动作会导致中继器列表刷新,所axure教程有行都变为正常显示状态。

如果想在插入行之后,新行为编辑状态,我们需要在中继器【每项加载时】,如果行编号是变量中保存的行编号(即新插入行的行编号),将动态面板“RowPanel”的状态设置为“Edit”。

 

这里要注意,因为是新增了一个用例,“Case2”会自动为“Else If”,需要在用例名称上点击鼠标右键,选择【转换为IF...】的选项进行转换。

十一、清空变量

当完成插入行的数据编辑,点击保存按钮时,中继器列表axure教程也会刷新,此时需要清空变量,以免因变量中存有编号,将对应的行转为编辑状态。

 

 

### Axure 使用教程概述 Axure 是一款功能强大的原型设计工具,广泛应用于产品经理、UI设计师以及前端开发人员的工作流程中。以下是关于 Axure 的一些核心使用教程和学习资源: #### 官方教程推荐 官方提供了详尽的学习材料,涵盖了从基础操作到高级技巧的内容。访问官方网站的培训页面可以获得全面的帮助和支持[^1]。 ```plaintext http://www.axure.com/training ``` #### 基础概念与界面介绍 Axure 的主界面由多个部分组成,包括左侧的页面列表和元件库、中间的设计画布以及右侧的属性设置面板。初学者可以从以下几个方面入手了解其基本结构: - **页面管理**:支持多页面设计,便于构建复杂的产品原型。 - **元件库**:内置丰富的控件(如文本框、按钮等),并允许用户自定义部件库[^3]。 - **交互逻辑**:强调通过事件驱动的方式实现动态效果,这是区别于其他静态设计软件的重要特性之一[^2]。 #### 动态面板的应用 动态面板是 Axure 中非常重要的功能模块,能够模拟多种复杂的交互行为,比如选项卡切换、弹窗显示隐藏等。掌握这一技能对于制作高质量的交互原型至关重要[^1]。 #### 自定义部件库指南 为了提高工作效率,建议创建属于自己的常用组件集合。具体步骤如下所示[^3]: 1. 打开菜单中的 `Create Library` 项; 2. 设定存储路径; 3. 开始绘制所需的新图标或者复制已有图形作为模板; 4. 存储完成后即可加载至当前项目供随时调取使用。 #### 高级技巧分享 除了上述提到的基础知识点外,《【axure教程Axure使用技巧15例》还列举了一些进阶方法来优化用户体验及提升效率。这些实例大多来源于实际工作经验积累而成,值得深入研究实践。 --- ### 示例代码片段 - 创建简单链接跳转 下面是一个简单的案例演示如何利用条件动作完成页面间的导航功能: ```javascript // 当某个对象被点击时触发此脚本 OnEvent('OnClick', function(event){ // 设置目标地址为另一个指定ID号所代表的画面位置 SetPanelState('targetPageId', 'stateName'); }); ``` 注意这里的语法可能需要依据最新版本有所调整,请参照相应手册核实细节。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值