combox添加下拉选项_【Axure答疑】按键自动选择上一个或下一个列表选项

6d245bbd348a66e488b7c11304001fbf.gif 有朋友有这样一个疑问:下拉列表怎么通过点击按钮来快速切换上一个或者下一个列表选项。

beefab08186786f3da23383eb87b2093.png

  我们先看看这位同学说的,axure自带的方案是如何的。   一、Axure的自带下拉列表 1、在部件窗口找到“Default-Forms-下拉列表框部件”,将其拖拽到编辑窗口中。    

d261247d31bc8681499441c99cfeb9b4.png

2、双击下拉列表框部件,打开编辑列表选项窗口  

20848a37d8d8350db8453cf4fe641c1b.png

3、编辑列表项。点击“+”,编辑选项内容。或者点击“Edit Many”,批量编辑选项内容。  

c9c4c792530d31de828d498f07ddb94b.png

注意,批量编辑时记住一定要每行一个名称。   4、点击确定,完成编辑。   5、点击预览,查看效果。   有两种选择列表项的方式: A、鼠标单击下拉列表框,打开选项列表,鼠标选择列表项。  

7e3aacaa33476b9067e5772008016cb0.gif

  B、鼠标单击下拉列表框,打开选项列表。通过电脑键盘中的“上”“下”按键,选择上一个或者下一个列表项内容。  

22f714d55ae81f120411e07f46853fd6.gif

  二、通过页面按键选择列表项内容 1、在原来的下拉列表的基础上,增加两个按钮,分别命名为“上”、“下”。按钮的样式根据自己的需要去调整。  

b4918ba442b3b4f915354b70763e3fe2.png

  2、交互设置   因为不能直接设置选择“上一个”“下一个”列表项,所以,我们需要设置实现“上一个”“下一个”的交互效果。   如果当前默认的列表项是1,点击下一个按钮的时候,列表项选择为2;如果当前的列表项是2,点击下一个按钮的时候,列表项选择为3,这样一次类推。   根据上面的分析,我们可以知道,触发部件是“上”、“下”按钮、条件判断是当前列表项的被选中项、动作为设置列表选中项。   (1)选择“下”按钮,双击鼠标单击时事件,打开用例编辑器。

30a4c267d03336c21fa7e604902f93ea.png

  (2)点击“添加条件”,打开条件生成器。设置条件:if 被选项于 (下拉列表框) == 1  

aaab32319063d6094214ce40880525c6.png

  (3)选择的动作为设置列表选中项,将下拉列表的选项设置为2。  

2a3db302a3bd265821296a31df218594.png

  (4)以此类推,设置条件:被选项于等于2、3、4的交互设置。为什么不用设置5呢?因为5是最后的一个列表项,没有下一个需要进行切换。   (5)预览看看效果  

9213ddf669563d55b2373e52af5bd5a9.gif

(6)查看实现效果无误之后,同样的方法设置“上”按钮上的交互。直接复制“下”按钮中的所有部件,进行简单修改即可。  

5b079bc42350672420d7b366c6e282f4.png

f0d6e52419920b6f0c2ecf40505f753b.png

80b71afab44a496daab5dd1986e6de3a.png

(7)查看最终的完整效果。  

eb6c4bdc4baae722f1abc38f54265a22.png

  下拉列表通过点击按钮来快速切换上一个或者下一个列表选项就实现了。   但是我们注意观察,点击按钮是直接更改了选中的列表,而不是显示对列表项的选择。关于这一点,留给大家思考,可以怎么做到这个效果。   如果得出结论,或者没有头绪没有思路的话,欢迎前来跟我们交流!

ab93b8228c566adf4f40ace6152d5c31.png

Axure RP 9基础教程(九)-工具提示设置

Axure中的“AdaptiveViews”(自适应视图)是什么

Axure 教程 | 使用键盘进行移动对象

38cef85c3167be42b817879f3d66a26f.png

点亮 a4b3374c1c91c0f74be3960bedf0281f.png,告诉大家你也在看2c6698b11ffa82f92a36dd22a8fda8bc.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值