原型設(shè)計(jì)工具Axure RP入門教程（四）：動(dòng)態(tài)設(shè)置Droplist選項(xiàng)教程

---

Axure RP是一套專門為網(wǎng)站或應(yīng)用程序所設(shè)計(jì)的快速原型設(shè)計(jì)工具， 可以讓應(yīng)用網(wǎng)站策劃人員或網(wǎng)站功能界面設(shè)計(jì)師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買Axure RP

---

在本教程中，您將學(xué)習(xí)如何根據(jù)第一個(gè)下拉列表中的選擇顯示第二個(gè)下拉列表中的不同選項(xiàng)。

注意：無法在單個(gè)Droplist窗口小部件中動(dòng)態(tài)更改選項(xiàng)，因此此技術(shù)涉及創(chuàng)建第二個(gè)Droplist的多個(gè)版本，并使用多狀態(tài)動(dòng)態(tài)面板在它們之間進(jìn)行切換。

小部件設(shè)置

創(chuàng)建三個(gè)Droplist小部件

• 打開一個(gè)新的RP文件，然后在畫布上打開Page 1。
• 將三個(gè)下拉列表小部件拖到畫布上。命名一個(gè)下拉列表 Food Select，一個(gè)Hamburger，然后命名一個(gè)Hotdog。

主要Droplist的選項(xiàng)

• 雙擊Food Select 下拉列表以編輯其選項(xiàng)。
• 在出現(xiàn)的對(duì)話框中，單擊兩次Add以創(chuàng)建兩個(gè)新選項(xiàng)。做第一個(gè)Hamburger和第二個(gè)Hotdog。
• 單擊OK關(guān)閉對(duì)話框。

次要下拉列表的選項(xiàng)

• 給Hamburger下拉列表兩個(gè)選項(xiàng)：Cheese 和 No Cheese。
• 給Hotdog下拉列表兩個(gè)選項(xiàng)：Ketchup 和 Mustard， 和 Horseradish 和 Sauerkraut.。

將輔助下拉列表放置在兩個(gè)狀態(tài)的動(dòng)態(tài)面板中

• 右鍵單擊Hamburger下拉列表，然后在上下文菜單中選擇Create Dynamic Panel（創(chuàng)建動(dòng)態(tài)面板）。
• 在Outline（大綱）窗格中，將新動(dòng)態(tài)面板的第一個(gè)狀態(tài)命名為Hamburger。
• 仍在Outline（大綱）窗格中，將光標(biāo)懸停在動(dòng)態(tài)面板小部件上，然后單擊右側(cè)的Add State（添加狀態(tài)）圖標(biāo)。 將此新狀態(tài)命名為Hotdog。
• 仍在Outline（大綱）窗格中，選擇Hotdog下拉列表并將其拖動(dòng)到右側(cè)以使其在Hotdog動(dòng)態(tài)面板狀態(tài)下縮進(jìn)。這會(huì)將其添加到該狀態(tài)并在畫布上打開該狀態(tài)。
• 將Hotdog下拉列表移到畫布上的（0,0）。
• 單擊畫布右上方的關(guān)閉，或按ESC退出狀態(tài)編輯模式。

當(dāng)主下拉列表的選擇更改時(shí)，更改動(dòng)態(tài)面板的狀態(tài)

• 選擇Food Select下拉列表小部件，然后在交互窗格中單擊New Interaction（新建交互）。
• 在出現(xiàn)的列表中選擇Selected Changed事件，然后選擇Set Panel State操作。
• 在目標(biāo)下拉菜單中選擇動(dòng)態(tài)面板。
• 在狀態(tài)下拉列表中，選擇值。 然后單擊出現(xiàn)的字段旁邊的fx圖標(biāo)以打開Edit Value （編輯值）對(duì)話框。
• 刪除對(duì)話框上方字段中的文本，然后單擊Insert Variable or Function（插入變量或函數(shù)）。
• 在出現(xiàn)的下拉列表中，在小部件標(biāo)題下選擇文本。 對(duì)話框的上方字段現(xiàn)在應(yīng)顯示為[[This.text]]，它代表下拉列表當(dāng)前顯示的選擇。

注意：可以將動(dòng)態(tài)面板的狀態(tài)設(shè)置為Food Select下拉列表的選定選項(xiàng)，因?yàn)槊姘宓臓顟B(tài)與下拉列表的選項(xiàng)名稱相同。

• 單擊OK關(guān)閉編輯值對(duì)話框，然后再次單擊OK以保存設(shè)置面板狀態(tài)操作。

預(yù)覽互動(dòng)

• 預(yù)覽頁(yè)面。 默認(rèn)情況下，在第一個(gè)下拉列表中選擇Hamburger，第二個(gè)下拉列表顯示相關(guān)的澆頭。
• 單擊第一個(gè)下拉列表，然后選擇Hotdog，第二個(gè)下拉列表中的選項(xiàng)應(yīng)更改。

附加信息和提示

添加更多選項(xiàng)

使用此技術(shù)，您可以根據(jù)需要向主下拉列表添加盡可能多的選項(xiàng)。只需在動(dòng)態(tài)面板中添加更多狀態(tài)，然后為每個(gè)狀態(tài)添加一個(gè)包含所需選項(xiàng)的下拉列表即可。確保將新的動(dòng)態(tài)面板狀態(tài)命名為與主下拉列表中的新選項(xiàng)相同。

---

關(guān)注慧聚IT微信公眾號(hào)???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。