中繼器系列三：下拉選擇框

中繼器的表格“增刪改查”請查看中繼器系列一：《中繼器系列一：信息新增、刪除、簡單篩選》和中繼器系列二:《中繼器系列二：信息修改》。今天給大家?guī)硐吕x擇框的套用中繼器實現(xiàn)不同狀態(tài)的搜索樣式。

一、前期準(zhǔn)備

• 電腦：mac和win都可以（案例以win系統(tǒng)為例，mac類似）
• 軟件：Axure 8.0
• 熟練程度：中級（元件使用，函數(shù)調(diào)用）
• 相關(guān)使用元件：矩形、中繼器、動態(tài)面板、文本框。

二、整體效果展示

image

三、正文（制作過程）

案例一：

直接選擇類型（適合下拉菜單內(nèi)容固定，且個數(shù)有限）【基礎(chǔ)內(nèi)容】

思路：中繼器充當(dāng)容器，鼠標(biāo)點中中繼器的某一個數(shù)據(jù)，賦值到下拉菜單欄的背景框。（系統(tǒng)也自帶了同種類型的組件，但是中繼器實現(xiàn)可以展示一些系統(tǒng)自帶沒有的效果）。

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致），方向箭頭。
• 配置中繼器內(nèi)容，進行中繼器的賦值（下拉菜單內(nèi)容）
• 配置中繼器的鼠標(biāo)單擊事件
• 調(diào)整隱藏/顯示關(guān)系

②教程

• 1、創(chuàng)建矩形200*40（尺寸后期可以根據(jù)需要調(diào)整，調(diào)整和中繼器編輯頁面的矩形寬度保持一致）。

• 2、創(chuàng)建中繼器，雙擊中繼器進入中繼器編輯頁面，在中繼器編輯頁面調(diào)整矩形尺寸為200*40。

• 3、進行中繼器賦值操作。

  
  
  image

• 4、進行鼠標(biāo)點擊事件。

  
  
  image

• 5、細節(jié)調(diào)整：
  

  1、給中繼器編輯頁面中的矩形設(shè)置選中狀態(tài)變化。添加鼠標(biāo)移入移除的的選中切換。
  image

2、配置圖標(biāo)的旋轉(zhuǎn)方向和中繼器的顯示和隱藏。
中繼器在初始的狀態(tài)下是隱藏的，點擊下拉菜單的矩形，中繼器顯示。當(dāng)用點擊中繼器內(nèi)容時，完成第4步賦值操作后，隱藏中繼器。
圖標(biāo)開始狀態(tài)，方向朝上，點擊下拉菜單的矩形，設(shè)置旋轉(zhuǎn)圖標(biāo)。完成賦值后再次反方向旋轉(zhuǎn)圖標(biāo)。

案例二：

滑動選擇類型

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致），方向箭頭。
• 配置中繼器內(nèi)容，進行中繼器的賦值（下拉菜單內(nèi)容）
• 配置中繼器的顯示區(qū)域--動態(tài)面板實現(xiàn)
• 配置中繼器的鼠標(biāo)單擊事件
• 調(diào)整隱藏/顯示關(guān)系

②教程

image

案例后記：在顯示隱藏的時候可以進行動態(tài)面板的顯示隱藏替代中繼器的顯示隱藏（中繼器相當(dāng)于動態(tài)面板的子元素）

案例三：

翻頁選擇類型

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致），方向箭頭。
• 配置中繼器內(nèi)容，進行中繼器的賦值（下拉菜單內(nèi)容）
• 配置中繼器的顯示區(qū)域--動態(tài)面板實現(xiàn)
• 添加中繼器多頁顯示的每頁顯示行數(shù)，和初始的顯示頁數(shù)。
• 配置中繼器的鼠標(biāo)單擊事件
• 調(diào)整隱藏/顯示關(guān)系、

②教程

保持案例二的操作步驟不變（要保持動態(tài)面板顯示后，展示內(nèi)容可以全部展示），設(shè)置中繼器內(nèi)容多頁顯示，添加上下翻頁按鈕。

image

配置上下翻頁事件：設(shè)置當(dāng)前顯示頁面，（以上一頁舉例）

image

案例后記：也可以不使用動態(tài)面板。使用好處：可以將上下翻頁按鈕和中繼器同時進行顯示隱藏操作（只用設(shè)置動態(tài)面板的隱藏和顯示）。如果不使用，要對三個組件進行顯示隱藏的操作關(guān)聯(lián)。

案例四：

添加模糊檢索的下拉選擇類型

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致），方向箭頭。

• 配置中繼器內(nèi)容，進行中繼器的賦值（下拉菜單內(nèi)容）

• 配置中繼器的顯示區(qū)域--動態(tài)面板實現(xiàn)

• 配置中繼器的鼠標(biāo)單擊事件

• 添加文本框輸入，在文本框進行文字發(fā)生變化的時候匹配中繼器中文字，從而達到賽選匹配的效果。

• 采用[[Item.Column0.indexOf(word)>-1]]的匹配原則
  【個人理解：indexOf(word)是Axure中正則匹配的函數(shù)，在axure中，如果返回參數(shù)為-1，表示不存在。】

  其他解釋：indexOf(‘searchValue’,start) 用途：從左至右獲取查詢字符串在當(dāng)前文本對象中首次出現(xiàn)的位置。未查詢到時返回值為-1。 參數(shù)：searchValue為查詢的字符串；

• 調(diào)整隱藏/顯示關(guān)系

②教程

在案例二的基礎(chǔ)上添加文本框，進行文本框輸入的判斷匹配。（匹配過程：添加中繼器篩選，條件為indexOf函數(shù)匹配唯一的中繼器字段）。

image

image

案例后記：indexOf函數(shù)可以配合中繼器實現(xiàn)多種篩選，并且在表格等多種情況下適用。（“臣服”與中繼器+函數(shù)的強大，哈哈）

文章后記：之前一直文章中沒有做文字的篩選模糊匹配，于是最近在看下拉菜單的多種樣式，就嘗試進行制作。函數(shù)+中繼器可以實現(xiàn)--“真香系列”。

源文件下載地址：下載地址