挑戰(zhàn)5:使用內(nèi)聯(lián)框架加載本地視頻/音頻

  • 2022-03-23 15:00:23
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

現(xiàn)在你已經(jīng)對(duì)【內(nèi)聯(lián)框架】部件有了初步認(rèn)識(shí),在案例6中詳細(xì)介紹了如何使用內(nèi)聯(lián)框架加載網(wǎng)絡(luò)視頻,網(wǎng)站建設(shè)小編建議你嘗試一下能否獨(dú)立實(shí)現(xiàn)使用內(nèi)聯(lián)框架加載本地視頻和音樂文件。

7.中繼器

中繼器部件是Axure RP8中的一款高級(jí)部件,用來顯示重復(fù)的文本、圖像和鏈接。通常使用中繼器來顯示商品列表、聯(lián)系人信息列表、數(shù)據(jù)表或其他信息。中繼器部件由兩部分構(gòu)成,分別是【中繼器數(shù)據(jù)集】和【中繼器的項(xiàng)】。

中繼器數(shù)據(jù)集:中繼器部件是由中繼器數(shù)據(jù)集中的數(shù)據(jù)項(xiàng)填充,這些填充的數(shù)據(jù)項(xiàng)可以是文本、圖像或頁面鏈接。在【部件】面板中拖放一個(gè)中繼器部件到設(shè)計(jì)區(qū)域中,雙擊中繼器部件,進(jìn)入中繼器數(shù)據(jù)集,在頁面右側(cè)【中繼器檢查器】面板的第一項(xiàng)標(biāo)簽可以看到,見圖115。

502.jpg

(圖115)

中繼器的項(xiàng):被中繼器部件所重復(fù)的內(nèi)容叫做項(xiàng)(項(xiàng)目),雙擊中繼器部件進(jìn)入中繼器項(xiàng)進(jìn)行編輯,在下圖(圖116)顯示的數(shù)據(jù)區(qū)域中所展示的部件會(huì)被重復(fù)多次(數(shù)據(jù)集中有幾行就重復(fù)幾次)。

502.jpg

(圖116)

填充數(shù)據(jù)到設(shè)計(jì)區(qū)域:使用中繼器部件的【每項(xiàng)加載時(shí)】事件填充數(shù)據(jù)到設(shè)計(jì)區(qū)域。

插入文本(Inserting Text):雙擊【每項(xiàng)加載時(shí)】事件,在彈出的【用例編輯器】中選擇【設(shè)置文本】動(dòng)作,然后在【用例編輯器】右側(cè)選擇想要插入的文本部件,在右下角點(diǎn)擊設(shè)置文本值【fx】,在彈出的【編輯文本】對(duì)話框中單擊【插入變量或函數(shù)…】,然后在下拉列表中選擇[[Item.dog_name]],并單擊【確定】按鈕。當(dāng)你的中繼器項(xiàng)加載時(shí),就會(huì)將【數(shù)據(jù)集】中這一列(dog_name)的內(nèi)容插入到你剛剛設(shè)置的文本部件中,見圖117。

502.jpg

(圖117)

導(dǎo)入圖像:導(dǎo)入圖像到數(shù)據(jù)集中并使用【設(shè)置圖像】動(dòng)作將圖像插入中繼器的項(xiàng)。不過要提前在中繼器的項(xiàng)中添加一個(gè)圖像部件,用來顯示中繼器數(shù)據(jù)集里面所導(dǎo)入的圖像。首先在中繼器【數(shù)據(jù)集】中新增一列用來存儲(chǔ)圖像數(shù)據(jù),然后右鍵單擊要插入圖片的項(xiàng),在彈出的關(guān)聯(lián)菜單中單擊【導(dǎo)入圖片】并添加圖像,見圖118。接下來在【部件】面板中拖放一個(gè)圖像部件到設(shè)計(jì)區(qū)域,單擊右側(cè)【中繼器檢查器】面板中的【交互】標(biāo)簽,見圖119。雙擊【設(shè)置文本】這個(gè)用例,在彈出的【用例編輯器】中繼續(xù)添加【設(shè)置圖像】動(dòng)作,在右側(cè)的【配置動(dòng)作】中選擇要將圖像插入到哪個(gè)部件,然后在默認(rèn)下拉選項(xiàng)中選擇【值】,見圖120,然后單擊右側(cè)的【fx】,在彈出的【編輯值】對(duì)話框中單擊【插入變量或函數(shù)…】,選擇[[Item. dog_img]],見圖121。之后單擊【確定】按鈕。

502.jpg

(圖118)

502.jpg

(圖119)

502.jpg

(圖120)

502.jpg

(圖121)

在中繼器包含的部件中使用交互:中繼器中的數(shù)據(jù)可以添加交互,比如添加基于條件判斷的頁面鏈接。

插入?yún)⒄枕摚褐欣^器【數(shù)據(jù)集】的項(xiàng)中可以添加參照頁(頁面鏈接),當(dāng)用戶單擊時(shí)就跳轉(zhuǎn)到相關(guān)頁面。首先新增一列,列名為reference_page,右鍵單擊一個(gè)空白項(xiàng)并選擇【參照頁】見圖122,在彈出的【參照頁】對(duì)話框中選擇想要插入的頁面即可,見圖123。然后在中繼器中選擇一個(gè)想要觸發(fā)頁面跳轉(zhuǎn)動(dòng)作的部件,在右側(cè)的部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中新增【當(dāng)前窗口】打開鏈接動(dòng)作,然后在右側(cè)的【配置動(dòng)作】底部選擇【鏈接到url或文件】。單擊fx,見圖124,在彈出的【編輯值】對(duì)話框中單擊【插入變量或函數(shù)…】下拉列表,選擇在數(shù)據(jù)集中添加了參照頁的列名[[Item.reference_page]],見圖125。

使用條件:【數(shù)據(jù)集】中的項(xiàng)值可以使用帶有特定條件的動(dòng)作進(jìn)行評(píng)估,例如,可以設(shè)置數(shù)據(jù)集中名稱為dog_age的列,如果值大于2就設(shè)置為選中狀態(tài),這樣可以突出顯示特定的數(shù)據(jù)項(xiàng),見圖126。在稍后的案例中會(huì)對(duì)此進(jìn)行詳細(xì)講解。

502.jpg

(圖122)

502.jpg

(圖123)

502.jpg

(圖124)

502.jpg

(圖125)

502.jpg

(圖126)

中繼器樣式,見圖127。

502.jpg

(圖127)

布局:該設(shè)置可以改變數(shù)據(jù)的顯示方式。

垂直:設(shè)置中繼器數(shù)據(jù)集中的項(xiàng)垂直顯示。

水平:設(shè)置中繼器數(shù)據(jù)集中的項(xiàng)水平顯示。

排列顯示<按網(wǎng)格>:超過指定數(shù)量就換行/換列。

每行/每列項(xiàng)目數(shù):設(shè)置每行/每列中包含的數(shù)據(jù)項(xiàng)的數(shù)量。

背景顏色:給中繼器添加背景色。

交替背景色:給中繼器的項(xiàng)添加交替背景色,如一行紅色一行藍(lán)色,這樣可以增強(qiáng)用戶的閱讀體驗(yàn)。

分頁:設(shè)置在同一時(shí)間顯示指定數(shù)量的數(shù)據(jù)集的項(xiàng)(將數(shù)據(jù)集分別放置于多個(gè)不同頁面顯示,可通過上一頁、下一頁或輸入指定頁面進(jìn)行切換,可用于制作購(gòu)物網(wǎng)站中的商品分頁等效果)。

多頁顯示:將中繼器中的項(xiàng)放在多個(gè)頁面中切換顯示。

每頁項(xiàng)目數(shù):設(shè)置中繼器的項(xiàng)在每個(gè)單獨(dú)頁面中顯示的項(xiàng)目數(shù)量。

起始頁:設(shè)置默認(rèn)顯示頁面,如默認(rèn)顯示第一頁或其他某個(gè)指定頁面。

間距:設(shè)置行/列數(shù)據(jù)之間的間距。

中繼器屬性,見圖128。

502.jpg

(圖128)

隔離[單選按鈕組]效果:中繼器里面的項(xiàng)使用了【單選按鈕組】效果,并且在同一頁面中使用了多個(gè)中繼器,為了避免不同中繼器里面的【單選按鈕組】效果相互沖突,可以勾選此項(xiàng)。

隔離[選項(xiàng)組]效果:與隔離[單選按鈕組]效果類似,中繼器里面的項(xiàng)使用了【選項(xiàng)組】效果,并且在同一頁面中使用了多個(gè)中繼器,為了避免不同中繼器里面的“選項(xiàng)組”效果相互沖突,可以勾選此項(xiàng)。

適應(yīng)Html內(nèi)容:勾選該項(xiàng)可以輕松實(shí)現(xiàn)中繼器里面所包含部件的推動(dòng)/拉動(dòng)效果。


當(dāng)前文章標(biāo)題:挑戰(zhàn)5:使用內(nèi)聯(lián)框架加載本地視頻/音頻

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3388.html

上一篇:案例7:使用內(nèi)聯(lián)框架加載可交互的百度地圖

下一篇:案例8:給中繼器中的項(xiàng)設(shè)置交替背景色

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