Axure 中繼器實現下拉菜單,中繼器實現表格


場景:

  這幾天在前端,要用Axure畫原型做前端交互方案給客戶看,於是學了一些axure的基礎操作(主要從師妹那學的,哈哈哈),這里記錄一下中繼器做表格和下拉框的實現。

實現:

  一、中繼器實現表格

  •   在元件庫中使用中繼器,中繼器就相當於表格,但是功能比表格強大
  •  在元件的樣式中添加數據的列(列名只能是英文),同時可以添加數據的行,注意這里只是數據的信息

  • 雙擊進入中繼器,,可以看到一個默認的矩陣,添加新的矩陣(也可以是其他元件),這里的矩陣就是中繼器樣式的一列。添加的同時給矩陣命名,比如:列2

  • 退出中繼器,可以看到中繼器的樣式以及多了幾列,而中繼器的行數是數據的行數。

  • 接下來,綁定中繼器數據和樣式。在中繼器的交互中,點擊交互事件每項加載時->設置文本,添加設置文本,選擇之前添加的樣式列(比如這里選擇列3),在文本的value選擇中,選擇右邊的fx,

  •  清除編輯文本中的值,選擇“插入變量或函數”

  • 選擇要綁定的數據列,就是中繼器樣式中的列:

  • 綁定結束,回到頁面就可以看到數據和樣式已經綁定。再加個列表頭,表格就完成了。

  二、中繼器實現下拉菜單

  •   先拉一個中繼器和內聯框架,內聯框架可以用來顯示頁面
  • 中繼器里面,用一個矩陣表示一級菜單,一個動態面板表示二級菜單,動態面板默認隱藏。動態面板有兩個狀態,一個是二級菜單,一個是空的,點擊一級菜單才出現。交互內容如下,需要用到條件。

  • 二級菜單動態面板的交互,其實就是點擊時在內聯框架中打開鏈接。

  • 回到頁面,最后綁定中繼器的樣式和數據,其中數據要右擊單元格選擇“引用頁面”。如下:

  •  最后,我把這個小demo發布出來了,演示地址:https://9w425p.axshare.com

  • 如果有人需要,就留言給我吧。


免責聲明!

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



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