Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

一、效果

展示效果如下:

二、绘制元件

1、【中继器1】:命名为“菜单”,将中继器中的矩形命名为“菜单矩形”,矩形大小设置为230*184。备选数据的列:id,menu,url。

添加的备选数据如下:

2、【中继器2】:命名为“页签”,将中继器中的矩形为“页签矩形”,矩形大小设置为120*30。备选数据的列:id,menu。不设置备选数据。设置矩形“页签矩形”的交互样式:选中设置为紫色背景,白色字体。

3、【形状】:命名为“关闭”。大小设置为15*15。

4、【中继器3】:命名为“页面”,将中继器中的矩形为“页面矩形”,矩形大小设置为1200*800。备选数据的列:id,url,sort。不设置备选数据。

三、添加全局变量

添加三个全局变量sort、id、ids。中继器交互时使用。

四、添加交互

1、为中继器“菜单”【每项加载】事件添加动作,详细动作见图:

为中继器“菜单”中的矩形“菜单矩形”【单击时】事件添加动作,详细动作见图:

2、为中继器“页签”【每项加载】事件添加动作,详细动作见图:

为中继器“页签”中的矩形“页签矩形”【单击时】事件添加动作,详细动作见图:

3、为形状“关闭”【单击时】事件添加动作,详细动作见图:

4、为中继器“页面”【载入时】、【每项加载】事件添加动作,详细动作见图: