翻譯|使用教程|編輯:況魚杰|2020-02-24 11:30:19.433|閱讀 1140 次
概述:在本教程中,您將學習如何創建將鼠標懸停在頁面上的元素上時出現的工具提示。您將通過兩種探索方法來做到這一點:Axure RP的內置工具提示功能(用于創建瀏覽器樣式的工具提示)以及Mouse Hover事件(可用于顯示使用小部件創建的自定義工具提示)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具, 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。
在本教程中,您將學習如何創建將鼠標懸停在頁面上的元素上時出現的工具提示。您將通過兩種探索方法來做到這一點:Axure RP的內置工具提示功能(用于創建瀏覽器樣式的工具提示)以及Mouse Hover事件(可用于顯示使用小部件創建的自定義工具提示)。(點擊此處可查看本教程視頻操作)
內置工具提示功能
小部件設置
打開一個新的RP文件,然后在Pages(頁面)窗格中雙擊Page1(頁面1)以在畫布上將其打開。
將一個占位符小部件從Libraries(庫)窗格拖到畫布上。
選擇占位符,然后切換到Interactions(交互)窗格。
在窗格的右上角,單擊More Interactions(更多交互)圖標。
在出現的菜單頂部,在工具提示字段中進入This is a tooltip!。
預覽頁面
預覽頁面并將光標懸停在占位符上以顯示工具提示。
將鼠標移離占位符,工具提示將再次消失。
提示:以這種方式創建的工具提示的樣式完全由Web瀏覽器控制。 如果您需要使工具提示看起來不同,請按照下一部分中的步驟創建自定義工具提示。
鼠標懸停時顯示的自定義工具提示
打開一個新的RP文件,然后在Pages(頁面)窗格中雙擊Page1(頁面1)以在畫布上將其打開。
從Libraries(庫窗格中將占位符小部件和標簽小部件拖到畫布上。
在占位符的鼠標懸停事件中顯示工具提示
用占位符的鼠標顯示工具提示選擇占位符,然后在Interactions(交互)窗格中單擊New Interaction(新建交互)。
在出現的列表中選擇Mouse Hover(鼠標懸停)事件,然后選擇Show/Hide(顯示/隱藏)操作。
在Target(目標)下拉列表中選擇標簽小部件,然后在其下方保留顯示。
單擊確定以保存操作。
使用占位符的鼠標退出事件隱藏工具提示
在仍選擇占位符的情況下,再次單擊New Interaction(新建交互)。
選擇Mouse Exit(鼠標退出)事件,然后選擇Show/Hide(顯示/隱藏)動作。
再次定位標簽小部件,然后選擇其下方的Hide(隱藏)。
單擊確定以保存操作。
預覽頁面,然后將光標懸停在占位符上。大約一秒鐘后,將出現自定義工具提示。
將鼠標移離占位符,工具提示將再次消失。
要顯示或隱藏帶有動畫的自定義工具提示,請在顯示/隱藏操作的動畫下拉列表中選擇一個。
關注慧聚IT微信公眾號???,了解產品的最新動態及最新資訊。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: