利用变量设置,实现两个展示区域的折叠和展现,且同时只能展示一个内容。
工具/原料
1
Axure 8
2
Thinkpad E431
方法/步骤
1
先添加2个点击区域,组合后命名为a和b。包括点击图标的展开和折叠内容。
2
使用向下和向上的图标来实现点击事件,命名好图标为上和下
3
再添加2个展示区域,组合后命名为a-1和b-1。
4
并设置好4个组件的默认位置,a和b之间设置好合适的间距,a-1和b-1紧跟在a和b组件。
5
因为了控制点击永远只显示一个展示区域,所以用到一个全局变量。打开事件编辑,点击添加全局变量,设置好变量名,并进行赋值表示初始状态。设置的变量为:_OnclickJiancha,赋值为1
6
开始设置每一个的点击事件,先从a中的向下图标开始,点击展开a-1,并隐藏向下图标,显示向上图标 。同时,还要设置b向下移动的距离。如果b-1展开,要隐藏掉;
7
再设置a中向上图标事件,隐藏展开区域,设置变量为0
8
完成a的设置,进行b的设置,类似的操作,先设置向下展开的事件;此时要根据变量来判断是否要对a进行隐藏,所以有2个事件,以变量为条件,添加IF条件。
9
设置向上图标事件,为隐藏b-1
10
我们来看看具体实现的效果。
注意事项
1
点击后,注意设置变量的值
2
要添加条件进行当前变量值的判断,再处理不同内容