1. 程式人生 > >【axure教程】下拉框選擇動態顯示結果

【axure教程】下拉框選擇動態顯示結果

說實話,這個案例我是在UCD大社群看到的,不過都是英文,愣是硬著頭皮學習的,幸好英文底子+google。

1、案例效果圖

這個例子的效果是,使用者切換左邊的下拉框選項,右邊的提示文字會隨之變化。當選中的是圖書時,文字框中的文字是“請輸入圖書名稱或作者”;當選中音樂時,文字框中的文字是“請輸入音樂名稱或歌手”:

2、步驟

1)首先在頁面上新增以下的元件,並給下拉框新增兩個選項“圖書”和“音樂”:

2)將下拉框拉到編輯區,雙擊出現編輯下拉框,點選“+”輸入圖書和音樂,點選確定;然後新增文字框,在文字框中輸入“請輸入圖書名稱或作者”;新增按鈕,輸入“搜尋”

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

3)給各個部件取名,給下拉框取名為“droplist”,給文字框取名“textbook”,在部件屬性中輸入標籤名即可

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件
Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

4)給下拉框新增用例,選中下拉框–點選右側“Onchange選項改變時”–右擊出現框選中“新增用例”–點選“新增條件”–滿足“全部”,“選中項於”droplist等於值圖書–確定

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件
Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

5)點選“設定變數/部件值”–點選“設定變數和部件的值等於”–點選“開啟設定編輯器”–“文字在部件”textbox等於值–選中函式按鈕–輸入“請輸入圖書名稱或作者”–點選確定

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

6)檢視添加了一個用例後的用例情況

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

7)同樣的方法新增用例–點選“設定變數和部件的值等於”–點選“開啟設定編輯器”–“文字在部件”textbox等於值–選中函式按鈕–輸入“請輸入音樂名稱或歌手”–點選確定

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件

8)兩個用例新增情況如下圖

Axure <wbr><wbr>RP <wbr><wbr>學習2:下拉框的條件