右鍵菜單是軟件設計中常用的功能之一，但這個功能在Axure設計時，需要聯(lián)合中繼器才能實現一些大家認知的效果。這篇文章，作者分享了這一功能的操作，推薦給大家。

右鍵菜單在軟件系統(tǒng)中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結合動態(tài)面板，實現快捷菜單頁面跳轉的效果。

【原型效果】

點擊鼠標右鍵，彈出菜單，彈出的位置為鼠標指針的位置；

彈出的菜單由中繼器制作，在中繼器表格中輸入選項后自動生成交互效果；

點擊菜單選項，可以實現頁面的跳轉，案例中是中繼器和動態(tài)面板間的聯(lián)動。

【制作教程】一、重點難點和解決思路講解

其實做鼠標右鍵菜單的最主要的難點是鼠標右鍵這個動作，因為Axure是通過瀏覽器來發(fā)布預覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當我們做鼠標右鍵這個操作時，首先是顯示瀏覽器自身的右鍵菜單，從而導致原型中的鼠標右鍵這個動作失效。

那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個操作禁用呢？當然可以，其實我們可以通過代碼的方式將它禁用掉，對應的代碼如：

我們可以把上述代碼復制到字體里，那在預覽演示的時候就會自動生效，具體操作是點擊工具欄的發(fā)布——生成html文件——選擇fonts——添加字體——選擇@font-face——將代碼復制進入。這樣就可以實現原型內鼠標右鍵的交互而又不觸發(fā)瀏覽器鼠標右擊的默認操作。注：上述方法為Axure的操作路徑，其他版本位置可能有所出入，但是都是可行的。

二、主要的制作材料1、動態(tài)面板（頁面內容）

本案例是用中繼器菜單和動態(tài)面板聯(lián)動制作的，在動態(tài)面板不同的stare里面放入對應的內容，然后后續(xù)可以通過設置面板狀態(tài)的交互就可以實現跳轉不同的頁面了。當然了如果你們不想把頁面放在動態(tài)面板內，也可以用多個頁面，用打開鏈接的交互也可以實現。具體可以按照你們實際需求操作，思路都是一樣的。

那我們把頁面內容放進動態(tài)面板里不同的狀態(tài)后，要把動態(tài)面板每個狀態(tài)state命名成和菜單一致的名字，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料，這一步命名涉及后面頁面的跳轉。2、中繼器

我們在中繼器默認的表格里填寫菜單名稱，和前面動態(tài)面板名稱一致即可，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料。

元件的樣式和其他的效果需要的話可以自由添加，例如移入變色，可以在元件樣式懸停時添加；需要陰影效果的也可以自由添加，這里就不詳細說明了，可以根據自己的喜好設置。三、交互制作

1、鼠標右鍵點擊動態(tài)面板時

首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設置以后，如果點擊菜單外的內容，菜單就可以自動隱藏

然后，我們還要讓彈窗菜單移動到鼠標指針的位置，這里我們用移動的交互就可以了，選擇到達，這里需要用到鼠標指針的函數Cursor.x和Cursor.y，分別對應鼠標指針所在的x坐標值和y坐標值。最后我們?yōu)榱孙@示的彈出不跳出窗口，我們在移動時增加邊界，這里用到window函數，window.height是窗口高度，window.width是窗口的寬度，我們設置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。

2、鼠標右鍵點擊頁面空白地方時

如果鼠標點擊頁面空白地方時，其實交互也是和上面一樣，這里考慮到上面的動態(tài)面板不是全屏的，所以我們補充這個交互，我們也不用復制上面的交互，我們直接用觸發(fā)的交互，觸發(fā)動態(tài)面板鼠標右擊時的交互即可。

3、中繼器菜單內部矩形鼠標單擊時

鼠標單擊中繼器菜單里面的選項時，我們用設置面板狀態(tài)的交互，設置頁面動態(tài)面板的值為中繼器表格內當前行記錄的文本值，簡單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對應變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。最后的最后，這里提醒一下，菜單選項名必須和動態(tài)面板里狀態(tài)名一一對應，不然就跳轉不了的。

這樣我們就完成了鼠標右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。