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的日期格式颤霎。
2. 組件準(zhǔn)備
2.1. 日期展示框
由一個輸入框和日歷圖標(biāo)組成:
當(dāng)點擊日期展示框的時候彈出日歷主體,日期的輸入在日歷主體上進行足绅。
2.2. 日歷主體
日歷主體存在于一個動態(tài)面板canlenedar
中
組件構(gòu)成:
其中g(shù)roup yr ctr
和mon ctr
是年份翻頁和月份翻頁捷绑。
其中最重要的是repeaterdays of month
,它是日歷的核心氢妈。
2.3. 參數(shù)動態(tài)面板
這個動態(tài)面板varDays
的作用就是提供各類參數(shù)粹污,為動態(tài)效果傳參。
3. 實現(xiàn)步驟
3.1. 從repeaterdays of month
開始
3.1.1. repeater的Loaded事件
回顧需求首量,當(dāng)開始加載日歷組件時壮吩,日歷顯示當(dāng)前月的月份牌进苍,所以我們首先定義repeater的Loaded事件:
這樣初始化了日歷月份牌所選月份的參數(shù)varThisDate
為當(dāng)前月。
3.1.2. item的loaded事件
- 當(dāng)加載月份牌的第一條數(shù)據(jù)時鸭叙,我們要做幾項工作:
- 排序日期(動態(tài)日期)設(shè)為當(dāng)前所選月第一天觉啊;
- 設(shè)定這個月的1日是星期幾,在這里用到了[[runningDate.getDay() + 1]]沈贝,之所以這樣杠人,是因為我們把周日放在了每周的第一天,所以需要+1宋下;
- 設(shè)定所選月的最后一天是幾號[[startDate.addMonths(1).addDays(-1).getDate()]]嗡善,[[addmonths(1)]]得到下一個月的1號(
startdate
是1號),[[adddays(-1)]]這是所選月的最后一天学歧,[[getdate()]]得到最后一天的日期罩引;- 給月份牌的月份賦值;
- 給參數(shù)當(dāng)前時間(注意是今天)所屬月份賦值[[runningDate.getMonth()]]
- 如果寫入的這個日期不屬于這個月
[[Item.index < firstDayOfWeek \ Item.index >= lastDayOfStartMonth + firstDayOfWeek ]]
- 顯示其他月日期的樣式框枝笨;
- 隱藏當(dāng)前月的樣式框袁铐;
- 在其他月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]];
- 如果寫入的這個日期屬于這個月
[[Item.index >= firstDayOfWeek && Item.index < lastDayOfStartMonth + firstDayOfWeek]]
- 隱藏其他月日期的樣式框横浑;
- 顯示當(dāng)前月的樣式框剔桨;
- 在所選月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]];
實際寫的時候沒有1.2.兩個操作伪嫁,這是因為當(dāng)前月樣式框在其他月樣式框之上领炫。
- 對于
今天
的處理
判斷這個日期
[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getMonth()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getFullYear()]]
是不是今天[[Now.getDate()]]/[[Now.getMonth()]]/[[Now.getFullYear()]]
- 顯示
今天
的樣式框;- 隱藏其他月日期和當(dāng)前月日期的樣式框张咳;
- 在
今天
日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]帝洪;
- 選中情況的處理
當(dāng)該日期被選中后的表現(xiàn)
其中[[day]]變量為樣式框(根據(jù)情況)的日期。
- 最后
開始寫下一條數(shù)據(jù)脚猾。
所有的這些都寫完后葱峡,日歷組件的核心部分就寫完了,剩下的就是各種動態(tài)交互的工作了龙助。我們可以通過預(yù)覽看到當(dāng)前月份牌的效果:
可以看到默認顯示當(dāng)前月的日歷月份牌砰奕,其中今天被進行了標(biāo)記。
3.2. 翻動月份牌
3.2.1. 通過點擊<
>
按鍵按月翻動月份牌
上月按鈕<
的click
事件
- 更新所選月(varThisDate)參數(shù)標(biāo)簽提鸟,月份減一军援。
- 更新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 this
的click
事件
前兩個set Text
方法向日歷組件的兩個輸入框(其中后邊的輸入框date show不能輸入篓冲,僅僅是顯示)寫入所選日期。
看到非常復(fù)雜北发,這是為了將日期和月份統(tǒng)一顯示為dd和mm格式纹因。
然后對參數(shù)varSelDay
varSelMonth
varSelYear
設(shè)置為當(dāng)前選擇日期的年月日喷屋;
設(shè)置所選日期選中狀態(tài)樣式琳拨;
隱藏月份牌。
3.3.2. day of other
的click
事件
和day of this
的click事件類似屯曹,但是增加了判斷是上個月的日期還是下個月的日期狱庇,針對不同的月份需要分別對varthisDate這個參數(shù)標(biāo)簽文字內(nèi)容進行修改,修改后更新數(shù)據(jù)恶耽。
3.3.3. today
的click
事件
同理密任,設(shè)置today
的click
事件。
3.3.4. 今天
標(biāo)簽的'click`事件
和today
的click
事件一樣偷俭,但是把時間換成now浪讳。
3.4. 手工在date input
輸入日期
當(dāng)輸入日期并按下回車鍵:
現(xiàn)在,一個基本能夠滿足原型設(shè)計需要的日歷組件就設(shè)計完成了涌萤。