中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、前期準備

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

二、整體效果展示

三、正文（制作過程）

案例一

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

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

①步驟分解

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

②教程

• 創(chuàng)建矩形200*40（尺寸后期可以根據(jù)需要調整，調整和中繼器編輯頁面的矩形寬度保持一致）。
• 創(chuàng)建中繼器，雙擊中繼器進入中繼器編輯頁面，在中繼器編輯頁面調整矩形尺寸為200*40。
• 進行中繼器賦值操作。

• 進行鼠標點擊事件。

• 細節(jié)調整
  給中繼器編輯頁面中的矩形設置選中狀態(tài)變化。添加鼠標移入移除的的選中切換。

配置圖標的旋轉方向和中繼器的顯示和隱藏。

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

案例二

滑動選擇類型：

①步驟分解

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

②教程

保持案例一的操作步驟不變，在將中繼器內容轉換為動態(tài)面板，調整動態(tài)面板的高度，設置動態(tài)面板的垂直滾動條。

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

案例三

翻頁選擇類型：

①步驟分解

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

②教程

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

配置上下翻頁事件：設置當前顯示頁面（以上一頁舉例）

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

案例四

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

①步驟分解

• 創(chuàng)建合適大小矩形、中繼器（保證中繼器寬與矩形寬度一致），方向箭頭。
• 配置中繼器內容，進行中繼器的賦值（下拉菜單內容）。
• 配置中繼器的顯示區(qū)域–動態(tài)面板實現(xiàn)。
• 配置中繼器的鼠標單擊事件。
• 添加文本框輸入，在文本框進行文字發(fā)生變化的時候匹配中繼器中文字，從而達到賽選匹配的效果。
• 采用[[Item.Column0.indexOf(word)>-1]]的匹配原則?！緜€人理解：indexOf(word)是Axure中正則匹配的函數(shù)，在axure中，如果返回參數(shù)為-1，表示不存在。其他解釋：indexOf(‘searchValue’,start) 用途：從左至右獲取查詢字符串在當前文本對象中首次出現(xiàn)的位置。未查詢到時返回值為-1。 參數(shù)：searchValue為查詢的字符串。】
• 調整隱藏/顯示關系

②教程

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

其他：點擊清除按鈕給移除篩選，并且文本框賦值為空值，達到重置的效果。

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

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

本文由 @Brose 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議。