最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

输入步进器-升级版

教程 小楼一夜听春语 4535浏览

在《局部变量的应用》中,我们一起制作了一个输入步进器。

在这篇教程中,我们一起来实现更加复杂的输入步进器。

当每次点击加号按钮时,项数会递增1。

当每次点击减号按钮时,项数会递减1。

当项数为1项时,减号按钮不可用,并变为灰色。

一、准备元件

1、一个矩形,宽度“300”像素,高度“45”像素,默认文字为“1 项”,并命名为“数量”,边框颜色为灰色,字号为“16”,文字的左边距为“10”像素。

2、两个圆角矩形,宽度“37”像素,高度“23”像素,边框颜色为蓝色,圆角半径为“5”像素,分别取消部分圆角。

3、两条水平线和一条垂直线,线段颜色为蓝色,长度为“13”像素。

温馨提示:如果样式设置有问题,请先学习《常用样式设置》。

4、将组成减号的圆角矩形和水平线全选,设置禁用时的交互样式,线段颜色为灰色。

温馨提示:如果不了解交互样式,请先学习《Axure的7种交互样式(4)-禁用的交互样式》。

5、将组成加减号的元件摆放好,分别组合后,命名为“加号”与“减号”。

6、将减号组合的禁用选项勾选,让它默认呈现灰色不可用状态。

另外,还要将加号组合置于顶层,以免出现加号缺少左边框的问题。

二、设置交互

1、加号[单击时],要为[数量][设置文本],文本的[值]是递增后的数值与“项”组成的字符串。

因为,“数量”元件中的文本并非纯数字,而是包含了汉字。所以,我们需要先将[目标]元件的[文本]中数字部分截取出来,加“1”后,再和“项”字连接。

字符串函数“slice()”能够进行文本截取,参数为截取的起始位置和终止位置,并且能够输入负数,负数表示从后往前的位置。

我们需要截取“数量”元件文字的第1位至倒数第2位,函数的参数为“0”和“-2”。

字符串的索引位置从0开始,所以,参数“0”表示第1个位置,“-2”表示倒数第2个位置,也就是“项”字前方的空格所在的位置。因为终止位置的字符是不会截取到的,所以能够仅截取到数字的部分。

完整的公式为:[[Target.text.slice(0,-2)+1]] 项

注意,公式中“项”字的前方有一个空格。

温馨提示:有人不清楚公式中的“Target.text”是什么意思。“Target”就是动作设置中所选择的目标元件,“text”就是元件上的文字。如果还是无法理解...那就放弃我吧。

2、加号[单击时],项数会超过1项,此时应该[启用][减号]。

3、减号[单击时],要为[数量][设置文本],文本的[值]是递减后的数值与“项”组成的字符串。

这是减号要默认执行的动作。

但是,另外还有一种情形就是当完成递减后,项数为“1 项”时,要禁用减号按钮。

所以,我们需要[启用情形],设置当前情形名称为“默认执行”。

因为是默认执行,这种情形不需要添加条件。

温馨提示:如果不了解情形的设置,请先学习《情形(条件)的设置》。

4、减号[单击时]的第2种情形。

点击[添加情形]按钮,为新的情形设置名为为“数量为1项时”,并添加对应的条件。

为这种情形添加符合条件时要执行的动作,[禁用][当前]按钮。

此时需要注意,设置的两种情形是“if...else”的关系。

而第1种“默认执行”的情形是无条件执行的情形,会导致第2种情形永远不会被执行。

所以,这两种情形之间不能存在逻辑关系。

我们在第二个情形名称上点击鼠标右键,菜单中选择“切换为[如果]或[否则]”,将“else if”转换为“if”。

这样,点击减号按钮时,就能够进行第2种情形的判断了。

通过此案例不难看出,当一个元件被禁用时,它的交互也会被禁用。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 输入步进器-升级版