在axure中使用repeater構(gòu)建日歷組件


classification: 實戰(zhàn)axure
title: 在axure中使用repeater構(gòu)建日歷組件
tag: axure repeater 動態(tài)面板``日歷
author: 嘟嘟寶嘟
Date: 2020年12月9日


在axure中使用repeater構(gòu)建日歷組件

這個組件著實廢了作者很大的心思,主要是對日期的函數(shù)不是特別清楚導(dǎo)致的不斷返工,最后參考了不少其他的設(shè)計才完成倦青,大概花了兩天五六個小時才完成图毕。

1. 原型需求

具體的需求就不詳細說了,大概參考一下jeecg框架中日歷組件的樣式與操作像樊,本來想用中文的年月日格式尤莺,但是一直在犯錯,最后迫不得已生棍,還是使用了mm/dd/yyyy的日期格式颤霎。

原型需求參照的jeecg框架下的日歷組件

2. 組件準(zhǔn)備

2.1. 日期展示框

由一個輸入框和日歷圖標(biāo)組成:

日歷展示框

當(dāng)點擊日期展示框的時候彈出日歷主體,日期的輸入在日歷主體上進行足绅。

2.2. 日歷主體

日歷主體存在于一個動態(tài)面板canlenedar

日歷主體的組件擺放

組件構(gòu)成:

日歷主體的組件構(gòu)成

其中g(shù)roup yr ctrmon ctr是年份翻頁和月份翻頁捷绑。

其中最重要的是repeaterdays of month,它是日歷的核心氢妈。

2.3. 參數(shù)動態(tài)面板

這個動態(tài)面板varDays的作用就是提供各類參數(shù)粹污,為動態(tài)效果傳參。

參數(shù)動態(tài)面板的各個參數(shù)

3. 實現(xiàn)步驟

3.1. 從repeaterdays of month開始

3.1.1. repeater的Loaded事件

回顧需求首量,當(dāng)開始加載日歷組件時壮吩,日歷顯示當(dāng)前月的月份牌进苍,所以我們首先定義repeater的Loaded事件:

repeater的Loaded事件

這樣初始化了日歷月份牌所選月份的參數(shù)varThisDate為當(dāng)前月。

3.1.2. item的loaded事件

  1. 當(dāng)加載月份牌的第一條數(shù)據(jù)時鸭叙,我們要做幾項工作:
Item Loaded事件步驟一
  1. 排序日期(動態(tài)日期)設(shè)為當(dāng)前所選月第一天觉啊;
  2. 設(shè)定這個月的1日是星期幾,在這里用到了[[runningDate.getDay() + 1]]沈贝,之所以這樣杠人,是因為我們把周日放在了每周的第一天,所以需要+1宋下;
  3. 設(shè)定所選月的最后一天是幾號[[startDate.addMonths(1).addDays(-1).getDate()]]嗡善,[[addmonths(1)]]得到下一個月的1號(startdate是1號),[[adddays(-1)]]這是所選月的最后一天学歧,[[getdate()]]得到最后一天的日期罩引;
  4. 給月份牌的月份賦值;
  5. 給參數(shù)當(dāng)前時間(注意是今天)所屬月份賦值[[runningDate.getMonth()]]
  1. 如果寫入的這個日期不屬于這個月

[[Item.index < firstDayOfWeek \ Item.index >= lastDayOfStartMonth + firstDayOfWeek ]]

Item Loaded事件步驟二
  1. 顯示其他月日期的樣式框枝笨;
  2. 隱藏當(dāng)前月的樣式框袁铐;
  3. 在其他月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]];
  1. 如果寫入的這個日期屬于這個月

[[Item.index >= firstDayOfWeek && Item.index < lastDayOfStartMonth + firstDayOfWeek]]

Item Loaded事件步驟三
  1. 隱藏其他月日期的樣式框横浑;
  2. 顯示當(dāng)前月的樣式框剔桨;
  3. 在所選月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]];

實際寫的時候沒有1.2.兩個操作伪嫁,這是因為當(dāng)前月樣式框在其他月樣式框之上领炫。

  1. 對于今天的處理

判斷這個日期
[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getMonth()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getFullYear()]]
是不是今天[[Now.getDate()]]/[[Now.getMonth()]]/[[Now.getFullYear()]]

Item Loaded事件步驟四
  1. 顯示今天的樣式框;
  2. 隱藏其他月日期和當(dāng)前月日期的樣式框张咳;
  3. 今天日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]帝洪;
  1. 選中情況的處理

當(dāng)該日期被選中后的表現(xiàn)

Item Loaded事件步驟五

其中[[day]]變量為樣式框(根據(jù)情況)的日期。

  1. 最后
Item Loaded事件步驟六

開始寫下一條數(shù)據(jù)脚猾。

所有的這些都寫完后葱峡,日歷組件的核心部分就寫完了,剩下的就是各種動態(tài)交互的工作了龙助。我們可以通過預(yù)覽看到當(dāng)前月份牌的效果:

月份牌預(yù)覽

可以看到默認顯示當(dāng)前月的日歷月份牌砰奕,其中今天被進行了標(biāo)記。

3.2. 翻動月份牌

3.2.1. 通過點擊< >按鍵按月翻動月份牌

上月按鈕<click事件

  1. 更新所選月(varThisDate)參數(shù)標(biāo)簽提鸟,月份減一军援。
  2. 更新repeater,看到語句其實什么也沒有做称勋,僅僅是重新更新一遍(因為所選月已經(jīng)發(fā)生了變化)

同理胸哥,我們可以設(shè)定下月按鈕>click事件。

3.2.2. 通過點擊<< >>按鍵按年翻動月份牌

上年按鈕<<click事件

下年按鈕>>click事件赡鲜。

3.3. 點擊月份牌上的日期

我們在設(shè)計月份牌上的日期時使用了四個shape組件:day of this——代表當(dāng)月的日期空厌;day of other——代表其他月的日期庐船;today——代表今天當(dāng)天;day bg作為背景板嘲更,實現(xiàn)鼠標(biāo)mouseover效果筐钟。

針對所選月當(dāng)月的日期和其他月的日期操作有所不同。我們先從當(dāng)月日期入手赋朦。

3.3.1. day of thisclick事件

當(dāng)前月份日期的點擊事件

前兩個set Text方法向日歷組件的兩個輸入框(其中后邊的輸入框date show不能輸入篓冲,僅僅是顯示)寫入所選日期。

看到非常復(fù)雜北发,這是為了將日期和月份統(tǒng)一顯示為dd和mm格式纹因。

然后對參數(shù)varSelDay varSelMonth varSelYear設(shè)置為當(dāng)前選擇日期的年月日喷屋;

設(shè)置所選日期選中狀態(tài)樣式琳拨;

隱藏月份牌。

3.3.2. day of otherclick事件

非本月日期的點擊事件

day of this的click事件類似屯曹,但是增加了判斷是上個月的日期還是下個月的日期狱庇,針對不同的月份需要分別對varthisDate這個參數(shù)標(biāo)簽文字內(nèi)容進行修改,修改后更新數(shù)據(jù)恶耽。

3.3.3. todayclick事件

今天(日期)的點擊事件

同理密任,設(shè)置todayclick事件。

3.3.4. 今天標(biāo)簽的'click`事件

todayclick事件一樣偷俭,但是把時間換成now浪讳。

今天(標(biāo)簽)的點擊事件

3.4. 手工在date input輸入日期

當(dāng)輸入日期并按下回車鍵:

手工輸入日期

現(xiàn)在,一個基本能夠滿足原型設(shè)計需要的日歷組件就設(shè)計完成了涌萤。

最終展示效果(可以動態(tài)操作)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淹遵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子负溪,更是在濱河造成了極大的恐慌透揣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件川抡,死亡現(xiàn)場離奇詭異辐真,居然都是意外死亡,警方通過查閱死者的電腦和手機崖堤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門侍咱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人密幔,你說我怎么就攤上這事楔脯。” “怎么了老玛?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵淤年,是天一觀的道長钧敞。 經(jīng)常有香客問我,道長麸粮,這世上最難降的妖魔是什么溉苛? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮弄诲,結(jié)果婚禮上愚战,老公的妹妹穿的比我還像新娘。我一直安慰自己齐遵,他們只是感情好寂玲,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著梗摇,像睡著了一般拓哟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伶授,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天断序,我揣著相機與錄音,去河邊找鬼糜烹。 笑死违诗,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的疮蹦。 我是一名探鬼主播诸迟,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼愕乎!你這毒婦竟也來了阵苇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤妆毕,失蹤者是張志新(化名)和其女友劉穎慎玖,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體笛粘,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡趁怔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了薪前。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片润努。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖示括,靈堂內(nèi)的尸體忽然破棺而出铺浇,到底是詐尸還是另有隱情,我是刑警寧澤垛膝,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布鳍侣,位于F島的核電站丁稀,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏倚聚。R本人自食惡果不足惜线衫,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惑折。 院中可真熱鬧授账,春花似錦、人聲如沸惨驶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粗卜。三九已至屋确,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間休建,已是汗流浹背乍恐。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留测砂,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓百匆,卻偏偏與公主長得像砌些,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子加匈,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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