<output id="jbxdv"></output>

      1. 挑戰5:使用內聯框架加載本地視頻/音頻

        • 2022-03-23 15:00:23
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        現在你已經對【內聯框架】部件有了初步認識,在案例6中詳細介紹了如何使用內聯框架加載網絡視頻,網站建設小編建議你嘗試一下能否獨立實現使用內聯框架加載本地視頻和音樂文件。

        7.中繼器

        中繼器部件是Axure RP8中的一款高級部件,用來顯示重復的文本、圖像和鏈接。通常使用中繼器來顯示商品列表、聯系人信息列表、數據表或其他信息。中繼器部件由兩部分構成,分別是【中繼器數據集】和【中繼器的項】。

        中繼器數據集:中繼器部件是由中繼器數據集中的數據項填充,這些填充的數據項可以是文本、圖像或頁面鏈接。在【部件】面板中拖放一個中繼器部件到設計區域中,雙擊中繼器部件,進入中繼器數據集,在頁面右側【中繼器檢查器】面板的第一項標簽可以看到,見圖115。

        502.jpg

        (圖115)

        中繼器的項:被中繼器部件所重復的內容叫做項(項目),雙擊中繼器部件進入中繼器項進行編輯,在下圖(圖116)顯示的數據區域中所展示的部件會被重復多次(數據集中有幾行就重復幾次)。

        502.jpg

        (圖116)

        填充數據到設計區域:使用中繼器部件的【每項加載時】事件填充數據到設計區域。

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

        502.jpg

        (圖117)

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

        502.jpg

        (圖118)

        502.jpg

        (圖119)

        502.jpg

        (圖120)

        502.jpg

        (圖121)

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

        插入參照頁:中繼器【數據集】的項中可以添加參照頁(頁面鏈接),當用戶單擊時就跳轉到相關頁面。首先新增一列,列名為reference_page,右鍵單擊一個空白項并選擇【參照頁】見圖122,在彈出的【參照頁】對話框中選擇想要插入的頁面即可,見圖123。然后在中繼器中選擇一個想要觸發頁面跳轉動作的部件,在右側的部件【屬性】面板中雙擊【鼠標單擊時】事件,在彈出的【用例編輯器】中新增【當前窗口】打開鏈接動作,然后在右側的【配置動作】底部選擇【鏈接到url或文件】。單擊fx,見圖124,在彈出的【編輯值】對話框中單擊【插入變量或函數…】下拉列表,選擇在數據集中添加了參照頁的列名[[Item.reference_page]],見圖125。

        使用條件:【數據集】中的項值可以使用帶有特定條件的動作進行評估,例如,可以設置數據集中名稱為dog_age的列,如果值大于2就設置為選中狀態,這樣可以突出顯示特定的數據項,見圖126。在稍后的案例中會對此進行詳細講解。

        502.jpg

        (圖122)

        502.jpg

        (圖123)

        502.jpg

        (圖124)

        502.jpg

        (圖125)

        502.jpg

        (圖126)

        中繼器樣式,見圖127。

        502.jpg

        (圖127)

        布局:該設置可以改變數據的顯示方式。

        垂直:設置中繼器數據集中的項垂直顯示。

        水平:設置中繼器數據集中的項水平顯示。

        排列顯示<按網格>:超過指定數量就換行/換列。

        每行/每列項目數:設置每行/每列中包含的數據項的數量。

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

        交替背景色:給中繼器的項添加交替背景色,如一行紅色一行藍色,這樣可以增強用戶的閱讀體驗。

        分頁:設置在同一時間顯示指定數量的數據集的項(將數據集分別放置于多個不同頁面顯示,可通過上一頁、下一頁或輸入指定頁面進行切換,可用于制作購物網站中的商品分頁等效果)。

        多頁顯示:將中繼器中的項放在多個頁面中切換顯示。

        每頁項目數:設置中繼器的項在每個單獨頁面中顯示的項目數量。

        起始頁:設置默認顯示頁面,如默認顯示第一頁或其他某個指定頁面。

        間距:設置行/列數據之間的間距。

        中繼器屬性,見圖128。

        502.jpg

        (圖128)

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

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

        適應Html內容:勾選該項可以輕松實現中繼器里面所包含部件的推動/拉動效果。


        當前文章標題:挑戰5:使用內聯框架加載本地視頻/音頻

        當前URL:http://www.freenetsites.com/news/wzzz/3388.html

        上一篇:案例7:使用內聯框架加載可交互的百度地圖

        下一篇:案例8:給中繼器中的項設置交替背景色

        網站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>