Axure RP 9萌新修炼手册-第五章-交互应用(4)

第四节 函数详解

在【值】的编辑界面中,【插入系统变量或函数】的列表除了包含系统变量,还包含函数。

这些函数都是Javascript脚本编程语言中的常见函数。

很多人认为使用函数是很困难的事情,碰都没碰到,先把自己吓软了,门都进不去。

实际上,使用函数和使用变量是一样的简单。

我们已经了解系统变量是帮助我们获取一些运算公式中需要的值。

那么,函数是什么作用呢?

函数是通过特定的运算方法帮助我们一些运算公式中需要的值。

实际上,我们所写的每一个运算公式也都是为了运算出某一结果的方法,它们都可以看做是函数,只是没有名称而已。

函数是由名称、括号以及参数组成,例如:字符串函数“charAt(index)”。

“charAt”是函数名称,从语义上我们可以大概知道是:在哪里的字符。

那么,到底是在哪里的字符呢?

“index”是参数,即参与运算的数值,它用于指定字符的位置。

所以,函数“charAt(index)”表示获取指定位置的字符。

了解了这个函数的用途,我们就可以使用这个函数帮我们进行字符的获取。

先来看一个验证手机号码例子。

案例19:手机号码合法性验证

1、准备相关的元件。

包括1个文本框和1个文本标签元件,文本标签元件命名为“Message”。(图5-54)

除了放入元件,还需要对文本框元件进行一些属性(提示文本与最大长度)与样式(圆角)的设置。(图5-55 )

2、为元件添加交互。

先进行交互的分析。

(1)验证结果包含“验证通过”和“验证未通过”两种情形,分别提示“正确”与“错误”。

(2)“通过验证”的情形应该符合以下条件:

  • 字符数量为11位;
  • 纯数字组成;
  • 第1位数字必须是1;
  • 第2位数字不能是0、1、2。

根据以上分析,我们添加交互设置。

步骤1:

手机号码输入框元件【鼠标移出时】,为提示元件“Message”【设置文本】为“正确”。(图5-56)

步骤2:

为步骤1添加的交互【启用情形】,设置情形的名称为添加“验证通过”,并设置条件。(图5-57)

分别判断:

  • 【当前元件】的【元件文字长度】【==】“11”;
  • 【当前元件】的【元件文字】【是】【数字】;
  • 当前元件的元件文字第1位字符“[[This.text.charAt(0)]]”【==】“1”;
  • 当前元件的元件文字第2位字符“[[This.text.charAt(1)]]”【不是】“0、1、2”【之一】;

使用函数时,文本对象中字符的位置从0开始,所以第一位字符的位置是0,第二位字符位置是1,以此类推。

步骤3:

为交互事件【添加情形】,设置情形名称为“验证未通过”,不添加任何条件(图5-58)。

步骤4:

在新添加的情形下方【插入动作】,为提示元件“Message”【设置文本】为“错误”。(图5-59)

 

到这里,就完成了手机号码合法性验证的案例。

我们再来看一个案例。

案例:20模拟数字键盘输入

这是一个模拟数字键盘的案例。(图5-60)

在这个案例中,数字键盘可以向任何一个文本框中输入内容。

1、准备相关的元件。

在画布中放入2个文本框元件,12个矩形元件以及1个退格图标。(图5-61)

每个矩形元件作为数字键,输入相应的数字或字符,退格键除外。

退格键是由一个退格图标和矩形组合而成。

组合的操作可以选中多个元件后,点击工具栏中的组合按钮,或者通过快捷键<Ctrl+G>键完成。

2、为元件添加交互。

先进行交互的分析。

(1)点击数字键时,需要设置光标所在文本框(焦点元件)的文本,将文本框中已有的文本与按钮上的文本相连,形成新的文本;

(2)点击清空键时,需要设置光标所在文本框(焦点元件)的文本为空值;

(3)点击退格键时,需要设置光标所在文本框(焦点元件)的文本为现有文本去除最后一位字符之后的文本。

根据以上分析,我们完成交互的设置。

每个数字键的交互都一样,这里以数字键“1”为例。

步骤1:

数字按键元件【单击时】,为“焦点元件”【设置文本】,【文本】【值】为焦点元件当前的元件文字连接当前数字键上的元件文字“[[focusText]][[Thi

s.text]]”。(图5-62)

注:这里的目标是“焦点元件”,而不是一个固定的元件。

公式中的“focusText”是自定义局部变量,通过这个变量获取了光标所在文本框的文本。(图5-63)

步骤2:

清空键的动作和数字键一样,只是【值】的设置不输入任何内容,直接点击确定按钮即可。(图5-64)

步骤3:

为 退格键(组合)添加交互,动作也和数字键一样,只是【值】的内容我们需要填写“[[focusText.substr(0,focusText.length-1)]]”。(图5-65)

每次退格都是光标所在文本框的文本去除最后一个字符,也就是需要从左侧第一个字符截取到末尾字符的前一个字符,或者说截取的字符数量比现有文本的字符数量少1。(图5-66)

这里用到了函数“substr(start,length)”。

这个函数用于对文本对象进行截取,参数“start”是截取的起始位置,“length”是截取的字符数量。我们将这两个参数提供给函数,函数就自动帮助我们获取到我们想要的文本。

从以上两个案例我们可以看出,函数的使用方法:[[对象.函数(参数)]]

所以,函数的使用非常简单,我们只需要知道提供什么参数给函数就能够得到什么样的运算结果,至于函数的运算过程无需关心。

注:关于函数,大家可以通过本书附件中的《Axure RP系统变量与函数速查表》进行了解。

但是,这个案例还没有结束,因为当鼠标指针点击按键时,如果没有点在按键正中央的文本,而是文本的四周,就会出现......(图5-67)

W*** t** f***?又粗又长又直的一条,看的人家心里慌慌的...

这个问题是因为制作按键的矩形元件能够获取焦点所导致的。当点击矩形元件文字四周时,焦点会进入矩形元件,从而让矩形元件变成了“焦点元件”。

解决这个问题的方法,是通过一个不能获取焦点的透明元件覆盖在按键上。

还记得热区吗?它是一个没有文字(不能获取焦点)的透明元件。

我们将热区元件覆盖每一个按键。并且,添加一个交互动作叫【触发事件】,触发对应的按键元件【单击时】的交互事件。(图5-68)

也就是说,当点击热区时,触发热区下一层按键的【单击时】交互。

这样处理之后,点击热区不会导致焦点离开文本框进入按键元件,并且输入文字的交互依然有效。

注:可以先完成一个按键和热区的交互,然后将它们一起复制成新的按键(注意是一起选中后复制),修改按键上的数值即可。如果你已经做完了,不要恨我......

第五节 元件组合

在工具栏中通过【组合】和【取消组合】的按钮可以进行组合的操作,另外也可以通过快捷键<Ctrl+G>键和<Ctrl+Shift+G>键进行组合与取消组合的操作。

在进行组合操作时,要注意一点,如非需要,不要多次组合,以免出现不必要产生问题。

在案例20中,大家能够看到组合也能够添加交互事件。

其实,组合的使用比较常见,需要统一显示、隐藏、移动的多个元件,或者为多个元件统一添加交互,都可以通过组合来完成。

在案例20中,大家能够看到组合也能够添加交互事件。

组合的使用比较常见,需要统一显示、隐藏、移动的多个元件,或者为多个元件统一添加交互,都可以通过组合来完成。

案例21:二级菜单的显示与隐藏

我们先来看一个点击一级菜单显示二级菜单的案例。(图5-69)

这个案例来自一个Python大牛的网站-“魔力Python”。

网站地址:http://www.opython.com

大家能看到,当鼠标指针进入一级菜单会显示二级菜单,并且光标在一级菜单与二级菜单区域内时,二级菜单不消失,当光标离开一级菜单与二级菜单的区域时,菜单才会消失。

1、准备相关的元件。

案例中所有元件都是矩形元件,二级菜单项以及背景矩形组合到一起,命名为“Submenu”后设为隐藏。(图5-70)

一级菜单和二级菜单都有鼠标指针进入后的变色效果,我们为这些元件分别添加交互样式。(图5-71)

2、为元件添加交互。

这个交互非常简单,只需要添加一个交互事件,就是一级菜单元件【鼠标移入时】【显示】二级菜单“Submenu”。(图5-72)

那么,鼠标移出时隐藏不需要添加交互吗?

确实不用添加。

在【显示】的动作中有一个【更多选项】,选择里面的【弹出效果】就能够实现鼠标离开(移出)时自动隐藏显示的内容。

我们再来看一个案例。

案例22:表格整行变色

在我们做一些表格的操作时,需要鼠标指针进入一行单元格时,整行颜色发生改变,鼠标指针离开时恢复原有颜色;并且选中一行单元格式,颜色也会发生改变。(图5-73)

1、准备相关的元件。

这里需要注意,复选框不是我们元件库中的复选框元件,我们需要专门制作。

还记得怎么使用图标字体吗?如果不记得了,麻烦你把书翻回去。

我在前言中就强调了,这本书前后内容有关联,一定要按照顺序进行学习,还能不能听点儿话了?

我们打开Word文档,插入一个对号的图标,还有一个下箭头的图标,这些图标来自FontAwesome 5字体。(图5-74)

然后,在Axure RP的画布中放入矩形与文本标签元件组成一行内容,并将字体图标复制粘贴到相应的元件中。(图5-75)


复选框的制作是在矩形元件编辑文本的状态下,把对号图标(文字)粘贴到矩形元件的文本中。注意,不是在画布中直接粘贴。

另外,还要把矩形的字体颜色设置为白色,这样矩形在默认状态下就只能看到外框,看不到里面的“对号”图标。(图5-76)

“下箭头”字体图标我们粘贴到“更多”的文本标签中,与文字用两个空格隔开,并且单独为图标设置字体与颜色。(图5-77)

接下来,复选框选中时需要变为蓝色,我们通过【交互样式】设置选中状态的颜色。并且,背景矩形鼠标悬停时变为浅灰色,选中时变为深灰色,也都需要通过【交互样式】来设置。(图5-78)

完成以上的设置之后,我们将所有元件全选,将它们组合到一起,命名为“Row”。

在组合的属性设置中,勾选【触发内部元件鼠标交互样式】。(图5-79)

这样在查看原型时,鼠标指针停放在组合内的任何元件上都能够让背景矩形改变颜色。

注:不信你不勾选这项试试,鼠标指针放在复选框或者文本标签上时,背景矩形是不会变色的。

二、为元件添加交互。

我们需要完成复选框的交互事件。

这个交互只有一个,就是点击复选框时切换组合的选中状态。

选中我们用矩形制作的复选框元件,添加【单击时】【设置选中】组合“Row”为【切换】的交互事件。(图5-80)

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


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

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

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


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(4)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址