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

編輯導(dǎo)語：在我們使用搜索的時(shí)候，經(jīng)常會(huì)遇到分類搜索框。它們應(yīng)該如何制作呢？今天，本文作者教大家如何在Axure里做一個(gè)高保真的分類搜索框。

一、什么是分類搜索框？

首先和大家簡(jiǎn)單的介紹一下什么是分類搜索框，就是可以按照不同分類來進(jìn)行搜索，最簡(jiǎn)單的例子就是百度搜索，例如我想搜索皮卡丘，我可以按照不同的類別搜索皮卡丘相關(guān)的圖片、視頻、貼吧、產(chǎn)品、資訊等等。

原型預(yù)覽地址：https://6vytni.axshare.com

下面，我們主要學(xué)習(xí)如果制作分類外聯(lián)搜索的原型，后續(xù)也可以多條件搜索表格、卡片、產(chǎn)品的內(nèi)容。

二、材料準(zhǔn)備

• 輸入框*1——隱藏邊框；
• 搜索圖標(biāo)*1——放大鏡的圖標(biāo)，用于美化原型，相當(dāng)于搜索按鈕；
• 矩形外框*1——設(shè)置為圓角，作用是美化原型；
• 中繼器*1——制作下拉的內(nèi)容，取消勾選隔離選項(xiàng)組效果，默認(rèn)隱藏；內(nèi)部表格第一列填入分類選項(xiàng)，案例中的選項(xiàng)為網(wǎng)頁、資訊、視頻、圖片、知道、文庫、貼吧、采購；你們也可以根據(jù)實(shí)際的分類來制作；
• 中繼器內(nèi)部矩形*1——設(shè)置成取消邊框，移入的交互樣式將文字設(shè)為藍(lán)色，選中樣式將文字設(shè)為白色，填充顏色設(shè)為藍(lán)色，設(shè)置為單選組；
• 文字文本——用來回顯選擇了那個(gè)分類，案例中默認(rèn)是搜索網(wǎng)頁；
• 下箭頭——用于美化原型，

所有材料準(zhǔn)備好之后，如下圖所示擺放：

三、交互制作

1. 文字文本和下箭頭組合鼠標(biāo)單擊時(shí)事件

顯示選項(xiàng)中繼器，這里勾選至于頂層，因?yàn)槿绻还催x的話，演示的時(shí)候容易被其他元件擋住，一般像彈窗、彈出列表都要勾選；還需要設(shè)置燈箱效果，背景色為透明，設(shè)置之后鼠標(biāo)單擊其他地方就可以將選項(xiàng)中繼器隱藏。

2. 中繼器載入時(shí)事件

中繼器載入時(shí)，設(shè)置中繼器內(nèi)部的矩形的文本等于中繼器第一列的值，這個(gè)是默認(rèn)事件，即新建中繼器時(shí)如果你沒有改動(dòng)的話自動(dòng)會(huì)出現(xiàn)。

3. 中繼器內(nèi)部矩形鼠標(biāo)單擊時(shí)事件

1）設(shè)置選中狀態(tài)

首先要設(shè)置當(dāng)前元件為選中狀態(tài)，選中后因?yàn)樵诓牧蠝?zhǔn)備的時(shí)候設(shè)置了交互樣式選中時(shí)變藍(lán)色，就可以清晰的看到選中那個(gè)選項(xiàng)。

2）設(shè)置文字

我們需要將選中的值回顯的文本標(biāo)簽，所以我們將回顯文字的文本標(biāo)簽的文本值設(shè)為當(dāng)前選項(xiàng)的值（this.text）。

3）隱藏選項(xiàng)中繼器

鼠標(biāo)單擊選擇選項(xiàng)之后，隱藏中繼器。

4）設(shè)置文本焦點(diǎn)

最后，將文本的焦點(diǎn)設(shè)置到輸入框內(nèi)，這里用戶可以快速的繼續(xù)輸入搜索內(nèi)容。

4. 搜索按鈕鼠標(biāo)單擊時(shí)事件

這里需要分條件，首先是判斷輸入框的值是否為空，如果為空，則搜索內(nèi)容為空，則不進(jìn)行搜索，所以這是我們把焦點(diǎn)設(shè)置在輸入框內(nèi)，方便用戶直接輸入搜索。

如果輸入內(nèi)容不為空，那么我們就按照回顯的文字文本進(jìn)行搜索。

如果回顯文字=網(wǎng)頁，我們就打開對(duì)應(yīng)網(wǎng)頁的地址。這里教大家一個(gè)外聯(lián)的簡(jiǎn)單的方法，例如我們想在百度上搜索網(wǎng)頁皮卡丘，那么我們會(huì)得到搜索出來的網(wǎng)址，我們把網(wǎng)址內(nèi)部的皮卡丘轉(zhuǎn)換成變量LVAR1，然后再將變量設(shè)為輸入框的內(nèi)容，這樣就可以實(shí)現(xiàn)搜索輸入的內(nèi)容的。

我們用以上的方法設(shè)置每一個(gè)分類條件打開的對(duì)應(yīng)地址頁面即可，這樣我們就完成了多條件分類搜索框原型的制作的。

最后我們補(bǔ)充一下課外的知識(shí)，多條件搜索不僅僅能用于外聯(lián)的搜索，也可以搜索表格內(nèi)容，我們可以將表格每一列的標(biāo)題例如年齡、學(xué)歷等作為分類的條件，然后搜索時(shí)，將原來的打開頁面變成對(duì)中繼器表格的添加篩選事件即可。

以上就是本期的全部?jī)?nèi)容了，我們下期見~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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