整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：在軟件系統中，右鍵菜單是非常常見的，它包含了各種命令可以選擇。本文作者分享了用中繼器制作右鍵顯示菜單，結合動態面板，實現快捷菜單頁面跳轉效果的方法，一起來看一下吧。
右鍵菜單在軟件系統中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結合動態面板，實現快捷菜單頁面跳轉的效果。
原型地址：https://h2pkno.axshare.com/#g=1
其實做鼠標右鍵菜單的最主要的難點是鼠標右鍵這個動作，因為Axure是通過瀏覽器來發布預覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當我們做鼠標右鍵這個操作時，首先是顯示瀏覽器自身的右鍵菜單，從而導致原型中的鼠標右鍵這個動作失效。
那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個操作禁用呢？當然可以，其實我們可以通過代碼的方式將它禁用掉，對應的代碼如：
我們可以把上述代碼復制到字體里，那在預覽演示的時候就會自動生效，具體操作是點擊工具欄的發布——生成html文件——選擇fonts——添加字體——選擇@font-face——將代碼復制進入。這樣就可以實現原型內鼠標右鍵的交互而又不觸發瀏覽器鼠標右擊的默認操作。
注：上述方法為Axure的操作路徑，其他版本位置可能有所出入，但是都是可行的。
本案例是用中繼器菜單和動態面板聯動制作的，在動態面板不同的stare里面放入對應的內容，然后后續可以通過設置面板狀態的交互就可以實現跳轉不同的頁面了。當然了如果你們不想把頁面放在動態面板內，也可以用多個頁面，用打開鏈接的交互也可以實現。具體可以按照你們實際需求操作，思路都是一樣的。
那我們把頁面內容放進動態面板里不同的狀態后，要把動態面板每個狀態state命名成和菜單一致的名字，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料，這一步命名涉及后面頁面的跳轉。
我們在中繼器默認的表格里填寫菜單名稱，和前面動態面板名稱一致即可，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料。
元件的樣式和其他的效果需要的話可以自由添加，例如移入變色，可以在元件樣式懸停時添加；需要陰影效果的也可以自由添加，這里就不詳細說明了，可以根據自己的喜好設置。
首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設置以后，如果點擊菜單外的內容，菜單就可以自動隱藏。
然后，我們還要讓彈窗菜單移動到鼠標指針的位置，這里我們用移動的交互就可以了，選擇到達，這里需要用到鼠標指針的函數Cursor.x和Cursor.y，分別對應鼠標指針所在的x坐標值和y坐標值。
最后我們為了顯示的彈出不跳出窗口，我們在移動時增加邊界，這里用到window函數，window.height是窗口高度，window.width是窗口的寬度，我們設置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。
如果鼠標點擊頁面空白地方時，其實交互也是和上面一樣，這里考慮到上面的動態面板不是全屏的，所以我們補充這個交互，我們也不用復制上面的交互，我們直接用觸發的交互，觸發動態面板鼠標右擊時的交互即可。
鼠標單擊中繼器菜單里面的選項時，我們用設置面板狀態的交互，設置頁面動態面板的值為中繼器表格內當前行記錄的文本值，簡單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對應變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。
最后的最后，這里提醒一下，菜單選項名必須和動態面板里狀態名一一對應，不然就跳轉不了的。
這樣我們就完成了鼠標右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。
那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~
本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
多朋友想學一下網頁制作，上網一看，只要涉及到網頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內容可以作為學習HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯網上應用最廣泛的語言。
如何查看HTML？
拿最常見的網頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網頁上點右鍵，選擇“查看源”即可查看當前網頁的HTML源碼；如果是其他瀏覽器的話，多數情況下點擊右鍵，選擇“查看源碼”或者類似“查看網頁源代碼”這樣的選項即可查看。
當然也可以通過專業的網頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網絡上存儲于不同位置的文字、圖片、聲音、視頻等內容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎。
HTML如何入門？
要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內容。一邊學習，一邊查看網頁代碼對照來學，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>如何編輯HTML?
這個就很多了 ，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統上常見的記事本，總之只要自己覺得方便就好。
總結
以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態來學習，有好的心態，知識方面只要循序漸進，學會就是水到渠成的事情了 。
這個快節奏的數字時代，您的網站是與世界溝通的橋梁。然而，一個充滿錯誤的網站會讓您失去寶貴的訪客。為了確保您的網站在競爭激烈的市場中脫穎而出，我們向您推薦一款強大而易用的工具——CSS HTML Validator Pro。
CSS HTML Validator Pro不僅僅是一個簡單的HTML檢查器，它是一款集HTML、XHTML、CSS、鏈接、拼寫、JavaScript、PHP語法、SEO和可訪問性檢查于一身的全能工具。它能夠幫助您消除導致訪客離開網站的諸多問題，提高您的工作效率，節省時間和金錢。
與其他HTML檢查器不同，CSS HTML Validator Pro擁有強大的自定義語法檢查引擎，專為HTML、XHTML和CSS設計。它能夠深入挖掘潛在的錯誤，確保您的網站在各種瀏覽器和設備上完美呈現。
CSS HTML Validator Professional是標準版的升級版，它提供了許多重要的額外功能。其中包括批量向導、配置編輯器、180天的免費主要升級等。企業版、專業版和標準版之間的差異如表格所示。
這款應用程序將為您節省時間，幫助您消除許多導致訪客放棄網站的常見問題。CSS HTML Validator Pro還保護您的隱私，因為它不會將您的HTML和CSS文檔發送到互聯網上。這意味著您無需互聯網連接即可使用。
以下是CSS HTML Validator Pro的一些亮點和特點：
讓CSS HTML Validator Pro成為您網站的守護者，確保您的數字存在始終保持完美無瑕。現在就行動起來，讓您的網站在競爭激烈的市場中獨樹一幟！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
