下拉列表選擇

下拉列表交互

添加 OnSelectionChange Case

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial1.png" alt="image" />

首先，打開AxureDroplistSelection.rp 和打開“下拉列表選擇”頁面。 選擇下拉列表并添加 OnSelectionChange Case。在 Case 編輯器中，單擊添加條件打開條件生成器。

構(gòu)建“沒有條件”

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial2.png" alt="image" />

條件生成器的默認(rèn)值恰好是我們所需要的。條件應(yīng)該讀為<如果所選選項的動態(tài)面板的值為"沒有" >。
單擊OK，并關(guān)閉條件生成器。

添加動作來設(shè)置面板的狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial3.png" alt="image" />

在 Case 編輯器中，單擊“設(shè)置面板狀態(tài)”并勾選動態(tài)面板復(fù)選框。 “沒有”狀態(tài)將被默認(rèn)選中。
單擊OK，并關(guān)閉 Case 編輯器。

重復(fù)步驟為小狗和小貓設(shè)置狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial4.png" alt="image" />

重復(fù)步驟1到3為小狗和小貓設(shè)置下拉列表 items。 第二個和第三個 Case 應(yīng)該為“小狗”和“貓”設(shè)置條件，并相應(yīng)地設(shè)置面板的狀態(tài)。

添加最后的“如果其他” Case

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial5.png" alt="image" />

雙擊 OnChange 添加第四個4 Case，但這一次不添加任何條件。我們已經(jīng)為4個有用的下拉列表項目設(shè)置了3個條件，所以如果以上3個條件都沒有滿足最后一個 Case 的條件將會自動生成。添加一個動作到第四個 Case ，來為金魚設(shè)置動態(tài)面板的狀態(tài)。

預(yù)覽的原型

http://wiki.jikexueyuan.com/project/axure/images/advanced-droplist-selection-tutorial6.png" alt="image" />

就是它了！預(yù)覽原型和測試它吧。

總結(jié)

現(xiàn)在你可以執(zhí)行操作了，當(dāng)一個圖片在下拉列表中被選中的時候。 還需要其他幫助嗎？查看論壇或聯(lián)系我們 support@axure.com