亚洲精品久久久久久第一页-人妻少妇精彩视品一区二区三区-91国产自拍免费视频-免费一级a在线播放视频正片-少妇天天日天天射天天爽-国产大屁股喷水视频在线观看-操美女骚穴抽插性爱视频-亚洲 欧美 中文字幕 丝袜-成人免费无码片在线观看

axure日期選擇器控件 axure時(shí)間選擇框

大家在日常的原型繪制中經(jīng)常會(huì)使用到日期選擇器,包括在設(shè)置生日、設(shè)置收發(fā)貨時(shí)間、設(shè)置配送時(shí)間等等業(yè)務(wù)場(chǎng)景都會(huì)遇到使用日期選擇器,那么如何繪制日期選擇器呢?

axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
一、功能分析這里由于原型基本只是給研發(fā)/UI人員說明相關(guān)的功能,在這里就不做特別復(fù)雜的交互了,比如切換不同的月份展示正確的對(duì)應(yīng)天數(shù)與星期,畢竟要使用axure實(shí)現(xiàn)完整的日期選擇器功能還是比較復(fù)雜的,這里實(shí)現(xiàn)的功能主要是
①點(diǎn)擊年的前后切換鍵,實(shí)現(xiàn)年的加減
②點(diǎn)擊月的前后切換鍵,實(shí)現(xiàn)月的加減
③點(diǎn)擊日期,將當(dāng)前選擇的年月日賦值到輸入框
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
二、原型繪制1.首先繪制日期輸入框由于axure自帶的元件庫中的輸入框邊框比較丑 , 所以咱們自己定義一個(gè)背景 , 先拖入一個(gè)矩形,作為輸入框的背景,寬高設(shè)置為250*40,邊框設(shè)置自己喜歡的顏色即可
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
拖入文本框元件,寬高定義為205*30 , 然后移動(dòng)至合適的位置 , 并設(shè)置默認(rèn)的提示文字,隱藏原有的邊框 。不要忘了命名其為輸入框,方便后續(xù)選中時(shí)為其賦值 。
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
2.制作日期選擇器①首先繪制頂部的年月選擇功能,即下圖所示部分
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
大家可以提現(xiàn)到iconfont下載對(duì)應(yīng)的四個(gè)圖標(biāo),當(dāng)然也可以自己使用axure繪制 。首先拖入一個(gè)矩形,定義寬高為250*40,背景顏色自己定義即可 , 然后將提前下載好的圖標(biāo)拖至合適的位置,并新增年和月的文本標(biāo)簽元件,用于展示年月后的文本展示
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
②為切換年月的按鈕添加交互事件
為前年的按鈕添加交互鼠標(biāo)單擊時(shí)的交互事件,即當(dāng)點(diǎn)擊前年時(shí),年自動(dòng)減一
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
同理為明年、上月、下月的按鈕分別添加對(duì)應(yīng)的增減年和月的交互事件
【axure日期選擇器控件 axure時(shí)間選擇框】③繪制選擇天的界面
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
在這里我們使用表格元件,繪制一個(gè)6*7的表格 , 樣式的話可以把表格的分割線去掉,然后按照上圖輸入對(duì)應(yīng)的年月日,這里就不輸入上個(gè)月和下個(gè)月的日期了
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
首先我們需要標(biāo)識(shí)出系統(tǒng)當(dāng)前的日期,即20日 , 我們可以把20號(hào)加粗并使用顏色進(jìn)行區(qū)分
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
將年月日的選擇元件選中后轉(zhuǎn)化為動(dòng)態(tài)面板,并命名為日期選擇器
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
④添加選擇天時(shí)的交互事件
先選中1號(hào) , 大家如果想添加鼠標(biāo)懸停樣式或者選中樣式可以自己編輯 , 我這里就不給大家設(shè)置了 , 添加鼠標(biāo)單機(jī)時(shí)的交互事件,為輸入框直接賦值當(dāng)前記錄的年月日;并設(shè)置單擊時(shí),隱藏日期選擇器
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
復(fù)制該交互事件,粘貼到所有的單單元格上
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
并設(shè)置日期選擇器默認(rèn)為隱藏
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
⑤設(shè)置輸入框的交互事件
當(dāng)鼠標(biāo)單擊時(shí) , 顯示日期選擇器
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
下載一個(gè)日歷的小圖標(biāo)放在上邊美化一下
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖
到這里為止,日期選擇器就繪制完畢了,樣式如果大家覺得不好看的話,大家可以自己添加就可以 。
三、效果展示
axure日期選擇器控件 axure時(shí)間選擇框

文章插圖


    以上關(guān)于本文的內(nèi)容,僅作參考!溫馨提示:如遇健康、疾病相關(guān)的問題,請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

    「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容,希望對(duì)您有所幫助: