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

編輯導語：分級下拉列表不僅可以節省輸入效率，還可以保證數據規范性。本文作者以二級多選下拉列表為例，分析如何在Axure中制作分級多選下拉列表，一起來學習一下吧。

分級下拉列表是系統頁面常用的元件，既可以節省輸入效率，還可以保證數據規范性。所以作者今天就教大家如何在Axure中制作分級多選下拉列表，本教程以二級多選下拉列表為案例。

一、制作完成后應具備以下效果

1. 可以根據一級選擇，顯示對應的二級內容。例如我們選擇品牌為華為，那么二級顯示的就是所有華為的產品。
2. 一級選擇有三種狀態：全選、半選和未選，可以根據二級選中的情況自動反選。例如我們選擇的華為所有型號的產品，這時在華為就顯示全選，如果選擇了部分華為產品，華為就顯示半選，如果為選中華為產品，華為就顯示未選。
3. 可以快速全選和全部取消。例如，點擊華為，可以快速全部選中華為下全部產品型號，再次點擊就全部取消。
4. 選項內容不是寫死，我們使用中繼器制作，在中繼器表格里填寫選項后，自動生成交互效果。

二、重點難點和制作思路講解

難點1：一級選項和二級選項是在連個中繼器內，所以相當于要做連個中繼器之間的聯動交互，這對Axure的初學者來說會有一定的難度。

難點2：需要要進行反選和半選，就涉及到如何統計該一級選項下的二級選項的選中數。

簡單談一下制作的思路，其實就是通過兩個中繼器，點擊一級選項時，對二級選項進行篩選，在二級選項中只顯示該一級選項對應的二級選項，再通過值來控制一二級選項的選中狀態。

在點擊一級選項全選或取消全選時，通過更新行更新二級選擇中繼器里的值，從而改變二級選項的選中狀態。

在點擊二級選項選中或者取消選中時，先統計選中個數和中繼器可見行數比較，從而判斷該品牌下的產品型號是已經全選、部分選中還是一個沒有選中。

根據不同的情況，用更新行的交互，更新一級中繼器內的值，從而控制一級選項的全選、半選或者未選。

三、主要的制作材料

我們可以分成3部分。

1. 頂部內容

主要是用矩形和箭頭組成的，具體演示可以根據你們的需要設置，這里就是未顯示具體選項列表的情況。

2. 一級選項

主要是由中繼器和矩形制作而成，矩形只是用作背景，為了美觀。

中繼器內部元件：

• 全選圖標、半選圖標、未選圖標，將這三個圖標分別放入動態面板的三個狀態內，未選圖標的狀態默認在最前
• 文字：用于顯示選項文字，需要設置選中樣式和禁用樣式，后續用于制作移入和選擇后的變色效果
• 背景矩形：用于制作移入和選擇后的變色效果。所以這里要設置元件的選中樣式和禁用樣式
• 右箭頭

中繼器表格：

• 需要設置三列，分別為text、jinyong、和xuanzhong
• text列填寫一級選項的文字
• jinyong列默認為空，后續會通過交互，做點擊選擇后變色的效果
• xuanzhong列默認為空，就是未選中的狀態，后續會通過交互來控制半選、全選還是未選

3. 二級選項

二級選項和一級選項的元件基本一致，可以直接復制一級的來使用。

• 全選圖標、未選圖標，將這2個圖標分別放入動態面板的2個狀態內，未選圖標的狀態默認在最前。這里因為二級已經是最后一級，所以不需要半選。
• 文字：用于顯示選項文字，需要設置選中樣式和禁用樣式，后續用于制作移入和選擇后的變色效果。
• 背景矩形：用于制作移入和選擇后的變色效果，所以這里要設置元件的選中樣式和禁用樣式。

中繼器表格：

• 和前面的中繼器相比，需要多設置一列，用來記錄是該二級選項對應的一級選項
• text1列，填寫一級選項的文字
• text2列，填寫2級選項的文字
• jinyong列默認為空，后續會通過交互，做點擊選擇后變色的效果
• xuanzhong列默認為空，就是未選中的狀態，后續會通過交互來控制全選還是未選

二級選項默認隱藏。

四、交互制作

1. 一級中繼器每項加載時

設置文本：將text列的選項值設置到文字矩形內。

禁用：如果該行禁用列的值為1（后續交互實現），就禁用背景矩形和文字，因為前面設置了禁用樣式，這樣就可以根據鼠標點擊的內容進行變色。

設置面板狀態：如果該行xuanzhong列的值為全選，設置面板狀態為全選，如果是半選，就設置面板狀態到半選。

2. 一級中繼器內文字元件鼠標單擊時交互

首先是標記一級中繼器內所有行，然后更新所有行的jinyong列的值為0，這個操作相當于重置。因為上面每項加載時設置了如果值等于1，就會變色，這樣相當于讓所有行恢復原來的狀態。

完成上面操作之后，我們就更新當前行jinyong列的值為1，這樣相當于讓當前行變色，就可以看出我們在查看哪一選項的內容。

然后我們用顯示的交互，顯示二級選項組合。

最后再用添加篩選的交互，對二級中繼器內的選項進行篩選，篩選條件為當前中繼器text列的值等于二級中繼器text1列的值。

3. 一級中繼器內文字元件鼠標移入移除是交互

這個其實只是為了更加美觀，有沒有并不影響，就是設置鼠標移到對應行有一個變色效果，因為我們前面設置了文字和背景矩形有選中樣式，所以這里我們只需要鼠標移入是，選中文字和背景矩形，鼠標移出時，取消選中即可。

4. 二級中繼器每項加載時

其實和前面1級中繼器每項加載時的交互差不多，只不過設置文本的列不同，一級需要記錄選中的個數。

設置文本：將text2列的選項值設置到文字矩形內。

禁用：如果該行禁用列的值為1（后續交互實現），就禁用背景矩形和文字，因為前面設置了禁用樣式，這樣就可以根據鼠標點擊的內容進行變色。

設置面板狀態：如果該行xuanzhong列的值為1，設置面板狀態為全選，這里和上面有點不一樣，因為這里我們后續需要計算有多少個選項被選中，所以我們直接用1比較方便。

設置文本值：這里我們需要加一個文本，默認為0，第一行加載時設置為0，如果該行xuanzhong列的值為1，就設置文本值為他原來的值+1，這樣就可以記錄選中了多少個選項。

5. 一級中繼器內未選圖標鼠標單擊時

更新行——因為是未選，點擊之后相當于要選中，所以我們首先更新當前行為xuanzhong列的值為全選。

然后我們還要更新2級中繼器里text1列的值和當前選項的值一樣的行，所以這里更新條件就是Item.text==TargetItem.text1，更新xuanzhogn列的值為1。

最后觸發文字內容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據上面的交互就會變色，并且在中繼器2中篩選出對應的內容。

6. 一級中繼器內半選圖標鼠標單擊時

半選和未選的邏輯是一樣的，都是點擊全選，所以我們直接復制上面未選的交互過來即可。

7. 一級中繼器內全選圖標鼠標單擊時

這和前面基本就是相反的，只需要將選中變成未選中即可。

更新行——因為是已選，點擊之后相當于要取消選中，所以我們首先更新當前行為xuanzhong列的值為未選。

然后我們還要更新2級中繼器里text1列的值和當前選項的值一樣的行，所以這里更新條件就是Item.text==TargetItem.text1，更新xuanzhogn列的值為0。

最后觸發文字內容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據上面的交互就會變色，并且在中繼器2中篩選出對應的內容。

8. 2級中繼器內未選圖標鼠標單擊時

更新行——因為是未選，點擊之后相當于要選中，所以我們首先更新當前行為xuanzhong列的值為1，這樣就相當于選中了。

我們記錄一下text1的值，因為下面需要根據條件來更新中繼器1和text1一樣的行，然后觸發文字內容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據上面的交互就會變色。

接下來我們還需要根據條件來判斷：

第一種條件是：中繼器可視行數等于選中數量，可視行數我們用visibleItemCount函數就可以獲取，選中數量就是二級中繼器每項加載時記錄xuanzhong列的值。如果符合該條件，就是全部都選中了，這樣我們一級中繼器對應行的xuanzhong列的值為全選。

如果上面的情況不成立，選中數量數量>0，相當于只選中了一部分的選項，這是我們就更新一級中繼器對應行的xuanzhong列的值為半選。

最后一種情況就是，如果選中數量數量=0，相當于一個都沒有選中，這是我們就更新一級中繼器對應行的xuanzhong列的值為未選。

注意：其實這種情況在改交互里面是不存在，因為，我們現在點擊的是未選按鈕，那當前行肯定會變成已選，那就是至少等于1。那為什么我要把這個條件也寫在這里，主要目的是為了后面點擊全選按鈕的交互可以直接使用。

9. 2級中繼器內全選圖標鼠標單擊時

更新行——因為是群宣，點擊之后相當于要取消選中，所以我們首先更新當前行為xuanzhong列的值為0，這樣就相當于未選中了。

同樣，我們記錄一下text1的值，因為下面需要根據條件來更新中繼器1和text1一樣的行，然后觸發文字內容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據上面的交互就會變色。

最后就是條件判斷，和上面那3個條件是一樣的，所以我們可以做一個隱藏的按鈕，把交互復制在里面，然后做一個觸發事件就可以了，這樣兩邊都可以使用。

10. 頂部組合鼠標單擊時

這里很簡單，我們點擊頂部組合其實就要顯示下拉列表，所以我們把一二級選項組合合并在一起，然后用顯示的交互，顯示即可，這里主要我們可以選擇燈箱效果，燈箱顏色為透明，這樣點擊空白的地方就會自動收起。

11. 其他交互

其他交互主要是影響美觀的一些交互，和改原型主要邏輯沒太大關系，例如移入時變色效果，選項彈出時顯示上箭頭、隱藏下箭頭……你們可以根據實際需要設置。

這樣我們就完成了用中繼器制作分級多選下拉列表的的原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議