下拉列表框是很常用的元件杀饵,Axure元件庫也提供了下拉列表框莽囤,但是Axure提供的下拉框不夠美觀,這里我們發(fā)揚造輪子的精神切距,自己定義下拉框朽缎。
我們先看一下制作好的省份選擇的下拉框:
效果預覽:http://www.axurestudy.cn/pr/index.html
【需求分析】
1、下拉列表分成初始狀態(tài)、初始狀態(tài)下顯示請選擇字樣话肖,下拉箭頭朝下北秽;
2、當鼠標點擊的時候最筒,下拉框的的邊框變成藍色贺氓,下拉箭頭朝上,并且展示下拉列表數(shù)據(jù)項床蜘;
3掠归、當鼠標在下拉列表項上移動的時候,選項變成藍色悄泥;
4虏冻、單點擊其中一個數(shù)據(jù)項的時候,下拉框收起弹囚,在下拉框里面顯示選中項厨相;
【原型設計】
1、現(xiàn)在畫布拖入一個矩形框province鸥鹉,并且在矩形框里面輸入Font?AweSome圖標字符靠右對齊蛮穿,如果不會使用Font?AweSome的同學,請查看如何使用字體圖標毁渗;
2践磅、在矩形框里面拖入一個輸入框input,邊框設置為0灸异,錄入文字“?請選擇 ”府适;
3、拖入一個中繼器肺樟,在數(shù)據(jù)源里面錄入省份名稱數(shù)據(jù)檐春;
4、點擊右鍵么伯,把中繼器轉(zhuǎn)換為動態(tài)面板疟暖,設置動態(tài)面板高度為合適的高度,并且設置動態(tài)面板為垂直方面滾動田柔;
5俐巴、設置動態(tài)面板為隱藏狀態(tài);
至此硬爆,自定義下拉列表的原型已經(jīng)制作完成欣舵,現(xiàn)在的效果如下所示:
【交互設計】
1、設置矩形框province的交互樣式摆屯,當矩形框為選中的時候邻遏,設置邊框顏色為藍色;
2虐骑、輸入框PInput和矩形框Province組合准验,設置該組合的點擊事件,當鼠標單擊的時候廷没,設置矩形框Province在選中和取消選中之間進行切換糊饱;
3、設置矩形框Province的選中事件颠黎,當Province被選中另锋,設置切換為,并且展示動態(tài)面板狭归;當Province取消選中的時候夭坪,為并且隱藏動態(tài)面板;
4过椎、設置中繼器的記錄的交互狀態(tài)室梅,當鼠標懸浮的時候,修改矩形框的填充顏色疚宇;
5亡鼠、當選中中繼器的一個記錄的時候,設置輸入框的值為選中值敷待,并且隱藏下拉列表间涵;
到了這里,自定義下拉列表框就制作好了榜揖,同學們趕緊去試試吧勾哩。
回復【入門】 ,獲取零基礎Axure快速入門視頻教程举哟;
回復【安裝】 钳幅,獲取安裝程序;
回復【練習】 ,獲取練習案例杭隙;
回復【高保真】飒炎,獲取高保真原型;
關注微信公眾號【猿型庫】钠导,獲取更多優(yōu)質(zhì)Axure資源;