Axure新手养成计划(连载16)

Axure书籍 小楼一夜听春语 21884℃ 0评论

6.3.2.5.      全部与任何

条件判断不但有以上的结构,在条件编辑器界面中设立条件的时候,还可以设立多种条件,在这些条件全部被满足或者任何一个被满足时去执行用例中的动作。

下面我们通过两个例子来演示满足全部条件和满足任何条件的不同之处:

一、满足全部条件

假设一个用户名输入框中输入的字符必须是4位以上字母或数字才显示正确提示图标,否则显示错误提示图标。

首先,先准备好元件。(图98)

1、在编辑区先放入一个文本框,为其命名“user_name“;

2、在文本框后方,放入一个图片元件。因为,提示图标在文本框未输入文字前不显示,所以,我们选中这个图片元件,在快捷功能区或者样式中先勾选隐藏。勾选隐藏后图标变成淡黄色的矩形。

备注:如果不想让隐藏的元件显示为淡黄色,可以在【视图】中的【遮罩】选项列表中取消【隐藏对象】的勾选。这样被隐藏的元件,在编辑区也变成不可见的状态。

98

(图98)

然后,我们进行条件设置。(图99)

1、这个条件的触发,我们选择【失去焦点时】这个触发事件。

备注:失去焦点是指光标从文本框中消失,与其对应的是获取焦点,即光标进入文本框,呈现闪烁的状态。

2、在【失去焦点时】用例编辑界面点击【添加条件】。在条件编辑界面,我们可以选择符合【全部】以下条件。

3、添加第一个条件判断【元件文字】“user_name“【是】【字母或数字】,然后,点击后方的”+“,继续添加第二个条件判断【元件文字长度】“user_name“【>】【值】”4“。完成这些设置后,点击“确定“退出条件编辑界面。

99

(图99)

接下来,为用例添加符合条件时要执行的动作。

1、在动作列表中选择动作【设置图片】,在动作配置中勾选图片元件“msg01“,并在下方的”默认“设置中导入正确提示的图标;(图100)

100

(图100)

2、因为,提示图标初始为隐藏,这时需要让其显示出来,所以,我们再添加一个动作。在动作列表中选择【显示】,然后,在配置动作中再次勾选“msg01“。元件在显示或隐藏的动作中还可以选择各种动画效果,这里我们使用时长为”500“毫秒的【逐渐】显示效果。(图101)

101

(图101)

最后,继续添加一个用例,为不符合条件时的用例配置动作。所有动作就像前一个用例,不同的是【设置图片】“msg01“为错误提示的图标。(图102)

102

(图102)

通过这个案例说明,我们在为用例设置条件时,可以添加多个条件同时验证,只要在条件编辑界面选择符合【全部】以下条件,那么只有设置的条件全部满足的情况下才能够执行相应的动作,否则,即便有再多的条件都符合,只要有一条未能符合,都会导致验证失败,无法执行该用例中的动作。

二、满足任何条件

假设对一个电子邮箱地址的输入框进行验证,在输入框失去焦点时,如果输入的电子邮箱地址不包含“@”符号,或者不包含“.”则显示错误提示图标,否则显示正确的提示图标。

参照上一个例子,我们在编辑区继续放入文本框和图片元件,并且分别命名为“email”和“msg02”。我们把图片元件设为“隐藏”,然后,在文本框【失去焦点时】的触发事件中添加用例进行判断。(图103)

1、条件设立界面中,选择符合【任何】以下条件;

2、添加条件判断【元件文字】“email“【不包含】【值】”@“;

3、点击“+“继续添加,判断【元件文字】“email“【不包含】【值】”.“。

103

(图103)

      在完成以上条件设立后,首先,为满足条件添加要执行的动作,设置“msg02“为错误提示图标,并将其显示出来。然后,继续添加用例,设置未满足条件时执行的动作,设置”msg02“为正确提示图标,并显示出来。(图104)

104

(图104)

通过这个案例说明,我们在条件编辑界面选择符合【任何】以下条件的选项时,只要设置的条件有任何一条满足条件,就会执行相应的动作,否则,只有所有条件均不满足时,才会执行不满足条件用例中的动作。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载16)

喜欢 (45)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 受益匪浅啊!等待大神出新作!
    学习Ure2015-09-02 13:32 回复
  2. 大神,为什么我按照步骤走,F5预览时,输入框旁边的√、×符号显示不出来呢?
    vanillangel2015-09-18 10:03 回复
    • 请问这篇的触发事件为什么是失去焦点时?
      墨之2015-10-22 16:34 回复
      • 因为输入完之后光标离开输入框才能看到提示啊,光标在闪烁的话表示你正在输入
        兔纸2015-11-27 12:54 回复
    • 可能是因为你的触发时间写错地方了,这里是输入框的失去焦点事件。一定要选对输入框
      藕倪2016-02-22 18:19 回复
    • 我跟你一样,按照步骤来的,按F5预览,在输入框输入符合条件的数字后,光标离开输入框,图片并未出现。
      小美2016-06-23 11:24 回复
    • 失去焦点的对象是“user_name”吗
      whcwb2016-07-05 17:17 回复
  3. 请问是不是没有按钮触发事件时就可以用失去焦点去触发事件完成?
    Kimmy2016-02-22 16:52 回复
  4. 请问在第一个案例中设置第二个图片为错误时,第一个图片默认也自动换成了错误的图标?
    向日葵2016-03-05 16:24 回复
  5. 为什么我输入字母无效呀,为什么不能识别字母
    喜欢就好2016-07-21 10:38 回复
  6. 受益匪浅
    倔强的心2017-08-06 16:14 回复