中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

【原型效果】

點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，彈出的位置為鼠標(biāo)指針的位置；

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

點(diǎn)擊菜單選項(xiàng)，可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，案例中是中繼器和動(dòng)態(tài)面板間的聯(lián)動(dòng)。

【制作教程】一、重點(diǎn)難點(diǎn)和解決思路講解

其實(shí)做鼠標(biāo)右鍵菜單的最主要的難點(diǎn)是鼠標(biāo)右鍵這個(gè)動(dòng)作，因?yàn)锳xure是通過(guò)瀏覽器來(lái)發(fā)布預(yù)覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當(dāng)我們做鼠標(biāo)右鍵這個(gè)操作時(shí)，首先是顯示瀏覽器自身的右鍵菜單，從而導(dǎo)致原型中的鼠標(biāo)右鍵這個(gè)動(dòng)作失效。

那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個(gè)操作禁用呢？當(dāng)然可以，其實(shí)我們可以通過(guò)代碼的方式將它禁用掉，對(duì)應(yīng)的代碼如：

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

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

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

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

我們?cè)谥欣^器默認(rèn)的表格里填寫(xiě)菜單名稱，和前面動(dòng)態(tài)面板名稱一致即可，案例中為我的論文、我的收藏、我的問(wèn)答、我的關(guān)注、我的點(diǎn)贊、我的通知、我的記錄、我的資料。

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

1、鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板時(shí)

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

然后，我們還要讓彈窗菜單移動(dòng)到鼠標(biāo)指針的位置，這里我們用移動(dòng)的交互就可以了，選擇到達(dá)，這里需要用到鼠標(biāo)指針的函數(shù)Cursor.x和Cursor.y，分別對(duì)應(yīng)鼠標(biāo)指針?biāo)诘膞坐標(biāo)值和y坐標(biāo)值。最后我們?yōu)榱孙@示的彈出不跳出窗口，我們?cè)谝苿?dòng)時(shí)增加邊界，這里用到window函數(shù)，window.height是窗口高度，window.width是窗口的寬度，我們?cè)O(shè)置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。

2、鼠標(biāo)右鍵點(diǎn)擊頁(yè)面空白地方時(shí)

如果鼠標(biāo)點(diǎn)擊頁(yè)面空白地方時(shí)，其實(shí)交互也是和上面一樣，這里考慮到上面的動(dòng)態(tài)面板不是全屏的，所以我們補(bǔ)充這個(gè)交互，我們也不用復(fù)制上面的交互，我們直接用觸發(fā)的交互，觸發(fā)動(dòng)態(tài)面板鼠標(biāo)右擊時(shí)的交互即可。

3、中繼器菜單內(nèi)部矩形鼠標(biāo)單擊時(shí)

鼠標(biāo)單擊中繼器菜單里面的選項(xiàng)時(shí)，我們用設(shè)置面板狀態(tài)的交互，設(shè)置頁(yè)面動(dòng)態(tài)面板的值為中繼器表格內(nèi)當(dāng)前行記錄的文本值，簡(jiǎn)單來(lái)說(shuō)你們可以用item.column0（如果你們沒(méi)有改列名，如果改了列名這里也對(duì)應(yīng)變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來(lái)即可。最后的最后，這里提醒一下，菜單選項(xiàng)名必須和動(dòng)態(tài)面板里狀態(tài)名一一對(duì)應(yīng)，不然就跳轉(zhuǎn)不了的。

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