第一步:在【部件】面板中拖放一個(gè)中繼器部件到設(shè)計(jì)區(qū)域,雙擊該動(dòng)態(tài)面板,在右側(cè)的【中繼器檢查器】面板下的【數(shù)據(jù)集】中填充數(shù)據(jù),見圖129。
(圖129)
第二步:拖放兩個(gè)矩形部件到設(shè)計(jì)區(qū)域,分別給兩個(gè)矩形部件命名為水果名稱、水果價(jià)格,見圖130。
(圖130)
細(xì)心的讀者會注意到,在兩個(gè)矩形相交的地方,邊框看上去比較粗,因?yàn)槟J(rèn)情況下部件是以外邊界對齊的。單擊菜單欄中的【項(xiàng)目>項(xiàng)目設(shè)置】,在彈出的【項(xiàng)目設(shè)置】對話框中選擇【按形狀邊框的內(nèi)邊界對齊】,見圖131,點(diǎn)擊【確定】按鈕,問題解決。
(圖131)
第三步:在【中繼器檢查器】面板中單擊【交互】標(biāo)簽,雙擊【每項(xiàng)加載時(shí)】事件下的【Case1】,在彈出的【用例編輯器】對話框中設(shè)置【水果名稱】的文本值為[[Item.name]] ;【水果價(jià)格】文本值為[[Item.price]],見圖132。
(圖132)
點(diǎn)擊網(wǎng)站設(shè)計(jì)區(qū)域上方的【index】標(biāo)簽,可以看到中繼器中已經(jīng)顯示剛剛填充的數(shù)據(jù),見圖133,接下來設(shè)置【交替背景色】。
(圖133)
第四步:再次雙擊中繼器,進(jìn)入編輯狀態(tài),或者通過單擊設(shè)計(jì)區(qū)域上方的【(中繼器)(index)】標(biāo)簽回到編輯狀態(tài),見圖134,在右側(cè)的【中繼器檢查器】面板中點(diǎn)擊【樣式】標(biāo)簽,勾選【交替背景色】并設(shè)置背景顏色為#FF99FF,見圖135。
(圖134)
單擊設(shè)計(jì)區(qū)域上方的【index】標(biāo)簽,回到首頁,我們發(fā)現(xiàn)中繼器中顯示的數(shù)據(jù)并沒有發(fā)生任何變化,這是因?yàn)椤舅Q】和【水果價(jià)格】這兩個(gè)矩形部件填充了白色背景和灰色邊框,只需將這兩個(gè)矩形的填充顏色設(shè)置為【透明】即可,見圖136。再次回到【index】首頁,此時(shí)大家就清楚交替背景色的作用了,見圖137,在我們制作原型的過程中,如果遇到使用中繼器填充大量數(shù)據(jù)時(shí),可以考慮使用此功能來提高數(shù)據(jù)的可讀性,進(jìn)而提升用戶體驗(yàn)。
(圖135)
(圖136)(圖137)
8.文本輸入框
文本框類型:文本輸入框可以設(shè)置特殊的輸入格式,主要用來調(diào)用移動(dòng)設(shè)備上不同的鍵盤輸入類型。
可選格式:text、密碼、Email、Number、Phonenumber、Url、查找、文件、日期、Month、Time。要設(shè)置文本輸入框類型,在部件【屬性】面板中進(jìn)行設(shè)置,見圖138。雖然這些不同的文本框類型主要是用于移動(dòng)設(shè)備原型制作,但在特定情況下,在桌面電腦上恰當(dāng)使用也可以大大提升工作效率。如圖139,是在Chrome瀏覽器中的效果,當(dāng)我們在原型設(shè)計(jì)中需要使用到模擬日歷時(shí),使用【文本輸入框】部件,并將其類型設(shè)置為【日期】就可以實(shí)現(xiàn)真實(shí)的日歷選取功能,見圖140。但是該效果在Firefox、Safari瀏覽器中無效,見圖141。
(圖138)
(圖139)
(圖140)
(圖141)
提示文字:在部件【屬性】面板中還可以給文本輸入框添加提示文字,也就是文本占位符,見圖142,還可以編輯提示文字的樣式以及提示文字何時(shí)隱藏(【輸入內(nèi)容時(shí)】或【鼠標(biāo)單擊時(shí)】),見圖143。
(圖142)
(圖143)
禁用文本輸入框:要防止有文字輸入到文本輸入框,可以在部件【屬性】面板中勾選【禁用】。文本輸入框還可以在【用例編輯器】中使用禁用動(dòng)作,將其設(shè)置為【禁用】。部件被設(shè)為禁用后就變成了灰色(不可輸入狀態(tài)),見圖144。
(圖144)
設(shè)置文本框?yàn)橹蛔x:當(dāng)文本輸入框設(shè)置為【只讀】后,我們無法通過鍵盤操作直接輸入和修改其中的內(nèi)容,但可以通過事件操作修改文本輸入框中的值。要將文本輸入框設(shè)置為【只讀】,在部件【屬性】面板中勾選【只讀】即可。
隱藏邊框:可以通過切換顯示文本輸入框的邊框來創(chuàng)建自定義文本框樣式。要隱藏文本輸入框周圍的邊框,右鍵單擊該部件并勾選【隱藏邊框】,或者到部件屬性面板中勾選,還可以給文本輸入框設(shè)置填充顏色。
當(dāng)前文章標(biāo)題:案例8:給中繼器中的項(xiàng)設(shè)置交替背景色
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3389.html