AxureRP教程–可关闭菜单效果

可关闭菜单其实也可以称作为可隐藏菜单,只不过这种隐藏不能恢复了,需要刷新才会再次出来。这个也算是自适应菜单里面的一种,因为某一个菜单项关闭了之后,其他菜单项要自动顶替这个菜单项的位置显示。这个就是一个关闭按钮的功能,适用于一些采用Portal形式来部署内容的网站,每个Iframe框里面的内容都可以加上收缩、展开、关闭的按钮,进而控制网站的排版,常见于个人中心页面的设置,或者现在流行的云桌面,不过类似应用在网站上的已变少了,可能是因为这种方式给了用户太大的灵活性,反倒是不好。

用AxureRP来实现这种效果还是要借助动态面板的特性,依托其可以隐藏显示和可移动的特性,来控制菜单的自适应显示。实现原理是首先要对菜单项进行合理的分组,使每次操作的对象只有两个动态面板,比如有4个菜单项的时候,分为1和234一组,2和34一组,3和4一组,这样三种情况都考虑到了之后,每次操作菜单项的时候,都只需考虑所在组的两个动态面板的隐藏和移动就可以了,例如要把2菜单关闭,因为其属于2和34一组里面,所以要把2隐藏,34上移,操作4的时候最简单,只要隐藏即可。但在设计的时候,要先把每个菜单项用动态面板实现,然后再将分组用动态面板实现,因此这中间动态面板嵌套了很多动态面板。

如图示有四个菜单项,由上到下编号为1,2,3,4,操作任一个菜单项,都只会影响到自己和自己下面的菜单项,按上述所述原理分好组之后,下面的菜单项就是一个整体的动态面板,因此操作起来比较简单,特别是第四项,下面已经没有菜单项了,因此只要控制隐藏就可以了。如果采用判断每个菜单项的是否隐藏状态来判断的话,每个菜单项都有隐藏和显示两种状态,这样四个菜单项就有16种情况,每次设置条件判断的时候要判断每个菜单项是否隐藏,会大大增加设置的工作量,而且工作量会随着菜单项的增加而级数增长。而分组的设置则只有4种情况,且不需要做条件判断,直接设置单击事件即可。

应该说这个例子最主要的就是要进行分组控制的设置了,这样能大大减少工作量,但这中分组的方式不是所有情况都适用的,特别是菜单项自身还有变化的时候,设置起来就没有这么简单了,就需要做条件判断,这个后面会介绍到。

这个示例的实现方式就是这样,总体来说还是比较简单,稍微难的就是动态面板移动时候的位移量控制了,这个只要大家熟悉了AxureRP的坐标轴,就会得心应手了,就是在设计Delete按钮的OnClick事件的时候,一是让当前菜单项隐藏,二是让当前菜单项以下的全部菜单项上移,这两个控制做好了,效果也就出来了。

 

点此查看演示

 



无觅相关文章插件,快速提升流量

评论已关闭!