[Axure RP] – 鼠標滑入按鈕時自動下拉表單的設計示例


轉:http://blog.qdac.cc/?p=2197

Axure RP 是個好東東呀,大大方便了程序員與客戶之間的前期調研時的交流。不過有一些控制並沒有鼠標移入和移出的操作,比如 HTML 按鈕,為了模擬鼠標移入或移出時動態顯示下拉列表啥的效果,我們使用了動態面板來做處理。當然了,條條大路通羅馬,這條大路也許不是最佳的,僅供參考。

1、拖一個動態面板到編輯區;

2、雙擊添加一個狀態,我們命名為“正常”,以代表鼠標沒有滑過時的狀態;

3、雙擊“正常”狀態,進入正常狀態編輯頁面;

4、在動態面板的正常狀態編輯頁面放置一個 HTML 按鈕,左上都留下一點空間,然后記錄下尺寸,我的是110×30;

5、回到原頁面,將動態面板的大小調整為和按鈕差不多,周圍略有空隙;

6、再次雙擊動態面板,復制“正常”這個狀態為新的狀態,命名為“划過”;

7、雙擊”鼠標滑入“狀態”,進入“划過”狀態編輯頁面;

8、修改 HTML 按鈕的標題為 “鼠標划過”;

9、添加一個表格位於按鈕的正下方,模擬彈出的表單;

10、記錄下“鼠標滑入”狀態的面板尺寸,比如我的是 300×120;

11、回到原始的動態面板編輯頁面,然后選擇動態面板,在右側的“部件交互與注釋”部分,選擇更多,找到鼠標移入和鼠標移出,分別設置用例:

  • 鼠標移入
    • 設置面板狀態為“划過”;
    • 設置面板大小為300×120;
  • 鼠標移出
    • 設置面板狀態為“正常”;
    • 設置面板大小為110×30;

RP_MouseMove

12、好了,現在看下運行效果。

Rp_DropDown【注意】如果下面按鈕下面有其它控件,表格可能會被遮住,那么只需要在鼠標滑入事件中設置一項讓動態面板置頂操作就好了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM