案例5:使用【Value】來設(shè)置動(dòng)態(tài)面板狀態(tài)

  • 2022-03-22 14:29:25
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://americanwasteexpansions.com

第一步:在設(shè)計(jì)區(qū)域中添加三個(gè)一級(jí)標(biāo)題部件,分別將其文本內(nèi)容設(shè)置為cat、dog、fox,然后添加一個(gè)【動(dòng)態(tài)面板】部件到設(shè)計(jì)區(qū)域,給動(dòng)態(tài)面板命名為pets,將準(zhǔn)備好的三張動(dòng)物圖像填充到三個(gè)動(dòng)態(tài)面板狀態(tài)中,并且將動(dòng)態(tài)面板狀態(tài)與其中的圖像對應(yīng),分別命名為cat、dog、fox(注意:這一步一定不可忽略,否則這個(gè)效果將無法正常執(zhí)行),見圖92。

QQ截圖20220322142713.jpg

(圖92)

第二步:選中標(biāo)題cat,在右側(cè)的部件【屬性】面板中,雙擊【鼠標(biāo)點(diǎn)擊時(shí)】事件,在彈出的【用例編輯器】對話框中設(shè)置用例名稱為【設(shè)置value為cat】,添加【設(shè)置面板狀態(tài)】動(dòng)作,然后在右側(cè)的【配置動(dòng)作】中勾選pets動(dòng)態(tài)面板,在選擇狀態(tài)下拉列表中選擇【Value】,見圖93。點(diǎn)擊【fx】(見圖93-5),在彈出的【編輯值】對話框中單擊【添加局部變量】,在中間的下拉列表中選擇【部件文字】,在右側(cè)的下拉列表中選擇【This】(也就是當(dāng)前所選中的標(biāo)題部件),見圖94。繼續(xù)單擊【插入變量或函數(shù)…】,在下拉列表中選擇我們剛剛添加的局部變量【LVAR1】,見圖95。插入變量后如圖96,單擊【確定】按鈕關(guān)閉【編輯值】對話框,再次單擊【確定】按鈕關(guān)閉【用例編輯器】。

第三步:按照上一步的過程給標(biāo)題dog和fox添加【鼠標(biāo)單擊時(shí)】事件。

第四步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。

QQ截圖20220322142713.jpg

(圖93)

QQ截圖20220322142713.jpg

(圖94)

QQ截圖20220322142713.jpg

(圖95)

QQ截圖20220322142713.jpg

(圖96)

內(nèi)聯(lián)框架

使用內(nèi)聯(lián)框架,可以嵌入視頻、地圖和HTML文件到原型設(shè)計(jì)中。外部的HTML文件、視頻、地圖等內(nèi)容都可以嵌入到內(nèi)聯(lián)框架中。對于視頻和地圖,選擇鏈接到外部url;鏈接到本地已經(jīng)存在的HTML文件,內(nèi)聯(lián)框架要鏈接到本地文件路徑,見圖97。

QQ截圖20220322142713.jpg

(圖97)

編輯內(nèi)聯(lián)框架指定目標(biāo)網(wǎng)址或視頻地址:拖放內(nèi)聯(lián)框架部件到網(wǎng)站設(shè)計(jì)區(qū)域中,雙擊內(nèi)聯(lián)框架,在彈出的對話框中指定哪些內(nèi)容要在內(nèi)聯(lián)框架中顯示??蛇x擇內(nèi)部頁面或者任何站外url,見圖97。

隱藏邊框:右鍵點(diǎn)擊內(nèi)聯(lián)框架,在彈出菜單中勾選【切換邊框可見性】可切換顯示內(nèi)聯(lián)框架周圍的黑色邊框,見圖98。

顯示滾動(dòng)條:要隱藏或按需顯示內(nèi)聯(lián)框架的滾動(dòng)條,可以右鍵點(diǎn)擊內(nèi)聯(lián)框架,選擇【滾動(dòng)條】,或者在部件【屬性】面板中設(shè)置滾動(dòng)條。滾動(dòng)條可以按需要顯示(當(dāng)內(nèi)聯(lián)框架中嵌入的內(nèi)容大小超過內(nèi)聯(lián)框架大小時(shí)才顯示),也可以總是顯示,見圖99。

QQ截圖20220322142713.jpg

(圖98)

QQ截圖20220322142713.jpg

(圖99)

內(nèi)聯(lián)框架預(yù)覽圖像:你可以給內(nèi)聯(lián)框架添加Axure 內(nèi)置的預(yù)覽圖像,如視頻、地圖,也可以自定義預(yù)覽圖像。注意,預(yù)覽圖像僅在設(shè)計(jì)區(qū)域中顯示,讓我們清楚該部件顯示的是什么內(nèi)容,但不會(huì)在生成的原型中顯示,見圖100。

QQ截圖20220322142713.jpg

(圖100)

內(nèi)聯(lián)框架的局限性

樣式:內(nèi)聯(lián)框架的樣式被限定為切換顯示邊框和滾動(dòng)條,如果想添加其他樣式,請?jiān)趦?nèi)聯(lián)框架下面添加一個(gè)矩形部件,然后調(diào)整矩形部件的樣式即可。

導(dǎo)航和傳遞變量:內(nèi)聯(lián)框架不能用來制作導(dǎo)航,也不能通過父頁面?zhèn)鬟f變量和設(shè)置動(dòng)態(tài)面板狀態(tài)。你可以使用含有內(nèi)容的動(dòng)態(tài)面板來替代內(nèi)聯(lián)框架,實(shí)現(xiàn)內(nèi)容滾動(dòng)效果。


當(dāng)前文章標(biāo)題:案例5:使用【Value】來設(shè)置動(dòng)態(tài)面板狀態(tài)

當(dāng)前URL:http://americanwasteexpansions.com/news/wzzz/3385.html

上一篇:挑戰(zhàn)4:淘寶首頁的輪播廣告

下一篇:案例6:使用內(nèi)聯(lián)框架部件加載網(wǎng)絡(luò)視頻

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))