Axure中系統(tǒng)自帶的下拉列表框，列表項(xiàng)無法在前臺(tái)界面被刪除或添加，本教程就學(xué)習(xí)如何用中繼器自制一個(gè)滿足個(gè)性需求的下拉列表。

部件使用：

中繼器

矩形

文本框（單行）

圖片

交互事件：

鼠標(biāo)單擊時(shí)

頁面鼠標(biāo)單擊時(shí)

文字改變時(shí)

失去焦點(diǎn)時(shí)

動(dòng)作：

顯示/隱藏

設(shè)置文本

設(shè)置變量值

新增行

刪除行

交互說明

實(shí)現(xiàn)說明

?

一、原型頁面元素制作

步驟1：制作原型元素，包括：輸入框（文本框）、下拉按鈕（矩形）、下拉選項(xiàng)（中繼器）、選項(xiàng)（矩形）、刪除按鈕（圖片）

?

二、顯示/隱藏“下拉選項(xiàng)”

步驟2：選中“下拉按鈕”，部件交互和注釋窗口，雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器編輯用例1：

動(dòng)作1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作? 選擇隱藏/顯示的部件：勾選“下拉選項(xiàng)”；可見性：切換

動(dòng)作2：

第二步：點(diǎn)擊新增動(dòng)作 選擇“設(shè)置文本”動(dòng)作

第四步：配置動(dòng)作? 選擇部件設(shè)置文本：勾選“輸入框”；將文本設(shè)置為：值“”

點(diǎn)擊“確定”，關(guān)閉窗口。

步驟3：頁面屬性下“頁面交互”標(biāo)簽，雙擊“頁面鼠標(biāo)單擊時(shí)”事件，編輯用例1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作? 選擇隱藏/顯示的部件：勾選“下拉選項(xiàng)”；可見性：隱藏

?

三、新增選項(xiàng)

步驟4：選中“輸入框”部件，部件交互和注釋窗口，雙擊“文字改變時(shí)”事件，打開用例編輯器，編輯用例1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“設(shè)置變量值”動(dòng)作

第四步：配置動(dòng)作? 選擇要設(shè)置的變量：OnLoadVariable；設(shè)置變量值為：部件文字“當(dāng)前部件”

點(diǎn)擊“確定”，關(guān)閉窗口。

步驟5：繼續(xù)選中“輸入框”，雙擊“失去焦點(diǎn)時(shí)”事件，打開用例編輯器，

編輯用例1：

第一步：用例名稱 點(diǎn)擊“編輯條件”，打開條件生成器，設(shè)置條件表達(dá)式為：部件文字“當(dāng)前部件”不等于值“”

動(dòng)作1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“新增行”動(dòng)作

第四步：配置動(dòng)作? 選擇要新增行的中繼器：勾選“下拉選項(xiàng)”；點(diǎn)擊“新增行”，打開“新增行到中繼器”窗口，點(diǎn)擊Column0下的“fx”按鈕，選擇變量“OnLoadVariable”

動(dòng)作2：

第二步：點(diǎn)擊新增動(dòng)作 選擇“設(shè)置文本”動(dòng)作

第四步：配置動(dòng)作? 選擇部件設(shè)置文本：勾選“當(dāng)前部件”；將文本設(shè)置為：值“”

點(diǎn)擊“確定”，關(guān)閉窗口。

四、刪除選項(xiàng)

步驟6：雙擊“下拉選項(xiàng)（中繼器）”，打開下拉選項(xiàng)編輯頁面，選中“刪除”按鈕，部件交互和注釋窗口，雙擊“鼠標(biāo)單擊時(shí)”，打開用例編輯器，

編輯用例1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“刪除行”動(dòng)作

第四步：配置動(dòng)作? 選擇要?jiǎng)h除行的中繼器：勾選“下拉選項(xiàng)”；選擇“當(dāng)前

部件”

點(diǎn)擊“確定”，關(guān)閉窗口。

?

五、選中選項(xiàng)

步驟7：選中“選項(xiàng)”部件，雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器，編輯用例1：

動(dòng)作1：

第二步：點(diǎn)擊新增動(dòng)作 選擇“設(shè)置文本”動(dòng)作

第四步：配置動(dòng)作? 選擇部件設(shè)置文本：勾選“輸入框”；將文本設(shè)置為：部件文字“當(dāng)前部件”

動(dòng)作2：

第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作? 選擇隱藏/顯示的部件：勾選“下拉選項(xiàng)”；可見性：隱藏

點(diǎn)擊“確定”，關(guān)閉窗口。

步驟8：生成原型，查看效果

- End -