第一步:在設計區(qū)域中添加三個一級標題部件,分別將其文本內容設置為cat、dog、fox,然后添加一個【動態(tài)面板】部件到設計區(qū)域,給動態(tài)面板命名為pets,將準備好的三張動物圖像填充到三個動態(tài)面板狀態(tài)中,并且將動態(tài)面板狀態(tài)與其中的圖像對應,分別命名為cat、dog、fox(注意:這一步一定不可忽略,否則這個效果將無法正常執(zhí)行),見圖92。
(圖92)
第二步:選中標題cat,在右側的部件【屬性】面板中,雙擊【鼠標點擊時】事件,在彈出的【用例編輯器】對話框中設置用例名稱為【設置value為cat】,添加【設置面板狀態(tài)】動作,然后在右側的【配置動作】中勾選pets動態(tài)面板,在選擇狀態(tài)下拉列表中選擇【Value】,見圖93。點擊【fx】(見圖93-5),在彈出的【編輯值】對話框中單擊【添加局部變量】,在中間的下拉列表中選擇【部件文字】,在右側的下拉列表中選擇【This】(也就是當前所選中的標題部件),見圖94。繼續(xù)單擊【插入變量或函數…】,在下拉列表中選擇我們剛剛添加的局部變量【LVAR1】,見圖95。插入變量后如圖96,單擊【確定】按鈕關閉【編輯值】對話框,再次單擊【確定】按鈕關閉【用例編輯器】。
第三步:按照上一步的過程給標題dog和fox添加【鼠標單擊時】事件。
第四步:在頂部的工具欄中單擊【預覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預覽交互效果。
(圖93)
(圖94)
(圖95)
(圖96)
內聯(lián)框架
使用內聯(lián)框架,可以嵌入視頻、地圖和HTML文件到原型設計中。外部的HTML文件、視頻、地圖等內容都可以嵌入到內聯(lián)框架中。對于視頻和地圖,選擇鏈接到外部url;鏈接到本地已經存在的HTML文件,內聯(lián)框架要鏈接到本地文件路徑,見圖97。
(圖97)
編輯內聯(lián)框架指定目標網址或視頻地址:拖放內聯(lián)框架部件到網站設計區(qū)域中,雙擊內聯(lián)框架,在彈出的對話框中指定哪些內容要在內聯(lián)框架中顯示。可選擇內部頁面或者任何站外url,見圖97。
隱藏邊框:右鍵點擊內聯(lián)框架,在彈出菜單中勾選【切換邊框可見性】可切換顯示內聯(lián)框架周圍的黑色邊框,見圖98。
顯示滾動條:要隱藏或按需顯示內聯(lián)框架的滾動條,可以右鍵點擊內聯(lián)框架,選擇【滾動條】,或者在部件【屬性】面板中設置滾動條。滾動條可以按需要顯示(當內聯(lián)框架中嵌入的內容大小超過內聯(lián)框架大小時才顯示),也可以總是顯示,見圖99。
(圖98)
(圖99)
內聯(lián)框架預覽圖像:你可以給內聯(lián)框架添加Axure 內置的預覽圖像,如視頻、地圖,也可以自定義預覽圖像。注意,預覽圖像僅在設計區(qū)域中顯示,讓我們清楚該部件顯示的是什么內容,但不會在生成的原型中顯示,見圖100。
(圖100)
內聯(lián)框架的局限性
樣式:內聯(lián)框架的樣式被限定為切換顯示邊框和滾動條,如果想添加其他樣式,請在內聯(lián)框架下面添加一個矩形部件,然后調整矩形部件的樣式即可。
導航和傳遞變量:內聯(lián)框架不能用來制作導航,也不能通過父頁面?zhèn)鬟f變量和設置動態(tài)面板狀態(tài)。你可以使用含有內容的動態(tài)面板來替代內聯(lián)框架,實現(xiàn)內容滾動效果。
當前文章標題:案例5:使用【Value】來設置動態(tài)面板狀態(tài)
當前URL:http://mnamateurbaseball.com/news/wzzz/3385.html