產品經理Axure 7.0教程 模擬論壇實現發表評論功能
1 用戶點擊評論 頁面顯示評論輸入框
2 用戶在輸入框中輸入評論後 點擊提交 頁面顯示用戶所輸入的評論內容
方法/步驟
從部件庫中拖入一個矩形部件製作評論大外邊框 調整位置大小和樣式 再從部件庫中拖入一個圖片控件 雙擊瀏覽圖片 調整好位置和大小 製作發表內容者的頭像 最後從部件庫中拖入文字部件 製作用戶名、發表時間、發表內容和一個評論文字 調整好文字的樣式和位置
現在我們來製作一下評論框和發表按鈕 從部件庫中拖入一個矩形部件 將這個矩形部件的文字更改為 發表 調整位置和大小 再從部件庫中拖入一個矩形部件 調整到適當的位置和大小 然後拖入一個文本框部件 放在剛才拖入的矩形部件上面 與矩形部件層疊在一起 大小和位置與矩形部件保持一致 點擊選擇這個文本框 鼠標右鍵單擊 在彈出的下拉列表中選擇隱藏邊框 將這個輸入框名稱命名為txt_input 最後做一個三角形矩形指向評論文字
選擇剛才製作的發表按鈕、輸入框、矩形框和三角矩形 鼠標右鍵點擊 在彈出的下拉列表中選擇轉換為動態面板 將這個動態面板設置為隱藏狀態 然後雙擊這個動態面板 在彈出的動態面板狀態管理框中 點擊+ 給這個動態面板添加一個新的狀態 分別將這兩個狀態重命名為
評論前和評論後 同時將這個動態面板命名為評論 點擊確定按鈕
鼠標雙擊右下角部件管理中的評論動態面板中的評論後狀態 打開評論後的頁面 按照第一步中製作發表內容模塊的方法制作發表評論的頁面 需要注意的是 將顯示評論的標籤命名為display
現在我們來寫一下評論的交互動作 當我們點擊評論文字時展示評論動態面板 將動態面板設置成評論前狀態 當我們再次點擊評論文字 收縮隱藏評論面板 將鼠標點擊到評論文字上面 在右上角部件交互中 雙擊鼠標單擊時動作 在彈出的用例編輯其中 顯示評論動態面板 設置評論面板狀態為評論前 然後點擊確定按鈕
接下來我們需要寫一下發表評論的輸入和顯示 這裡會涉及到變量傳值問題 打開評論前狀態頁面 點擊發表按鈕 雙擊鼠標單擊時 打開用例編輯器 設置變量OnLoadVariable的值登陸輸入框txt_input的文字內容 設置評論動態面板的狀態為評論後狀態 顯示內容display等於變量值OnLoadVariable
