小楼axure rp教程（二）数字调节效果
小楼axure rp教程（二）数字调节效果
示例原型：点击这里下载
实现目标：
1、点击上箭头数字增加
2、点击下箭头数字减少
最终效果如下：
http://www.soger.net/wp-content/uploads/2013/07/gaollg0.gif
这里用到了变量，当然用变量是一种实现方式，动态面板也能实现类似效果，只是不能够无限加减。
实现过程：
1、需要的组件：文本框1个，矩形2个
2、将文本框文字改为1，标签起个名字比如叫…文本框（图1）
http://www.soger.net/wp-content/uploads/2013/07/11.jpg
3、把矩形变成三角形：选择矩形点右键—编辑选项—选择形状—选择向上三角形；另外一个矩形选择向下三角形。（图2）
http://www.soger.net/wp-content/uploads/2013/07/21-300x169.jpg
4、设置矩形大小，在这里我设置成12*12（图3）然后按照效果图摆好位置。
http://www.soger.net/wp-content/uploads/2013/07/31-300x192.jpg
5、开始设置两个三角形的点击事件(onclick)。
向上的设置成：点击时文本框的文字=文本框文字+1（图4）
http://www.soger.net/wp-content/uploads/2013/07/41-300x183.jpg
向下的设置成：如果文本框文字大于0，则文本框的文字=文本框文字-1。与上面三角形不同的是需要设置一个条件（图5）。
http://www.soger.net/wp-content/uploads/2013/07/5-300x80.jpg
小技巧：复制向上三角形的用例，粘贴到向下三角形的onclick中，双击打开后把+1直接改成-1（图6）
http://www.soger.net/wp-content/uploads/2013/07/6-300x179.jpg
好了，生成原型就能看到想要的效果了。
本文出自 诉客 ▪ 产品经理的心声，转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/51.html
收藏分享评分
页:
[1]
