Axure 8 怎么给树结构节点添加右键菜单

Axure 8 怎么给树结构节点添加右键菜单,第1张

可以实现

方法可能有点贱,我是这样做的:

选添加一个20*16的矩形,然后设置其边框为“无”,填充色为透明。

设置页面动做:

设置刚添加的矩形右击动作:

这样就能实现你的要求了,唯一不好的就是那个右击出来的菜单会被浏览器的右击菜单覆盖,最好移动的cursor.x减去一个this.width;另外单击事件要先隐藏矩形再实现单击,移动鼠标时再显示矩形

axure版本 :8.0

实现效果

原型查看

https://u7k6gc.axshare.com/#c=2

实现思路

       通过动态面板实现菜单选中与未选中的不同效果,在页面加载时,将指定菜单的动态面板状态设置为选中状态。由于菜单一般会涉及多个页面,可以通过母版来减少重复工作。

       本示例只讲解了横放的菜单实现,竖放的菜单与此实现一致,各位童鞋们可以举一反三。

制作步骤

1、制作一个未选中的菜单。添加一个文本框,填写好菜单的名称,设置好样式。

2、将其转换为动态面板。并用State1复制一个状态。

3、双击编辑State2,修改该文本的颜色,并添加一个选中的标记条。(各位可根据UI实现效果,添加其中的图标或者图片)

4、复制该动态面板,并修改相关文字,制作其他几个菜单,分别为每个动态面板取上对应的名字。

5、选中刚才制作的所有菜单的动态面板,点击右键,“转换为母版”,将此母版命名为“顶部菜单”。

6、分别为每个菜单制作相应的页面,并在页面顶部同样的位置插入该母版。

7、分别设置每个页面的页面载入时事件,动作添加为“设置面板状态”。

公司介绍页面,将动态面板“公司介绍”的状态设置为State2,其他动态面板的状态设置为state1

产品方案页面,将动态面板“产品方案”的状态设置为State2,其他动态面板的状态设置为state1

联系我们页面,将动态面板“联系我们”的状态设置为State2,其他动态面板的状态设置为state1

8、添加菜单点击事件。

双击刚才创建的母版,进入母版编辑界面。

分别选中创建的菜单动态面板,添加“鼠标单击时”事件

公司介绍菜单,鼠标单击时在当前窗口打开公司介绍页面

产品方案菜单,鼠标单击时在当前窗口打开产品方案页面

联系我们菜单,鼠标单击时在当前窗口打开联系我们页面

至此,一级菜单的效果已经实现。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11389758.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存