国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

省市縣三級聯(lián)動選擇功能在互聯(lián)網(wǎng)平臺應用非常廣泛，很多人在做產(chǎn)品設計時，不知道怎么實現(xiàn)三級聯(lián)動效果，或者只能簡單實現(xiàn)一兩個固定城市的三級聯(lián)動效果。如果要實現(xiàn)全國城市的三級聯(lián)動選擇呢？作者將通過這篇案列分享，教大家使用Axure制作實現(xiàn)“全國城市省市縣三級聯(lián)動選擇效果”。

實現(xiàn)效果

1. 可以任意選擇全國所有省份、選擇該省份對應的城市、選擇該城市對應的縣區(qū)；
2. 未選擇省份時，點擊“城市下拉選擇”，提示“請先選擇省份”；
3. 未選擇城市時，點擊“縣區(qū)下拉選擇”，提示“請先選擇城市”；
4. 切換選中省份時，重置城市及縣區(qū)選項；
5. 切換選中城市時，重置縣區(qū)選項
6. 當前選項處于下拉框選項狀態(tài)時，點擊其他選擇框，隱藏當前選項下拉框；
7. 下拉選項框展示時，下拉箭頭向上，下拉選項框隱藏時，下拉箭頭向上；
8. 動態(tài)顯示三級行政區(qū)移入狀態(tài)、選中狀態(tài)、取消選中狀態(tài)。

原理分析

（1）利用中繼器的數(shù)據(jù)存儲功能，用三個中繼器分別存放省份、城市、區(qū)域數(shù)據(jù)；

• 省份中繼器只需1列，用來存放全國所有省份數(shù)據(jù)；
• 城市中繼器需要2列，用來存放省份數(shù)據(jù)及城市數(shù)據(jù)（注意省份名稱要和省份中繼器的省份名稱一致）；
• 縣區(qū)中繼器需要2列，用來存放城市數(shù)據(jù)及縣區(qū)數(shù)據(jù)（注意城市名稱要和城市中繼器里城市名稱一致）；

（2）利用“省份下拉”元件的單擊事件觸發(fā)省份下拉選項的展示與隱藏；

（3）利用臨時變量將選中的省份名稱賦值給省份輸入框，從而顯示當前已選省份；

（4）利用“省份輸入框”元件的文本改變事件，觸發(fā)城市文本輸入框的顯示及城市下拉選項框的內(nèi)容；

（5）利用“城市下拉”元件的選中狀態(tài)事件，判斷省份是否選中，未選中城市則給出“請先選擇省份！”的錯誤提示；

（6）城市、區(qū)域涉及的各元件設置方式同“2、3、4、5”步驟。

元件準備

1. 省份輸入框背景（省份背景），放在輸入框底部
2. 省份輸入框（省份顯示），用于顯示已選擇的省份名稱
3. 省份下拉指示圖標（省份選擇），用于點擊觸發(fā)展示下拉選項，隱藏下拉選項
4. 省份下拉組合選項（包括一個中繼器sf,動態(tài)面板sfn,動態(tài)面板sfw），用于顯示所有省份名字
5. 城市輸入框背景(城市背景)，放在輸入框底部
6. 城市輸入框(城市顯示)，用于顯示已選擇的城市名稱
7. 城市下拉指示圖標（城市選擇），用于點擊觸發(fā)展示下拉選項，隱藏下拉選項
8. 城市下拉組合選項（包括一個中繼器cs,動態(tài)面板csn,動態(tài)面板csw），用于顯示所有城市名字
9. 縣區(qū)輸入框背景（縣區(qū)背景），放在輸入框底部
10. 縣區(qū)輸入框（縣區(qū)文字），用于顯示已選擇的城市名稱
11. 縣區(qū)下拉指示圖標（縣區(qū)選擇），用于點擊觸發(fā)展示下拉選項，隱藏下拉選項
12. 縣區(qū)下拉組合選項（包括一個中繼器xq,動態(tài)面板xqn,動態(tài)面板xqw），用于顯示所有縣區(qū)名字
13. 操作提示組合元件(提示框)，用于顯示校驗出錯時的提示
14. 背景，整個案例的演示背景，可要可不要

隱藏提示文件，重新布局元件后效果如下：

實現(xiàn)步驟

1. 準備省份數(shù)據(jù)及操作顯示元件

拖入一個中繼器sf，給中繼器的默認Column0列添加全國所有省份數(shù)據(jù)，要加上“請選擇”數(shù)據(jù)

將中繼器的數(shù)據(jù)通過每項加載時賦值給矩形，矩形顯示的數(shù)據(jù)就是省份待選項數(shù)據(jù)

將中繼器sf轉(zhuǎn)換為動態(tài)面板sfn，動態(tài)面板的大小為220px*240px。設置動態(tài)面板的滾動條屬性為“自動顯示垂直滾動條”

實用小技巧：將可滾動的動態(tài)面板sfn轉(zhuǎn)換為動態(tài)面板sfw，動態(tài)面板的大小為200px*240px。設置動態(tài)面板的滾動條屬性為“無”，從而可以實現(xiàn)滾動且隱藏滾動條的效果

準備三個元件，分別是：省份背景矩形放在最下面，省份顯示文本框放在中間層，省份選擇矩形放在最上面。

省份數(shù)據(jù)涉及的所有元件整理后如下圖所示：

省份數(shù)據(jù)涉及的所有元件整理后如下圖所示：

2. 準備城市數(shù)據(jù)及操作顯示元件

cs中繼器（城市待選數(shù)據(jù)）有兩列，一列s保存省份數(shù)據(jù)，一列cs保存城市數(shù)據(jù)，注意省份與城市的對應關系。其余操作步驟同省份數(shù)據(jù)，此處不再描述。

3. 準備縣區(qū)數(shù)據(jù)及操作顯示元件

4. 設置省份數(shù)據(jù)相關元件事件

單擊省份選擇時，切換該元件的選中狀態(tài)；選中時，箭頭向上（FontAwesome字體），顯示省份下拉選項；取消選中時，箭頭向下（FontAwesome字體），隱藏省份下拉選項

省份下拉選項展開，單擊某一項時，將該項值賦值給省份顯示文本框，同時觸發(fā)省份選擇的單擊事件（作用是隱藏省份下拉選項框）

當省份顯示文本框內(nèi)容改變時，將城市顯示文本框的內(nèi)容改為請選擇（重置城市數(shù)據(jù)），觸發(fā)城市中繼器的載入事件

4、設置城市數(shù)據(jù)相關元件事件

單擊城市選擇時，切換該元件的選中狀態(tài)；

選中時，需要判斷省份顯示的文字是否為請選擇：

• 如果省份顯示為“請選擇”，表示省份還沒被選中，設置界面提示為“請先選擇省份！”，1秒后，自動隱藏提示
• 如果省份顯示不為“請選擇”，表示省份已經(jīng)被選中了，這個時候，需要為中繼器添加篩選功能，僅顯示已選中省份對應的城市數(shù)據(jù)；箭頭向上（FontAwesome字體），顯示城市下拉選項

取消選中時，箭頭向下（FontAwesome字體），隱藏城市下拉選項

中繼器添加篩選功能，僅顯示已選中省份對應的城市數(shù)據(jù)，設置方式如下：

當城市顯示文本框內(nèi)容改變時，將縣區(qū)文字文本框的內(nèi)容改為請選擇（重置縣區(qū)數(shù)據(jù)）

5. 設置縣區(qū)數(shù)據(jù)相關元件事件

縣區(qū)各元件點擊、顯示事件與城市各元件一致，以下是事件設置截圖，具體不在描述

實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設置為20%。提示效果很漂亮。

本案例已完成，點擊查看上一篇案例《動態(tài)隨機獲取“大小寫字母與數(shù)字”驗證碼》；

作者：十月大神，個人網(wǎng)站：?www.pmgod.cn

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

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