Axure RP 8自定义复选下拉框,选中项文字同步显示

Axure RP 8自定义复选下拉框,选中项文字同步显示

一、展示与连接

最终实现效果图:
Axure RP 8自定义复选下拉框,选中项文字同步显示_第1张图片

本人实现的百度云盘链接:http://pan.baidu.com/s/1dF90czZ 以供学习,云盘密码可以私信问我!

二、实现步骤 
简单步骤如下(可参照云盘中文件编辑):
A 拖拽“文本框”元件到编辑区,选择适合Icon放到文本框中
B 拖拽“列表框”元件到编辑区,鼠标右键设置为动态面板,并将列表框设为隐藏。如下所示:Axure RP 8自定义复选下拉框,选中项文字同步显示_第2张图片

C 双击动态面板并确定编辑,如下图所示:
Axure RP 8自定义复选下拉框,选中项文字同步显示_第3张图片
D 可以依次拖拽并添加复选框到动态面板的编辑区域中,右侧可以为每个复选框命名,以便添加交互效果时辨别用。
E 以下设置复选框交互效果以第一个全选原因为例:
(1)在元件属性中的“选中时”添加用例,并设置交互条件,效果如下图
Axure RP 8自定义复选下拉框,选中项文字同步显示_第4张图片
(2)另外需要添加所有复选框的全局变量,对于第一个复选框,我们设置全局变量a来存储相应值,a默认值为空
Axure RP 8自定义复选下拉框,选中项文字同步显示_第5张图片
(3)接下编辑交互效果,当全部原因选框选中时,我们吧“全部原因”赋值给a
并设置文本框显示为“[[a]]”这样当我们选中时文字就会显示在文本框处,同理当我们取消选中时,我们把a设置为空,同时设置文本框显示为“[[a]]”
Axure RP 8自定义复选下拉框,选中项文字同步显示_第6张图片
(4) 最后将所有复选框的都这样设置,编辑结束

欢迎大家交流学习,不足之处还望指教!

你可能感兴趣的:(办公软件使用)