1. 主页 > 行业资讯 > 设计文章 >

Axure高级教程:使用中继器作为下拉菜单

编辑导语:很多产品都有下拉菜单的功能,但有些下拉菜单繁琐不灵活;这篇文章的作者分享了一个高级教程,使用中继器作为下拉菜单。大家一起了解一下。

今天我和大家分享一个中继器的高级教程——用中继器作为下拉菜单。

首先,为什么要使用中继器作为下拉菜单

在我们开始教学之前,让我们讨论一下为什么我们使用中继器作为下拉菜单。

首先,市面上下拉菜单的教程都是用动态面板做的,菜单效果是通过隐藏拉和显示推实现的;这样做没有问题,但是使用起来很不方便。

为什么?

动态面板做的相当于写死了,你有10个菜单,你就要用10个矩形来画10次;如果想改变菜单的尺寸、颜色等样式,那就需要改10次;设置菜单跳转交互,需要设置10次,而且还要到不同的动态面板,非常麻烦;这样导致浪费了很多的时间,导致制作出来的元件复用性低。

所以作者用repeater做了一个下拉菜单原型,只需要填写repeater表单自动生成交互,只需要修改一次大小样式;非常方便快捷,可重用性高,所以强烈推荐大家使用。

二、原型效果预览

下面是下拉菜单的效果。也可以自己体验一下。

原型演示地址:https://lbligu.axshare.com/

三、生产材料

中继器×1,像素×1,右箭头x1,矩形×1,内嵌框架×1。

中继器中的组件按如下所示排列以形成组合

四.中继器表设置

图片代表中继器前面的图标。如有必要,右键单击以导入图片。

Menu1代表这一行菜单的一级菜单(一级菜单的menu1和menu2的值相同)。

Menu2代表二级菜单(本教程以二级菜单为例,如果需要两级以上,可以用同样的思路制作)。

你代表右箭头。如果我们有下拉菜单,填1,如果没有,就是空。我们将在下面详细描述这种交互。

石现表示是否显示菜单,1表示显示,如果默认不显示,则为空,一级菜单必须为1。

真:无论是否选择矩形,我们都需要先为矩形选择一种颜色。

Url:指跳转鼠标点击时跳转的页面,右键导入页面。

动词 (verb的缩写)交互式设置

1.当中继器的每个项目被加载时,

设置文本:让矩形文本=item.menu2..

如果right不等于1,我们隐藏右箭头。

如果是空,隐藏图片;否则,将图片值设置为item.picture..

如果显示不等于1,隐藏整个菜单组合。

如果true=1,则选择矩形。

�������

2.当鼠标点击菜单组合时,

这里有两种情况:

第一种情况是you==1,这意味着菜单有子菜单,所以我们需要显示子菜单。

在这里,我们需要先隐藏其他子菜单。如果菜单很少,我们就不能这样做。但是作者做过的项目基本都是基于这个逻辑,所以应该先更新行,前提是you不等于1,这些菜单的item.xian设置为0,相当于隐藏了所有子菜单。

然后在更新行中,menu1的item.xian(与点击菜单相同)被设置为1,以便显示点击菜单的所有子菜单。

在第二种情况下,you不等于1,这意味着没有低级菜单,所以我们可以在内嵌框架中打开与url对应的页面。

这里为了更美观,我们会设置菜单选择变色;因此,在更新行的操作中,首先将所有行的真值更新为0,然后将该行菜单的真值更新为0。

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/535.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息