三级联动效果-Axure

一起来探讨下三级联动的效果吧!

今天要做的效果是:选择一级菜单,二级菜单联动;选择二级菜单或二级菜单选项改变,三级菜单联动。

最终效果示例图


各级菜单的内容及关联如下图所示:

三级联动效果-Axure_第1张图片
联动关系图


制作步骤如下:

1.首先建立三级菜单:

(1)一级菜单选项内容:植物、动物

(2)二级菜单选项内容:一级菜单选择植物,选项内容花、草;一级菜单选择动物,选项内容鸟、鱼。

所以建立一个动态面板(命名:生物),两个状态。

状态一命名植物,状态面板内添加选项内容花、草;

状态二命名动物,状态面板添加选项内容鸟、鱼。

(3)三级菜单建立规则同二级。建立一个动态面板(命名:具体生物),四个状态(分别命名花、草、虫、鱼),各状态选项内容同下图

三级联动效果-Axure_第2张图片
各级菜单选项内容


三级联动效果-Axure_第3张图片
各选项对应的动态面板

2.设置一级菜单、二级菜单选项内容改变时的事件:OnSelectionChange。


三级联动效果-Axure_第4张图片
一级菜单选择内容变化,二级菜单同步变化


三级联动效果-Axure_第5张图片
二级菜单选择内容变化,三级菜单同步变化

3.设置动态面板(生物)改变时的事件:

三级联动效果-Axure_第6张图片
只需设置二级菜单面板改变事件

4、F5预览查看吧

你可能感兴趣的:(三级联动效果-Axure)