第四步：再次雙擊中繼器，進(jìn)入編輯狀態(tài)，或者通過(guò)單擊設(shè)計(jì)區(qū)域上方的【（中繼器）（index）】標(biāo)簽回到編輯狀態(tài)，見(jiàn)圖134，在右側(cè)的【中繼器檢查器】面板中點(diǎn)擊【樣式】標(biāo)簽，勾選【交替背景色】并設(shè)置背景顏色為#FF99FF，見(jiàn)圖135。

（圖134）

單擊設(shè)計(jì)區(qū)域上方的【index】標(biāo)簽，回到首頁(yè)，我們發(fā)現(xiàn)中繼器中顯示的數(shù)據(jù)并沒(méi)有發(fā)生任何變化，這是因?yàn)椤舅Q】和【水果價(jià)格】這兩個(gè)矩形部件填充了白色背景和灰色邊框，只需將這兩個(gè)矩形的填充顏色設(shè)置為【透明】即可，見(jiàn)圖136。再次回到【index】首頁(yè)，此時(shí)大家就清楚交替背景色的作用了，見(jiàn)圖137，在我們制作原型的過(guò)程中，昆明網(wǎng)站制作小編認(rèn)為如果遇到使用中繼器填充大量數(shù)據(jù)時(shí)，可以考慮使用此功能來(lái)提高數(shù)據(jù)的可讀性，進(jìn)而提升用戶體驗(yàn)。

（圖135）

（圖136）（圖137）

8．文本輸入框

文本框類型：文本輸入框可以設(shè)置特殊的輸入格式，主要用來(lái)調(diào)用移動(dòng)設(shè)備上不同的鍵盤輸入類型。

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

（圖138）

（圖139）

（圖140）

（圖141）

提示文字：在部件【屬性】面板中還可以給文本輸入框添加提示文字，也就是文本占位符，見(jiàn)圖142，還可以編輯提示文字的樣式以及提示文字何時(shí)隱藏（【輸入內(nèi)容時(shí)】或【鼠標(biāo)單擊時(shí)】），見(jiàn)圖143。

（圖142）

（圖143）

禁用文本輸入框：要防止有文字輸入到文本輸入框，可以在部件【屬性】面板中勾選【禁用】。文本輸入框還可以在【用例編輯器】中使用禁用動(dòng)作，將其設(shè)置為【禁用】。部件被設(shè)為禁用后就變成了灰色（不可輸入狀態(tài)），見(jiàn)圖144。

（圖144）

設(shè)置文本框?yàn)橹蛔x：當(dāng)文本輸入框設(shè)置為【只讀】后，我們無(wú)法通過(guò)鍵盤操作直接輸入和修改其中的內(nèi)容，但可以通過(guò)事件操作修改文本輸入框中的值。要將文本輸入框設(shè)置為【只讀】，在部件【屬性】面板中勾選【只讀】即可。

隱藏邊框：可以通過(guò)切換顯示文本輸入框的邊框來(lái)創(chuàng)建自定義文本框樣式。要隱藏文本輸入框周圍的邊框，右鍵單擊該部件并勾選【隱藏邊框】，或者到部件屬性面板中勾選，還可以給文本輸入框設(shè)置填充顏色。