4.6　右键菜单

案例描述

单击鼠标右键，在弹出的快捷菜单中选择需要选择的选项，菜单隐藏。

思路分析

• ▷　将垂直菜单转换为动态面板，并添加“页面鼠标单击时”和“页面鼠标单击右击时”事件。
• ▷　在垂直菜单中为每个选项添加“鼠标单击时”事件，隐藏垂直菜单。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在左侧“元件库”面板中将“垂直菜单”元件拖入编辑区中适当的位置，单击鼠标右键，在弹出的快捷菜单中选择“转换为动态面板”命令，如图4-55所示，将“垂直菜单”元件转换为动态面板。

（3）在右侧“检视：动态面板”区域设置名称为menu，单击“样式”标签切换至“样式”面板，选中“隐藏”复选框隐藏动态面板，如图4-56所示。

（4）双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击State1选项，进入menu/State1（index）编辑区，选择Item3单元格，单击鼠标右键，在弹出的快捷菜单中选择“后方添加菜单项”命令，如图4-57所示，在后方添加一个菜单项。

（5）用同样的方法在后方添加两个菜单项，并一一双击单元格，输入相应的内容，如图4-58所示。

（6）选择“新建”单元格，在右侧单击“属性”标签切换至“属性”面板，在“交互”区域双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“隐藏”选项，在右侧“配置动作”区域选中“menu（动态面板）”复选框，如图4-59所示。单击“确定”按钮返回至编辑区中。

（7）用同样的方法为其他单元格添加“鼠标单击时”事件，设置隐藏动态面板。单击index标签切换至index编辑区，在空白处单击一下，在右侧“属性”面板中单击“更多事件>>>”下拉菜单右侧的下三角按钮，在弹出的下拉菜单中选择“页面鼠标单击时”选项，如图4-60所示。

（8）弹出“用例编辑<页面鼠标单击时>”对话框，在左侧“添加动作”区域选择“隐藏”选项，在“配置动作”区域选中“menu（动态面板）”复选框，如图4-61所示。单击“确定”按钮返回至“用例编辑<页面鼠标单击时>”对话框。

（9）在右侧“属性”面板中单击“更多事件>>>”右侧的下三角按钮，在弹出的下拉菜单中选择“页面鼠标右击时”选项，如图4-62所示。

（10）弹出“用例编辑<页面鼠标右击时>”对话框，设置隐藏menu（动态面板），在左侧“添加动作”区域选择“移动”选项，在右侧“配置动作”区域选中“menu（动态面板）”复选框，如图4-63所示。

（11）设置“移动”为“绝对位置”，单击x文本框后的fx按钮，弹出“编辑值”对话框，插入函数[[Cursor.x]]，如图4-64所示。单击“确定”按钮返回至“用例编辑<页面鼠标右击时>”对话框。

（12）单击y文本框后的fx按钮，弹出“编辑值”对话框，插入函数[[Cursor.y]]，单击“确定”按钮返回至“用例编辑<页面鼠标右击时>”对话框，如图4-65所示。

（13）在左侧“添加动作”区域选择“显示”选项，在右侧选中“menu（动态面板）”复选框，设置“动画”为“逐渐”，“时间”默认为50毫秒，选中“置于顶层”复选框，如图4-66所示。单击“确定”按钮返回至编辑区中。

（14）按Ctrl+S快捷键，以“4.6”为名称保存该文件，然后按F5键预览效果，如图所4-67所示。