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

      1. 案例8:給中繼器中的項設置交替背景色

        • 2022-03-24 16:29:11
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        第一步:在【部件】面板中拖放一個中繼器部件到設計區域,雙擊該動態面板,在右側的【中繼器檢查器】面板下的【數據集】中填充數據,見圖129。

        11.jpg

        (圖129)

        第二步:拖放兩個矩形部件到設計區域,分別給兩個矩形部件命名為水果名稱、水果價格,見圖130。

        11.jpg

        (圖130)

        細心的讀者會注意到,在兩個矩形相交的地方,邊框看上去比較粗,因為默認情況下部件是以外邊界對齊的。單擊菜單欄中的【項目>項目設置】,在彈出的【項目設置】對話框中選擇【按形狀邊框的內邊界對齊】,見圖131,點擊【確定】按鈕,問題解決。

        11.jpg

        (圖131)

        第三步:在【中繼器檢查器】面板中單擊【交互】標簽,雙擊【每項加載時】事件下的【Case1】,在彈出的【用例編輯器】對話框中設置【水果名稱】的文本值為[[Item.name]] ;【水果價格】文本值為[[Item.price]],見圖132。

        11.jpg

        (圖132)

        點擊網站設計區域上方的【index】標簽,可以看到中繼器中已經顯示剛剛填充的數據,見圖133,接下來設置【交替背景色】。

        11.jpg

        (圖133)

        第四步:再次雙擊中繼器,進入編輯狀態,或者通過單擊設計區域上方的【(中繼器)(index)】標簽回到編輯狀態,見圖134,在右側的【中繼器檢查器】面板中點擊【樣式】標簽,勾選【交替背景色】并設置背景顏色為#FF99FF,見圖135。

        11.jpg

        (圖134)

        單擊設計區域上方的【index】標簽,回到首頁,我們發現中繼器中顯示的數據并沒有發生任何變化,這是因為【水果名稱】和【水果價格】這兩個矩形部件填充了白色背景和灰色邊框,只需將這兩個矩形的填充顏色設置為【透明】即可,見圖136。再次回到【index】首頁,此時大家就清楚交替背景色的作用了,見圖137,在我們制作原型的過程中,如果遇到使用中繼器填充大量數據時,可以考慮使用此功能來提高數據的可讀性,進而提升用戶體驗。

        11.jpg

        (圖135)

        11.jpg

        (圖136)(圖137)

        11.jpg

        8.文本輸入框

        文本框類型:文本輸入框可以設置特殊的輸入格式,主要用來調用移動設備上不同的鍵盤輸入類型。

        可選格式:text、密碼、Email、Number、Phonenumber、Url、查找、文件、日期、Month、Time。要設置文本輸入框類型,在部件【屬性】面板中進行設置,見圖138。雖然這些不同的文本框類型主要是用于移動設備原型制作,但在特定情況下,在桌面電腦上恰當使用也可以大大提升工作效率。如圖139,是在Chrome瀏覽器中的效果,當我們在原型設計中需要使用到模擬日歷時,使用【文本輸入框】部件,并將其類型設置為【日期】就可以實現真實的日歷選取功能,見圖140。但是該效果在Firefox、Safari瀏覽器中無效,見圖141。

        11.jpg

        (圖138)

        11.jpg

        (圖139)

        11.jpg

        (圖140)

        11.jpg

        (圖141)

        提示文字:在部件【屬性】面板中還可以給文本輸入框添加提示文字,也就是文本占位符,見圖142,還可以編輯提示文字的樣式以及提示文字何時隱藏(【輸入內容時】或【鼠標單擊時】),見圖143。

        11.jpg

        (圖142)

        11.jpg

        (圖143)

        禁用文本輸入框:要防止有文字輸入到文本輸入框,可以在部件【屬性】面板中勾選【禁用】。文本輸入框還可以在【用例編輯器】中使用禁用動作,將其設置為【禁用】。部件被設為禁用后就變成了灰色(不可輸入狀態),見圖144。

        11.jpg

        (圖144)

        設置文本框為只讀:當文本輸入框設置為【只讀】后,我們無法通過鍵盤操作直接輸入和修改其中的內容,但可以通過事件操作修改文本輸入框中的值。要將文本輸入框設置為【只讀】,在部件【屬性】面板中勾選【只讀】即可。

        藏邊框:可以通過切換顯示文本輸入框的邊框來創建自定義文本框樣式。要隱藏文本輸入框周圍的邊框,右鍵單擊該部件并勾選【隱藏邊框】,或者到部件屬性面板中勾選,還可以給文本輸入框設置填充顏色。


        當前文章標題:案例8:給中繼器中的項設置交替背景色

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

        上一篇:挑戰5:使用內聯框架加載本地視頻/音頻

        下一篇:案例9:同意協議方可繼續注冊會員

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