立即注册,下载精品资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 xingbb 于 2013-7-6 18:47 编辑
小楼axure教程(二)数字调节效果
示例原型:http://pan.baidu.com/share/link?shareid=654974494&uk=537158863 实现目标: 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)
好了,生成原型就能看到想要的效果了。
|