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

多選下拉列表可以用于展示可選標簽，并允許用戶選擇多個標簽，那么該如何利用Axure里用中繼器制作一個多選下拉列表。作者總結了相關步驟，希望對你有所幫助。

多選下拉列表常用于需要用戶從一組選項中選擇多個選項的情況。它提供了一個下拉菜單，用戶可以點擊展開并選擇他們感興趣的多個選項。多選下拉列表可以用于展示可選標簽，并允許用戶選擇多個標簽。例如，在一個博客發布界面上，可以使用多選下拉列表選擇適用的標簽。

所以今天就教大家在Axure里如果用中繼器制作一個多選下拉列表，并且根據已選項自動生成標簽的原型模板。

一、效果展示

1、點擊下拉列表框可以彈出選項，點擊選項可以選中選項或者取消選中

2、根據已選內容自動顯示對應的標簽，并且根據標簽數量自動調整下拉框的尺寸

3、取消選中時，對應標簽自動刪除，也可以點擊標簽里的刪除按鈕刪除并取消選中

4、選項信息可以在中繼器表格里維護，選項較多時，可以通過滾動條上下查看選項

二、制作教程

1. 用中繼器制作選項

我們新增一個中繼器，在中繼器里添加文本標簽，背景矩形，以及多選按鈕，這里我們因為想自定義多選按鈕的樣式，所以我們沒有用系統多選按鈕，我們用動態面板來制作，增加兩個狀態，一個是未選中狀態，一個是選中的狀態，分別導入選中和未選中的多選按鈕的素材。

當然你們也可以用系統的多選按鈕來制作，分別將他們放入兩個狀態里，但是需要用個熱區擋住他，因為后續是否選中是通過中繼器里的值控制的，并不是通過點擊直接改變的。如下圖所示擺放：

中繼器表格里我們增加兩列：

1. text列：在該列添加選項名，有幾個選項就填寫幾行
2. xuanzhong列：用來控制對應行的選項是否被選擇，一般如果默認沒有選中項的話，不填即可，如果項默認某個選項選中，就在該選項xuanzhong列的值填寫1

在中繼器每項載入時，我們首先用設置文本的交互，將text列選項的值設置到文本標簽里。

然后我們還要根據xuanzhong列的值來設置動態面板是選中還是未選中的狀態。如果xuanzhong列的值等于1，那么我們用將動態面板設置到選中狀態；如果不等于1，我們就設置到未選中的狀態，不過這里不等于1的情況可以不用寫，因為他默認就是未選中的狀態。

2. 鼠標單擊選項時的交互

鼠標單擊選項時，我們要根據判斷該選項是否已經被選中，如果已被選中，我們就將他設置為未選中，因為控制他是否選中是通過中繼器里選中列的值來控制的，所以我們用更新行的交互，將中繼器里xuanzhong列的值更新為0即可；如果未被選中，我們就將他設置為選中，用更新行的交互，將中繼器里xuanzhong列的值更新為1即可。

3. 將中繼器轉為動態面板

這樣我們就基本完成了下拉選項，如果選項較多，這個選項就會很常，所以我們把它轉為動態面板，取消面板自適應尺寸，并且調出垂直滾動條，這樣就可以控制顯示選項的尺寸，在選項較多時，還可以上下滾動查看更多選項。

如果覺得系統的滾動條不太好看的話，我們還可以通過再次轉為動態面板，然后用外面板遮擋住大部分或全部內面板的滾動條，這樣去美化一下。

然后我們在底部增加一個背景矩形，將他們組合在一起，這樣下拉選項就做好了。

4. 下拉框的制作

下拉框我們需要用到矩形，上下箭頭，以及中繼器標簽組。

鼠標單擊這個組合時，我們用顯示的交互，將下拉選項顯示出來，這個我們可以選擇燈箱效果，這樣點擊其他空白的地方，下拉選項就可以自動收起來。

當然我們也可以增加一些交互樣式讓他更加美化，增加矩形選中和禁用樣式，鼠標移入移出或者下拉選項顯示隱藏時，觸發這些樣式，因為每個人審美不一樣，這些你們自行處理即可。

4. 中繼器標簽組

前面說到下拉框組合里需要有一個中繼器標簽組，我們現在來制作。

需要再中繼器里增加背景矩形，文字標簽和刪除按鈕，文字標簽我們轉為動態面板，因為考慮到有些選項太長，我們就自顯示前面部分即可。如下圖所示擺放即可。

中繼器表格里不需要修改，用自帶的Column0列即可，默認中繼器表格為空。中繼器布局為水平，按網格排布，案例中是每行項目數是2。

在中繼器每項加載時，我們用設置文本的交互，將Column0列的值設置到文本標簽里。

這樣標簽組就只做完成了。

5. 選項和標簽的聯動

接下來我們要讓選項和標簽進行聯動，在選項中繼器里，該選項被選中，我們就用添加行的交互，將該選項的選項值增加的標簽中繼器里。這里需要注意的是，因為中繼器每次更新都會從頭加載，所以在一開始如果直接添加行的話，選第二個選項之后，就會發現之前第一次添加的標簽，重復添加了。

所以我們在一開始的時候，要對標簽中繼器做一個還原的操作，我們可以用刪除所有行的方式，讓選中之前的標簽中繼器處于一個原始為空的狀態。

我們要刪除標簽的話，我們也不是用刪除行的方式，刪除標簽里對應的行。因為我們是通過下拉選項中繼器里的值來控制具體顯示的標簽，所以如果我們想讓標簽刪除，我們就用更新行的交互，將和標簽名稱一樣的行的xuanzhong列的值更新為0，這樣就可以把標簽刪除。

這樣我們就基本完成了，但是我們還需要考慮標簽太多的情況。

6. 設置下拉框的尺寸

我們可以根據標簽中繼器的尺寸，來設置外框的尺寸。

當所有標簽加載完成后，我們用設置尺寸的交互，首先設置下拉框的尺寸，寬度保持不變，高度就是標簽組的高度+上下的邊距，這樣就可以外框就可以變高。

同事我們還要用移動的事件，移動下拉選項組合，移動到下拉框的底部，這樣就可以根據標簽的多少，自動調整下拉框的尺寸。

這樣我們就完成了多選下拉列表（自動生成標簽）原型模板的制作了，下次使用也很方便，我們只需要在下拉選項中繼器表格里填寫選項值，即可自動生成交互效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。