欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

axure怎么制作多选树效果? axure多级菜单的制作方法

程序员文章站 2022-08-30 20:14:18
axure怎么制作多选树效果? axure多级菜单的制作方法...

axure中用一个中继器实现多选树的效果。比如多级菜单,该怎么制作呢?下面我们就来看看axure制作三级菜单的教程。

axure怎么制作多选树效果? axure多级菜单的制作方法

1、添加中继器:在中继器里放入下拉符号和多选框

axure怎么制作多选树效果? axure多级菜单的制作方法

2、设置中继器:

type:分1、2、3三个级别,1表示一级(如广东省),2表示二级(如广东省—广州市),3表示(广东省-广州市-海珠区)。

memu1:表示第一级菜单

memu2:表示第二级菜单

memu3:表示第三级菜单

xiala:1表示有下拉符号,0表示没有下拉符号

see:1表示可见,0表示隐藏

xuan:下拉符号的方向,0向右,1向下

xuanzhong:1表示选择,0表示未选中

axure怎么制作多选树效果? axure多级菜单的制作方法

3、设置中继器载入时交互事件。添加筛选[[item.see=='1']]:筛选出see为1(可见)的行

axure怎么制作多选树效果? axure多级菜单的制作方法

4、设置中继器每项加载时交互事件

1)设置多选框文本和位置

      如果是一级菜单,设置多选框文字=memu1

      如果是二级菜单,设置多选框文字=memu2,并且移动下拉符号和多选框组合向右移动20

      如果是三级菜单,设置多选框文字=memu3,并且移动下拉符号和多选框组合向右移动40

2)设置下拉符号

      如果xiala=0,隐藏下拉符号。

      如果xuan=0,下拉符号向右,表示收起下级菜单

      如果xuan=1,下拉符号向上,表示打开下级菜单

3)设置选中

      如果xuanzhong=1,选中该行多选框。

axure怎么制作多选树效果? axure多级菜单的制作方法

5、设置下拉符号鼠标单击时事件

如果xuan=0,更新行this,列xuan=1。设置文本1级文本标签=memu1,2级文本标签=memu2,出发鼠标单击展开按钮。

如果xuan=1,更新行this,列xuan=0。设置文本1级文本标签=memu1,2级文本标签=memu2,出发鼠标单击收起按钮。

axure怎么制作多选树效果? axure多级菜单的制作方法

6、设置展开按钮鼠标单击时事件

如果2级文本标签为空,更新行条件[[item.type=='2'&&item.memu1==a]],更新see=1

如果2级文本不为空。更新行条件,[[item.type=='3'&&item.memu1==a&&item.memu2==b]],更新see=0

axure怎么制作多选树效果? axure多级菜单的制作方法

7、设置收起按钮鼠标单击时事件

如果2级文本标签为空,更新行条件[[item.type!='1'&&item.memu1==a]],更新see=0,xuan=0

如果2级文本不为空。更新行条件,[[item.type=='3'&&item.memu1==a&&item.memu2==b]],更新see=0

axure怎么制作多选树效果? axure多级菜单的制作方法

8、设置多选框事件

选中时,更新行this,列选中=1,设置文本1级文本标签=memu1,2级文本标签=memu2,type文本标签=type,触发鼠标单击选中按钮的事件。

取消选中时,更新行this,列选中=0,设置文本1级文本标签=memu1,2级文本标签=memu2,type文本标签=type,触发鼠标单击取消选中按钮的事件。

axure怎么制作多选树效果? axure多级菜单的制作方法

9、设置选中按钮鼠标单击时事件

如果type文本标签=1,更新行条件[[item.memu1==a]],更新xuanzhong=1。

如果type文本标签=2,更新行条件[[item.memu1==a&&item.memu2==b]],更新xuanzhong=1。

axure怎么制作多选树效果? axure多级菜单的制作方法

10、设置取消选中按钮鼠标单击时事件

如果type文本标签=1,更新行条件[[item.memu1==a]],更新xuanzhong=0。

如果type文本标签=2,更新行条件[[item.memu1==a&&item.memu2==b]],更新xuanzhong=0。更新行条件[[item.memu1==a&&item.memu2==''&&item.memu3=='']],更新xuanzhong=0

如果type文本标签=3,更新行条件[[item.memu1==a&&item.memu2==b&&item.memu3=='']],更新xuanzhong=0。更新行条件[[[item.memu1==a&&item.memu2==''&&item.memu3=='']],更新xuanzhong=0

axure怎么制作多选树效果? axure多级菜单的制作方法

11、取消选中按钮、选中按钮、收起按钮、展开按钮、1级文本标签、2级文本标签、type文本标签设置为隐藏。

以上就是axure多级菜单的制作方法 ,希望大家喜欢,请继续关注。

相关标签: 多级菜单 Axure