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

中繼器的表格“增刪改查”請查看中繼器系列一：《中繼器系列一：信息新增痴颊、刪除、簡單篩選》和中繼器系列二:《中繼器系列二：信息修改》洪己。今天給大家?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)容，進(jìn)行中繼器的賦值（下拉菜單內(nèi)容）
• 配置中繼器的鼠標(biāo)單擊事件
• 調(diào)整隱藏/顯示關(guān)系

②教程

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

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

• 3栓拜、進(jìn)行中繼器賦值操作。

  
  
  image

• 4惠昔、進(jìn)行鼠標(biāo)點擊事件幕与。

  
  
  image

• 5、細(xì)節(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)容，進(jìn)行中繼器的賦值（下拉菜單內(nèi)容）
• 配置中繼器的顯示區(qū)域--動態(tài)面板實現(xiàn)
• 配置中繼器的鼠標(biāo)單擊事件
• 調(diào)整隱藏/顯示關(guān)系

②教程

image

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

案例三：

翻頁選擇類型

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致）疲眷，方向箭頭禾蚕。
• 配置中繼器內(nèi)容，進(jìn)行中繼器的賦值（下拉菜單內(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)面板。使用好處：可以將上下翻頁按鈕和中繼器同時進(jìn)行顯示隱藏操作（只用設(shè)置動態(tài)面板的隱藏和顯示）谆趾。如果不使用躁愿，要對三個組件進(jìn)行顯示隱藏的操作關(guān)聯(lián)。

案例四：

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

①步驟分解

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

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

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

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

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

• 采用[[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ǔ)上添加文本框，進(jìn)行文本框輸入的判斷匹配搬男。（匹配過程：添加中繼器篩選拣展，條件為indexOf函數(shù)匹配唯一的中繼器字段）。

image

image

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

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

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