国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

挑戰(zhàn)6:密碼輸入框禁用/啟用的交互

  • 2022-03-25 14:43:25
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://www.gtalker.cn

挑戰(zhàn)6.1:密碼輸入框禁用/啟用的交互(一)

請(qǐng)參考如下描述開始挑戰(zhàn):將【確認(rèn)密碼】文本輸入框設(shè)置為【禁用】,當(dāng)【密碼】文本輸入框的內(nèi)容【不為空】時(shí),啟用【確認(rèn)密碼】文本輸入框。

挑戰(zhàn)6.2:密碼輸入框禁用/啟用的交互(二)

請(qǐng)參考如下描述開始挑戰(zhàn):將【立即注冊(cè)】按鈕設(shè)置為禁用,當(dāng)【確認(rèn)密碼】文本輸入框中的值,與【密碼】文本輸入框中的值完全相同時(shí),啟用【立即注冊(cè)按鈕】。

9.文本區(qū)域

文本區(qū)域部件大多情況下用于留言/評(píng)論效果。文本區(qū)域可以輸入多行文本,而且可以調(diào)整至任意高度,見圖151。

文本區(qū)域的屬性除了不能設(shè)置類型,其他和文本輸入框相同,可參考文本輸入框部件。

本區(qū)域部件的局限性在于,不能添加漸變背景色,但可以將其背景設(shè)置為透明,再添加一個(gè)填充顏色的矩形部件,置于文本段落底部即可。

QQ截圖20220325144046.jpg

(圖151)

10.下拉列表框

下拉列表經(jīng)常用于性別選擇、信用卡過期日期、地址列表等形式。所選擇的項(xiàng)存儲(chǔ)在變量中,然后通過變量進(jìn)行傳遞。

編輯下拉列表:添加、刪除、排序選項(xiàng):雙擊下拉列表,在彈出的【編輯列表項(xiàng)】對(duì)話框中可以對(duì)下拉列表中的項(xiàng)目進(jìn)行添加、刪除和排序,見圖152。

禁用下拉列表:默認(rèn)情況下,拖放【下拉列表框】部件到設(shè)計(jì)區(qū)域,該部件是啟用的。但某些情況下需要禁用下拉列表,可以右鍵單擊該部件并選擇勾選【禁用】,或者到部件【屬性】面板中勾選【禁用】。下拉列表的啟用/禁用,可以在【用例編輯器】的動(dòng)作中進(jìn)行設(shè)置,見圖153。

QQ截圖20220325144046.jpg

(圖152)

A:添加列表項(xiàng)

B:使用上下藍(lán)色箭頭調(diào)整列表項(xiàng)順序

C:刪除選中列表項(xiàng)

D:刪除所有列表項(xiàng)

E:批量列表項(xiàng)

F:已添加列表項(xiàng)

QQ截圖20220325144046.jpg

(圖153)

創(chuàng)建空白選項(xiàng):在生成的原型中,【下拉列表框】部件默認(rèn)顯示最上

面(第一個(gè)列表項(xiàng))。雖然不能創(chuàng)建空白選項(xiàng),但是可以添加一個(gè)列表項(xiàng)并給該列表項(xiàng)內(nèi)容添加一個(gè)空格,這樣可以替代空白選項(xiàng),見圖154。

11.列表框通常用來替代【下拉列表框】部件,如果你想讓用戶查看所有選項(xiàng)而不需要點(diǎn)擊選擇的話,就使用列表選擇框替代下拉列表。

編輯列表選擇框:項(xiàng)目的添加、刪除、排序和批量添加操作,和下拉列表框都是一樣的。唯一不同的是,列表選擇框可以設(shè)置為允許選擇多個(gè)列表項(xiàng),見圖155。

列表框的局限性:動(dòng)態(tài)添加、刪除項(xiàng)目列表框內(nèi)的選項(xiàng)不能動(dòng)態(tài)改變,但可以使用多個(gè)動(dòng)態(tài)面板狀態(tài)中包含不同的選項(xiàng)來實(shí)現(xiàn)。在一個(gè)交互事件中不能同時(shí)讀取或設(shè)置多個(gè)選項(xiàng),即便勾選了多選功能,列表框部件只允許讀取或設(shè)置一個(gè)選項(xiàng)。

QQ截圖20220325144046.jpg

(圖154)

QQ截圖20220325144046.jpg

(圖155)

12.復(fù)選框

復(fù)選框經(jīng)常用來允許用戶添加一個(gè)或多個(gè)附加選項(xiàng)。

編輯復(fù)選框:要將復(fù)選框默認(rèn)設(shè)置為勾選,可以在設(shè)計(jì)區(qū)域單擊復(fù)選框或者右鍵選擇【選中】。復(fù)選框可以通過【用例編輯器】中的【選中】進(jìn)行動(dòng)態(tài)設(shè)置。

對(duì)齊按鈕:默認(rèn)情況下,復(fù)選框在左側(cè),文字在右側(cè)。你可以通過部件【屬性】面板調(diào)整左右位置,見圖156-A。

禁用復(fù)選框:默認(rèn)情況下復(fù)選框是啟用的,但有些情況需要禁用復(fù)選框。禁用復(fù)選框可右鍵點(diǎn)擊,選擇【禁用】,或者在部件【屬性】面板中選擇【禁用】,見圖156-B。

QQ截圖20220325144046.jpg

(圖156)

復(fù)選框的局限性:復(fù)選框只可以給文字更改樣式。如果想給復(fù)選框更改樣式,可以使用動(dòng)態(tài)面板制作自定義復(fù)選框。與單選按鈕不同,復(fù)選框不能像單選按鈕那樣【指定單選按鈕組】。

13.單選按鈕

單選按鈕經(jīng)常用于表單中,從一個(gè)小組的選擇切換到另一組。該選擇可以觸發(fā)該頁面上的交互或被存儲(chǔ)的變量值跨頁面交互,見圖157。

QQ截圖20220325144046.jpg

(圖157)

指定單選按鈕組:是指將多個(gè)單選按鈕添加到一個(gè)組中,一次只能將一個(gè)單選按鈕設(shè)置為選中狀態(tài)。操作方法如下。

選擇你想要加入到組中的單選按鈕,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【指定單選按鈕組】,或者在部件【屬性】面板中設(shè)置單選按鈕組名稱,見圖158-A。

QQ截圖20220325144046.jpg

(圖158-A)

如果你想添加其他的單選按鈕到組中,右鍵單擊該單選按鈕,選擇【指定單選按鈕組】,在彈出的對(duì)話框中選擇對(duì)應(yīng)的單選按鈕組名稱。要將單選按鈕從組中移除,右鍵單擊單選按鈕,選擇【指定單選按鈕組】,將組名稱清空,單擊【確定】按鈕即可。

對(duì)齊方式:默認(rèn)情況下,單選按鈕在左側(cè),文字在右側(cè)。你可以通過部件【屬性】面板,調(diào)整左右位置,見圖158-B。

禁用單選按鈕:默認(rèn)情況下單選按鈕是啟用的,但有些情況下需要禁用單選按鈕。右鍵點(diǎn)擊單選按鈕,選擇【禁用】,或者在部件【屬性】面板中選擇【禁用】。

設(shè)置默認(rèn)選中或動(dòng)態(tài)選中:?jiǎn)芜x按鈕可以在設(shè)計(jì)區(qū)域點(diǎn)擊設(shè)置為默認(rèn)選中,或者右鍵單擊勾選【選中】,見圖159,這樣生成原型單選按鈕默認(rèn)是選中的。單選按鈕也可以通過【用例編輯器】中的【選中】動(dòng)作動(dòng)態(tài)設(shè)置其選中狀態(tài)。

QQ截圖20220325144046.jpg

(圖159)

單選按鈕的局限性:?jiǎn)芜x按鈕是固定的高度,你可以改變文字,但無法改變按鈕形狀;單選按鈕的圖標(biāo)無法修改,但你可以使用動(dòng)態(tài)面板部件制作自定義單選按鈕。網(wǎng)站建設(shè)小編認(rèn)為在工作中,尤其是制作高保真原型時(shí),我們會(huì)制作大量適用于自己工作項(xiàng)目的自定義部件,可將其添加到自定義部件庫,便于后期循環(huán)使用。

14.提交按鈕

該按鈕是為操作系統(tǒng)的瀏覽器體驗(yàn)而設(shè)計(jì)的,提交(SUBMIT)按鈕的格式取決于你使用哪一款瀏覽器來預(yù)覽效果,它通常針對(duì)你使用的瀏覽器內(nèi)置了【鼠標(biāo)懸停時(shí)】和【鼠標(biāo)按下時(shí)】的交互樣式。

編輯提交按鈕:提交按鈕的填充顏色、邊框顏色和其他大多數(shù)樣式格式都被禁用了,取而代之的是,生成原型后在瀏覽器中它會(huì)使用內(nèi)建的樣式。不過,提交按鈕可以改變大小和禁用。如果你想自定義按鈕樣式,請(qǐng)使用形狀按鈕。

提交按鈕的局限性:提交按鈕無法設(shè)置交互樣式,如【選中】、【鼠標(biāo)懸?!?、【左鍵按下】。提交按鈕也無法動(dòng)態(tài)讀取或?qū)懭氚粹o上的內(nèi)容。

15.樹部件

樹部件可以用來模擬文件瀏覽器,點(diǎn)擊不同的樹節(jié)點(diǎn)可以隱藏和顯示一個(gè)動(dòng)態(tài)面板的不同狀態(tài)。當(dāng)一個(gè)頁面內(nèi)有太多交互的時(shí)候,也可以單擊樹節(jié)點(diǎn)跳轉(zhuǎn)到新頁面,見圖160。

添加/刪除樹節(jié)點(diǎn):右鍵單擊一個(gè)節(jié)點(diǎn),在彈出菜單中可以添加/刪除/移動(dòng)節(jié)點(diǎn)。子節(jié)點(diǎn)將會(huì)添加到該節(jié)點(diǎn)的下一層,在該節(jié)點(diǎn)前/后添加,是同級(jí)節(jié)點(diǎn),見圖161。

QQ截圖20220325144046.jpg

(圖160)

QQ截圖20220325144046.jpg

(圖161)

添加樹節(jié)點(diǎn)圖標(biāo):可以給樹節(jié)點(diǎn)添加自定義圖標(biāo),右鍵點(diǎn)擊一個(gè)節(jié)點(diǎn)并選擇【編輯圖標(biāo)】。導(dǎo)入一個(gè)圖標(biāo),并選擇應(yīng)用到【當(dāng)前節(jié)點(diǎn)/同級(jí)節(jié)點(diǎn)】或【當(dāng)前節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和所有子節(jié)點(diǎn)】,見圖162。關(guān)閉對(duì)話框,然后右鍵單擊樹,選擇【編輯樹屬性】,在彈出窗口中勾選“顯示圖標(biāo)”,見圖163-A。

QQ截圖20220325144046.jpg

(圖162)

自定義展開/收縮圖標(biāo):右鍵點(diǎn)擊,選擇【編輯樹屬性】,在彈出對(duì)話框或部件【屬性】面板中,可自定義展開/收縮圖標(biāo),見圖163-B。

QQ截圖20220325144046.jpg

(圖163)

樹節(jié)點(diǎn)的交互樣式:樹節(jié)點(diǎn)可以添加【鼠標(biāo)懸?!俊ⅰ咀箧I按下】、【選中】的交互樣式。右鍵點(diǎn)擊樹節(jié)點(diǎn)并選擇【交互樣式】,或者在部件【屬性】面板中設(shè)置,見圖164。

QQ截圖20220325144046.jpg

(圖164)

樹部件的局限性:樹部件的邊框不能自定義樣式。如果想制作自定義的樹部件,使用動(dòng)態(tài)面板組合可以制作出你想要的效果。

16.表格

表格部件可以通過交互(如點(diǎn)擊鼠標(biāo))在單元格中動(dòng)態(tài)顯示數(shù)據(jù)。

添加/刪除行和列:要添加行/列,點(diǎn)擊右鍵單元格,在彈出菜單中選擇插入/刪除行或列,見圖165。

QQ截圖20220325144046.jpg

(圖165)

交互樣式:表格中的單元格可以設(shè)置【鼠標(biāo)懸停時(shí)】、【鼠標(biāo)按下時(shí)】、【選中時(shí)】的交互樣式,右鍵單擊單元格(可以同時(shí)按下Ctrl/Command進(jìn)行多選),然后在部件【屬性】面板中設(shè)置交互樣式。

表格的局限性:?jiǎn)螕魡卧駮r(shí)無法輸入文字,單元格默認(rèn)要雙擊才可以輸入文字。要實(shí)現(xiàn)單擊輸入文字狀態(tài),可以使用【文本輸入框】部件覆蓋在單元格上面。不能同時(shí)添加多行或多列,表格只允許每次添加一行或一列。不能通過事件動(dòng)態(tài)添加行或列。如果希望使用動(dòng)態(tài)添加行/列功能,請(qǐng)使用中繼器部件。不能對(duì)表格中的數(shù)據(jù)進(jìn)行排序和過濾,不能像Excel那樣合并單元格。

17.經(jīng)典菜單(水平菜單/垂直菜單)

菜單部件通常用于母版之中,其目的是在原型中跳轉(zhuǎn)到不同頁面。

編輯菜單:要編輯菜單,點(diǎn)擊右鍵,在彈出關(guān)聯(lián)菜單中選擇【前方添加菜單項(xiàng)】、【后方添加菜單項(xiàng)】、【刪除菜單項(xiàng)】、【添加子菜單】,見圖166。

QQ截圖20220325144046.jpg

(圖166)

菜單樣式:使用工具欄或部件樣式面板可以編輯菜單樣式,如填充顏色、字體顏色和字體大小等。

菜單的交互樣式:菜單可以添加交互樣式,【鼠標(biāo)懸停時(shí)】、【左鍵按下】、【選中】,選擇要添加樣式的菜單(可以按住Ctrl/Command多選),右鍵選擇交互樣式,或者在部件【屬性】面板中設(shè)置,如【選中的菜單項(xiàng)】、【選中的菜單】、【選中的菜單和所有子菜單】,見圖167。

QQ截圖20220325144046.jpg

(圖167)

菜單部件的局限性:無法嵌入圖標(biāo),但是可以通過創(chuàng)建自定義菜單來實(shí)現(xiàn)。無法點(diǎn)擊展開子菜單,菜單部件默認(rèn)是鼠標(biāo)懸停展開子菜單的。

18.快照

快照部件是Axure RP8中新增的一款部件,使用該部件可以捕獲其他頁面或母版的快照(圖像),可以通過配置來設(shè)置顯示某個(gè)頁面的完整快照或部分快照,見圖168。還可以給快照部件設(shè)置動(dòng)作,來捕獲執(zhí)行該動(dòng)作之后的快照狀態(tài)。

QQ截圖20220325144046.jpg

(圖168)

快照部件可用于制作交互流程圖或者在流程圖中作為縮略圖使用,見圖169。

QQ截圖20220325144918.jpg

(圖169)

在Axure RP8內(nèi)建的【默認(rèn)部件庫】和【流程部件庫】中,都可以找到快照部件,見圖170。

QQ截圖20220325144046.jpg

(圖170)

參照頁或母版:要在快照部件中顯示頁面或母版,首先在【部件】面板中拖放快照部件到設(shè)計(jì)區(qū)域,雙擊或右鍵點(diǎn)擊該部件,在彈出的關(guān)聯(lián)菜單中勾選【參照頁或母版…】,見圖171,也可以在右側(cè)的部件【屬性】面板中單擊【添加參照頁】,見圖172-A。在彈出的【參照頁】對(duì)話框中可以選擇頁面或母版。如果在部件【屬性】面板中勾選了【自適應(yīng)縮放】,雙擊快照部件仍然會(huì)彈出【參照頁】對(duì)話框,見圖172-B。

QQ截圖20220325144046.jpg

(圖171)

QQ截圖20220325144046.jpg

(圖172)

自適應(yīng)縮放:快照部件默認(rèn)是啟用【自適應(yīng)縮放】模式的,在這種模式下,改變快照部件尺寸,快照中的內(nèi)容(圖像)會(huì)自適應(yīng)快照部件的尺寸。在部件【屬性】面板中取消勾選【自適應(yīng)縮放】后,雙擊該部件可以通過拖動(dòng)快照部件中的圖像來改變圖像位置,見圖173。

QQ截圖20220325144046.jpg

(圖173)

偏移量:除了雙擊拖動(dòng)圖像調(diào)整位置以外,還可以通過【偏移量】來調(diào)整快照中圖像的位置,見圖174-A。

QQ截圖20220325144046.jpg

(圖174)

縮放:你也可以在不改變快照部件大小的前提下對(duì)里面的圖像進(jìn)行縮放,見圖174-B。除此之外,還可以使用快捷鍵進(jìn)行縮放, Ctrl+鼠標(biāo)滾輪;Command+鼠標(biāo)滾輪。

設(shè)置動(dòng)作:在部件【屬性】面板中,可以給快照部件【設(shè)置動(dòng)作】,見圖174-C。設(shè)置動(dòng)作會(huì)觸發(fā)快照中部件的事件,但不會(huì)影響到參照頁,見圖175。

QQ截圖20220325144046.jpg

(圖175)

當(dāng)你想要展示某個(gè)頁面或一系列頁面中觸發(fā)某個(gè)指定交互后的狀態(tài)時(shí),【觸發(fā)事件】就變得非常有用了。如圖175所示,左側(cè)的快照部件中顯示的未觸發(fā)事件的圖像;右側(cè)快照部件中顯示的是【在未輸入密碼時(shí)點(diǎn)擊登錄按鈕,提示錯(cuò)誤登錄信息】的圖像。你也可以提交參照頁中并沒有設(shè)置的動(dòng)作,例如使用【設(shè)置自適應(yīng)視圖】動(dòng)作指定快照中的自適應(yīng)視圖,見圖176。

QQ截圖20220325144046.jpg

(圖176)

交互:快照部件和其他部件相同,也可以設(shè)置交互(鼠標(biāo)單擊時(shí)、鼠標(biāo)移入/移出時(shí)等),但是在默認(rèn)情況下,單擊快照部件會(huì)跳轉(zhuǎn)到參照頁。你可以在【生成HTML文件】時(shí)取消勾選這一選項(xiàng),見圖177。取消該選項(xiàng)后,就會(huì)執(zhí)行你在快照部件上添加的其他交互了。

19.水平箭頭/垂直箭頭

這兩個(gè)部件和之前介紹的水平線與垂直線是完全相同的,只是添加了箭頭樣式。

20.便簽/標(biāo)記

默認(rèn)部件庫底部的便簽和標(biāo)記部件和之前介紹的形狀部件完全相同,只是填充了不同顏色和陰影。

QQ截圖20220325144046.jpg

(圖177)


當(dāng)前文章標(biāo)題:挑戰(zhàn)6:密碼輸入框禁用/啟用的交互

當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3391.html

上一篇:案例9:同意協(xié)議方可繼續(xù)注冊(cè)會(huì)員

下一篇:部件操作——添加、移動(dòng)和改變部件尺寸

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