第一步:昆明網(wǎng)站建設(shè)小編認為要準備好案例所需的水果圖像,見圖30,在【部件】面板中拖放一個動態(tài)面板部件到設(shè)計區(qū)域,雙擊動態(tài)面板,在彈出的【動態(tài)面板狀態(tài)管理】對話框中新增三個面板狀態(tài),分別給這四個面板狀態(tài)命名為apple、banana、orange和grapes,給動態(tài)面板命名為fruits,見圖31,然后將準備好的4張水果圖像按照名稱分別導(dǎo)入4個對應(yīng)的面板狀態(tài),見圖32。
(圖30)
第二步:回到index頁面,在【部件】面板中拖放一個下拉列表框部件到設(shè)計區(qū)域,給其命名為fruits_selecotor,見圖33。
(圖31)
(圖32)
(圖33)
第三步:雙擊fruits_selector部件,在彈出的【編輯列表項】對話框中單擊【添加多個】,見圖34-A,然后在彈出的【添加多個】對話框中輸入如圖34-B所示內(nèi)容。在此,昆明網(wǎng)站制作小編需要提醒注意,第一行只輸入一個空格即可,單擊兩次【確定】按鈕回到設(shè)計區(qū)域。
第四步:將 fruits動態(tài)面板設(shè)置為隱藏。
第五步:選中fruits_selector部件,在部件【屬性】面板中雙擊【選項改變時】事件,在彈出的【用例編輯器】頂部單擊【添加條件】,在彈出的【條件編輯器】中創(chuàng)建條件表達式【被選項this(this就是指當前所選部件)==空白選項】,見圖35,單擊【確定】按鈕關(guān)閉【條件編輯器】。
(圖34)
(圖35)
繼續(xù),在【用例編輯器】中新增【隱藏】動作,在右側(cè)【配置動作】中勾選fruits動態(tài)面板,見圖36,單擊【確定】按鈕關(guān)閉【用例編輯器】。
第六步:再次雙擊【選項改變時】事件,在彈出的【用例編輯器】頂部單擊【添加條件】,在彈出的【條件編輯器】中創(chuàng)建條件表達式【被選項 this== 選項蘋果】,見圖37,單擊【確定】按鈕關(guān)閉【條件編輯器】。
(圖36)
(圖37)
繼續(xù)在【用例編輯器】中新增【設(shè)置面板狀態(tài)】動作,在【配置動作】中勾選fruits動態(tài)面板,并設(shè)置其選擇狀態(tài)為apple,勾選【如果隱藏則顯示面板】,見圖38。
(圖38)
第七步:在部件【屬性】面板中選擇Case2用例,復(fù)制后粘貼三次,然后對這三個用例中的條件和動作進行適當修改,修改后的用例見圖39。大多數(shù)情況下,我們都會復(fù)制重復(fù)度較高的用例,再進行適當修改,這樣可以節(jié)省大量工作時間。
(圖39)
第八步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
當前文章標題:案例22:使用下拉列表項控制動態(tài)面板狀態(tài)(翻水果)
當前URL:http://www.gtalker.cn/news/wzzz/3451.html
上一篇:會員注冊多條件判斷之最后一步