手机拨号键盘的制作

手机拨号键盘相信每个人都比较了解了，那我们今天就用axure来制作这个大家都认识的手机拨号键盘。

在这个案例里边，具体效果是这样的：

1、点击数字按键，显示所点击的数字

2、若已有显示号码，在原有号码之后继续显示所点击的数字

3、若达到手机号码的长度，即11位，点击将无法继续显示

4、每点击一次删除按钮，已显示的号码删除一个数字

点击预览地址https://fhfq89.axshare.com，可以自己动手操作，对这个案例有更深入的理解。

这是拨号键盘基本的交互效果，大家可以看一看自己的手机键盘，有没有其他的效果，如果有的话，可以加进自己所做的原型中。

事不宜迟，我们就来看看这个案例是怎么制作的。

当然，首先肯定是要先准备页面元素了。在绘制界面的时候要注意，一是上方空白处必须有一个部件，作用是显示输入的号码。二是不要忘记对部件进行命名。

当点击1的时候，会有以下几种不同情况：

1、没有显示号码，那这时显示号码就是1

2、已有显示号码，且号码的长度不等于11位，现在所显示的就是原有号码加上1

3、已有显示号码，且号码的长度等于11位，点击之后不会有反应。

这是点击1时的分析，点击其他按钮也是同样的分析。

需要判断号码长度，我们这时就需要设置用例条件：如果“显示”的部件长度值小于“11”的话，我们就可以设置“显示”的文字。

上面我们分析的三种情况，实际上第一种和第二种是一样的。只是第一种中显示号码可以把它看成空值，空值加上1，所显示的就是1。所以“显示”的文字就应该是“显示”中原有的值加上1。这时候解决“加上”的问题就可以了。

这里可以借助一个字符串函数：concat，把字符连接起来。连接的分别是“显示”中现有的值，和现在点击所获取到的值。在表达式上可以这么表示：

最后，“显示”中开始出现号码之后，就可以吧删除按钮显示出来了。在1的鼠标单击时事件上再加一个显示动作即可。

预览一下，确认正确之后就可以把1上面的交互设置复制到其他数字按键上。

显示已经没有问题了，下面就来看看删除。

在单击删除按钮的时候，“显示”中的号码在原来的基础上删除一位。实现这个效果，我们可以使用另一个字符串函数sudstr，截取出某一段字符即可。起始位置就是0，从第一位开始截取。结束位置就是字符总长度往前退一位，字符总长度可以用length函数去随机获取， length-1就是这个结束位置。

所以这里的表达式就是这样的：

这个按钮上我们可以再完善一下，也就是没有号码的时候，按钮把它隐藏掉。只需要设置一下用例条件即可。在号码长度为1的时候，是最后一次点击这个按钮，点击完成之后，“显示”为空，删除按钮隐藏。

最后也可以进行一些细节的处理，比如设置数字按键的按键按下时样式、调整页面的视觉效果等等，案例完整呈现了。

这个案例的制作方法除了用在拨号键盘上外，也可以触类旁通，用在其他类似点击选择内容的的案例里边，比如电商商品的规格选择。