查看: 1229|回复: 0
打印 上一主题 下一主题

小楼axure rp教程(二)数字调节效果

[复制链接]

1313

主题

1337

帖子

5648

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5648
跳转到指定楼层
楼主
发表于 2014-8-27 02:51:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[/url]

小楼axure rp教程(二)数字调节效果


示例原型:[url=http://pan.baidu.com/share/link?shareid=464281035&uk=537158863]点击这里下载
实现目标:
1、  点击上箭头数字增加
2、  点击下箭头数字减少
最终效果如下:

这里用到了变量,当然用变量是一种实现方式,动态面板也能实现类似效果,只是不能够无限加减。
实现过程:
1、  需要的组件:文本框1个,矩形2个
2、  将文本框文字改为1,标签起个名字比如叫…文本框(图1)

3、  把矩形变成三角形:选择矩形点右键—编辑选项—选择形状—选择向上三角形;另外一个矩形选择向下三角形。(图2)

4、  设置矩形大小,在这里我设置成12*12(图3)然后按照效果图摆好位置。

5、开始设置两个三角形的点击事件(onclick)。
向上的设置成:点击时文本框的文字=文本框文字+1(图4)

向下的设置成:如果文本框文字大于0,则文本框的文字=文本框文字-1。与上面三角形不同的是需要设置一个条件(图5)。

小技巧:复制向上三角形的用例,粘贴到向下三角形的onclick中,双击打开后把+1直接改成-1(图6)

好了,生成原型就能看到想要的效果了。

本文出自 诉客 ▪ 产品经理的心声,转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/51.html


收藏分享评分

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?马上注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
快速回复 返回顶部 返回列表