猿型庫:Axure小練習之自定義下拉框

下拉列表框是很常用的元件杀饵,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資源;

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末森瘪,一起剝皮案震驚了整個濱河市牡属,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌扼睬,老刑警劉巖逮栅,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悴势,死亡現(xiàn)場離奇詭異,居然都是意外死亡措伐,警方通過查閱死者的電腦和手機特纤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侥加,“玉大人捧存,你說我怎么就攤上這事〉0埽” “怎么了昔穴?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長提前。 經(jīng)常有香客問我吗货,道長,這世上最難降的妖魔是什么狈网? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任卿操,我火速辦了婚禮,結果婚禮上孙援,老公的妹妹穿的比我還像新娘害淤。我一直安慰自己,他們只是感情好拓售,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布窥摄。 她就那樣靜靜地躺著,像睡著了一般础淤。 火紅的嫁衣襯著肌膚如雪崭放。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天鸽凶,我揣著相機與錄音币砂,去河邊找鬼。 笑死玻侥,一個胖子當著我的面吹牛决摧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播凑兰,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼掌桩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了姑食?” 一聲冷哼從身側響起波岛,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎音半,沒想到半個月后则拷,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贡蓖,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年煌茬,在試婚紗的時候發(fā)現(xiàn)自己被綠了斥铺。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡宣旱,死狀恐怖仅父,靈堂內(nèi)的尸體忽然破棺而出叛薯,到底是詐尸還是另有隱情浑吟,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布耗溜,位于F島的核電站组力,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏抖拴。R本人自食惡果不足惜燎字,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望阿宅。 院中可真熱鬧候衍,春花似錦、人聲如沸洒放。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽往湿。三九已至妖异,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間领追,已是汗流浹背他膳。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绒窑,地道東北人棕孙。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像些膨,于是被迫代替她去往敵國和親散罕。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容