Axure高保真教程：鼠標(biāo)右鍵顯示菜單

輯導(dǎo)語：在軟件系統(tǒng)中，右鍵菜單是非常常見的，它包含了各種命令可以選擇。本文作者分享了用中繼器制作右鍵顯示菜單，結(jié)合動(dòng)態(tài)面板，實(shí)現(xiàn)快捷菜單頁面跳轉(zhuǎn)效果的方法，一起來看一下吧。

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

一、制作完成后應(yīng)具備以下效果

點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，彈出的位置為鼠標(biāo)指針的位置
彈出的菜單由中繼器制作，在中繼器表格中輸入選項(xiàng)后自動(dòng)生成交互效果
點(diǎn)擊菜單選項(xiàng)，可以實(shí)現(xiàn)頁面的跳轉(zhuǎn)，案例中是中繼器和動(dòng)態(tài)面板間的聯(lián)動(dòng)

原型地址：https://h2pkno.axshare.com/#g=1

二、重點(diǎn)難點(diǎn)和解決思路講解

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

那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個(gè)操作禁用呢？當(dāng)然可以，其實(shí)我們可以通過代碼的方式將它禁用掉，對(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)面板（頁面內(nèi)容）

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

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

2. 中繼器

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

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

四、交互制作

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

首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設(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)擊頁面空白地方時(shí)

如果鼠標(biāo)點(diǎn)擊頁面空白地方時(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è)置頁面動(dòng)態(tài)面板的值為中繼器表格內(nèi)當(dāng)前行記錄的文本值，簡(jiǎn)單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對(duì)應(yīng)變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。

最后的最后，這里提醒一下，菜單選項(xiàng)名必須和動(dòng)態(tài)面板里狀態(tài)名一一對(duì)應(yīng)，不然就跳轉(zhuǎn)不了的。

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

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

本文由 @AI產(chǎn)品人原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

多朋友想學(xué)一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個(gè)詞語，HTML是HyperText Markup Language的簡(jiǎn)稱，想學(xué)習(xí)HTML語言，先得了解一些基本知識(shí)，今天這邊內(nèi)容可以作為學(xué)習(xí)HTML的菜鳥教程第一課。

HTML是什么？

一般我們說HTML是指超文本標(biāo)記語言，英文名稱為HyperText Markup Language，簡(jiǎn)稱HTML，它是目前互聯(lián)網(wǎng)上應(yīng)用最廣泛的語言。

如何查看HTML？

拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點(diǎn)右鍵，選擇“查看源”即可查看當(dāng)前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點(diǎn)擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項(xiàng)即可查看。

當(dāng)然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。

HTML有什么用？

HTML語言可以方便地將網(wǎng)絡(luò)上存儲(chǔ)于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對(duì)于我們來說，HTML是學(xué)習(xí)網(wǎng)頁制作的基本功，熟練掌握HTML這項(xiàng)基本功，可以為以后的學(xué)習(xí)和工作打下良好的基礎(chǔ)。

HTML如何入門？

要學(xué)習(xí)任何編程語言，都不好好高騖遠(yuǎn)，HTML的入門很簡(jiǎn)單，但是也要遵循學(xué)習(xí)的基本步驟，選擇一本入門書籍，循序漸進(jìn)地去學(xué)習(xí)每一張的內(nèi)容。一邊學(xué)習(xí)，一邊查看網(wǎng)頁代碼對(duì)照來學(xué)，提升入門速度。

HTML案例

下面就是最基本的HTML案例，在這個(gè)案例中，用的是HTML5，

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 描述了網(wǎng)頁的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容，因?yàn)橄旅媸亲詈?jiǎn)單的案例，所以只有幾行，實(shí)際網(wǎng)頁一般都有很多行。
<h1> 定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落，也就是大家常說的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一個(gè)標(biāo)題</h1>
    <p>我的第一個(gè)段落。</p>
</body>
</html>

如何編輯HTML?

這個(gè)就很多了，比如最出名的Dreamweaver，當(dāng)然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動(dòng)或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們?cè)趙odows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。

總結(jié)

以上是學(xué)習(xí)HTML菜鳥教程的第一課，首先保持一個(gè)良好的心態(tài)來學(xué)習(xí)，有好的心態(tài)，知識(shí)方面只要循序漸進(jìn)，學(xué)會(huì)就是水到渠成的事情了。

這個(gè)快節(jié)奏的數(shù)字時(shí)代，您的網(wǎng)站是與世界溝通的橋梁。然而，一個(gè)充滿錯(cuò)誤的網(wǎng)站會(huì)讓您失去寶貴的訪客。為了確保您的網(wǎng)站在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出，我們向您推薦一款強(qiáng)大而易用的工具——CSS HTML Validator Pro。

CSS HTML Validator Pro不僅僅是一個(gè)簡(jiǎn)單的HTML檢查器，它是一款集HTML、XHTML、CSS、鏈接、拼寫、JavaScript、PHP語法、SEO和可訪問性檢查于一身的全能工具。它能夠幫助您消除導(dǎo)致訪客離開網(wǎng)站的諸多問題，提高您的工作效率，節(jié)省時(shí)間和金錢。

與其他HTML檢查器不同，CSS HTML Validator Pro擁有強(qiáng)大的自定義語法檢查引擎，專為HTML、XHTML和CSS設(shè)計(jì)。它能夠深入挖掘潛在的錯(cuò)誤，確保您的網(wǎng)站在各種瀏覽器和設(shè)備上完美呈現(xiàn)。

CSS HTML Validator Professional是標(biāo)準(zhǔn)版的升級(jí)版，它提供了許多重要的額外功能。其中包括批量向?qū)А⑴渲镁庉嬈鳌?80天的免費(fèi)主要升級(jí)等。企業(yè)版、專業(yè)版和標(biāo)準(zhǔn)版之間的差異如表格所示。

這款應(yīng)用程序?qū)槟?jié)省時(shí)間，幫助您消除許多導(dǎo)致訪客放棄網(wǎng)站的常見問題。CSS HTML Validator Pro還保護(hù)您的隱私，因?yàn)樗粫?huì)將您的HTML和CSS文檔發(fā)送到互聯(lián)網(wǎng)上。這意味著您無需互聯(lián)網(wǎng)連接即可使用。

以下是CSS HTML Validator Pro的一些亮點(diǎn)和特點(diǎn)：

內(nèi)置HTML/文本編輯器，帶有語法高亮顯示。
強(qiáng)大的批量向?qū)В▋H限專業(yè)和企業(yè)版），讓您輕松驗(yàn)證多個(gè)文檔。您還可以給它一個(gè)URL并跟隨鏈接來驗(yàn)證一個(gè)小型到中型的網(wǎng)站。批量向?qū)н€可以用作網(wǎng)站拼寫檢查器和鏈接檢查器。
鏈接檢查（標(biāo)準(zhǔn)版和專業(yè)版）可以查找損壞和有問題的鏈接。批量向?qū)б部梢杂糜跈z查整個(gè)網(wǎng)站。
大多數(shù)對(duì)話框中提供幫助功能。
預(yù)配置了HTML 2.0、HTML 3.2、HTML 4.0、HTML 4.01、HTML5、XHTML、Microsoft Internet Explorer標(biāo)簽、SMIL、RealText、WebTV、WML、frame、table標(biāo)簽等。
支持XHTML！
根據(jù)Section 508 US Government Standards和/或行業(yè)標(biāo)準(zhǔn)的Web Content Accessibility Guidelines 1.0（WCAG 1.0）和2.0（WCAG 2.0）進(jìn)行可訪問性檢查。
當(dāng)您使用特定于瀏覽器的標(biāo)簽和屬性時(shí)提醒您（Std+）。
添加您自己的標(biāo)簽名稱、屬性和屬性值，或編輯現(xiàn)有內(nèi)容（Pro+）。
通過命令行參數(shù)，HTML Validator具有右鍵單擊HTML文檔、從彈出菜單中選擇一個(gè)菜單項(xiàng)，然后立即在屏幕上顯示錯(cuò)誤（如果有）的能力。
拖放多個(gè)文件到HTML Validator以同時(shí)驗(yàn)證多個(gè)文件或同時(shí)使用工具處理多個(gè)文件。
大小寫工具可以輕松將標(biāo)簽和屬性轉(zhuǎn)換為全部大寫或小寫。
Strip HTML工具可以從文檔中刪除HTML標(biāo)簽。
將Unix、Mac或MS-DOS格式的文本文件轉(zhuǎn)換為Unix、Mac或MS-DOS格式。
模板工具允許您快速輕松地更改HTML文檔的部分內(nèi)容。我們?cè)诒揪W(wǎng)站上廣泛使用它。
快速引用工具將在所有屬性值周圍添加引號(hào)（如果尚未添加）。
易于使用、高效且功能強(qiáng)大的界面。

讓CSS HTML Validator Pro成為您網(wǎng)站的守護(hù)者，確保您的數(shù)字存在始終保持完美無瑕。現(xiàn)在就行動(dòng)起來，讓您的網(wǎng)站在競(jìng)爭(zhēng)激烈的市場(chǎng)中獨(dú)樹一幟！

在線咨詢

上一篇：大家都看得懂的設(shè)計(jì)規(guī)范-輸入框篇
下一篇：50 種不同編程語言的“Hello World”，你知多少？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商