Axure RP 9怎样模拟拨号键盘?Axure RP 9 mac实用教程
时间:2022-03-03 01:03:51
Axure RP 9,专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 ,可以帮助相关工作人员快速创建应用程序和网站的线框,原型和规格!那么axure怎么使用呢?以下是小编为大家带来的Axure RP 9教程。
axure模拟拨号键盘
效果描述:
按下数字按钮,输入对应的数字。
按下退回按钮删除上一步的数字。
当有数字时,显示添加号码btn和退回btn。
实现逻辑
函数[[LVAR.substring(from,to)]]:截取第from位到to位的字符串,举例:
[[1234567.substring(1,4)]]=234,也就是说截取第一位到第四位的数字但不包括第一位。函数[[LVAR.length]]:字符串长度,举例:
[[手机号码1234.length]]=4,也就是说该函数可以获得元件字符串的长度。
我们制作拨号键盘需要的按钮,鼠标按下按钮时,为手机号码文本框“Text 输入”设置文本[[X]]Y,这里X是局部变量,是手机号码文本框的文字,Y是按钮对应的数字,这样就实现了按下键盘输入对应的数字。我们制作拨号键盘的退回按钮,点击退回按钮,利用上边提到的函数截取字符串实现退回操作。
实现步骤—输入数字
我们增加所需元件,并命名。本案例中手机号码文本框命名为“Text 输入”,数字键盘命名为btn 1、btn 2、btn 3以此类推。这里注意手机号码文本框要选成文本框元件。
为元件 btn 1(即数字键盘1)设置交互:
鼠标按键按下时,当前元件选中为真,Text 输入 文本为[[Number]]1(其中Number是局部变量,为“Text 输入”的元件文字)鼠标按键释放时,
当前元件选中为假。
(这里注意,之所以做选中是为了交互的效果,我设置了选中时让按钮变色,这样可以更逼真的模拟拨号键盘)
为元件 btn 2(即数字键盘2)设置交互:
鼠标按键按下时,
当前元件选中为真,
Text 输入 文本为[[Number]]1
(其中Number为局部变量,是“Text 输入”的元件文字)
鼠标按键释放时,
当前元件选中为假。
为元件 btn 3 ...设置交互,以此类推。
这样,输入数字的交互就实现了
实现步骤—退回数字
我们为退回按钮设置交互:
鼠标按键按下时,设置当前元件选中为真,设置文本Text输入到[[Number.substr(0,Number.length-1)]](其中Number是局部变量,为Text 输入的元件文字)
鼠标按键释放时,
设置当前元件选中为假
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
2021回顾:5件苹果停止了的产品
![](https://img.aspxhome.com/file/2023/2/a203492_0s.jpeg)
wps中excel表格怎么求乘积
Excel中2010版进行数据自动筛选的使用方法
MacBook如何强制关机重启?MacBook Pro强制关机重启的快捷键
![](https://img.aspxhome.com/file/2023/8/a203918_0s.jpeg)
如何在 Word 文档里合并表格
![](https://img.aspxhome.com/file/2023/6/32186_0s.jpg)
Word如何设置横向页面
Excel表格怎么导入网页数据
iOS15发布时间确定了吗?苹果已官宣
![](https://img.aspxhome.com/file/2023/0/46050_0s.png)
WPS应用技巧—如何将日期转换为季度来显示
Word巧妙清除网页中的干扰乱码
![](https://img.aspxhome.com/file/2023/9/20089_0s.jpg)
在Excel中怎么快速使用自动筛选功能找到所需的数据资料
![](https://img.aspxhome.com/file/2023/3/42253_0s.jpg)
怎么在Word文档中并排窗口查看文档
在wps中怎样将文字保存为图片
word图表如何添加数据表
![](https://img.aspxhome.com/file/2023/4/33004_0s.jpg)
苹果或在 WWDC 上升级 iOS、macOS 等五大操作系统,处理器更新引关注
![](https://img.aspxhome.com/file/2023/0/a206910_0s.jpeg)
Word文档技巧—跨页表格每页都有标题
Word文档页面在哪里设置?Word设置文档页面
![](https://img.aspxhome.com/file/2023/5/23415_0s.jpg)
不用软件如何清理Win10电脑缓存?
![](https://img.aspxhome.com/file/2023/7/52387_0s.jpg)
Win10升级更新失败错误代码大全及解决办法
![](https://img.aspxhome.com/file/2023/8/52488_0s.png)