Aure 教程 | 详解实践日历中继器

2017-03-10 09:53:00

昨天看了大神RAEDME大鹏的中继器日历原型讲解，平时很少用到这些高级的，跃跃欲试。利用昨天的女神假期，原理+实践，尝试做出了这个日历，将详细的实践步骤分享给大家~

相信很多和我一样的，看了大神的原理，却苦于难实现的，捂脸jpg。大神的实践讲解总是很少。。。

准备工作，打开你电脑的axure，拉出两个控件（表格和中继器），表格保留一行，左右填充“上月”和“下月”，中间命名为“当前”；再拉出一个表格，保留一行7列，分别填充“日一二三四五六”，设置单元格4040（这个大小随意设置）；中继器命名为“日历”，双击中继器，进入详细页面，设置矩形为4040（宽度与星期的单元格保持一致，美观），命名为“日历详情”，给方格添加交互状态（选中控件，右键，添加鼠标划入，选中，禁用的状态），中继器属性区添加42行空白内容，中继器样式选择水平布局，每行7个（对应周日-周六）。

以上，准备部件放置完成，请看下图实践：

接下来详细说明下实践原理，看过大神的原理介绍并能吃透的，自动下滑页面看实践，如果连实践也会的，那你就关了此页面吧（不要看妹纸献丑了，捂脸.jpg）

原理篇

原型分成上下两部分，上面控制月份变化，下面控制对应月份的详细日期显示。

页面加载完成后，日历显示当前月份日期，当前时间（举栗子：2017/3/9），当天时间被选中高亮，非当月时间置灰（实现的是显示当前月份内容）。点击”上月“和”下月“，”当前“单元格的时间与下方日历随之变化。

实现上会用到几个日期函数：Now，getDate（），getDay（），getMonth（），addMonths（months），addDays（days），toLocalDateString（），index。

Now：返回当前时间详细值，栗子：Thu Mar 09 2017 10:51:59 GMT+0800 (中国标准时间)
getDate（）：返回月的日期，栗子：9，今天是9号
getDay（）：返回日期是一周中的第几天（返回值为0-1，对应日-六），栗子：4，今天是周四
getMonth（）：返回日期所在月份，栗子：3，这个月是3月份
addMonths（months）：对月份进行加减，前一个月后一个月的变化，括号内的months数值可正可负，正代表月份向未来变化，负代表月份向过去变化
addDays（days）：对日期进行加减，前一天后一天的变化，括号内的days数值可正可负，正代表日期向未来变化，负代表日期向过去变化
toLocalDateString（）：将时间详细值转化为可读的”年月日“字符串，栗子：Now的时间”Thu Mar 09 2017 10:51:59 GMT+0800“，变成”2017/3/9“
index：位置排序的索引数值，栗子：42个方格，当前选中是第16个放个，则返回16
PS：日期函数示例http://share.yuanxingku.com/tutorial/datefunctions/# p=date_functions

页面添加3个全局变量，表示当前日期的变量”Date_Now“，表示当前日期所在月份的1号日期的变量”Date_Now_1“，表示1号日期的索引序值的变量”Date_Now_1_Index“

Date_Now_1的日期=Date_Now的日期+/-相差的天数，Date_Now的日期=Now获得的数值，相差天数=1-Date_Now的日期，栗子：今天9号，与1号相差8天，即8=9-1
函数表达：Date_Now_1=[[Date_Now.addDays（1-Date_Now.getDate（））]]
getDay（）的”日-六“对应返回”0-6“，首行的索引数值为”1-7“，即索引数值=”0-6“+1（假定了每月的1号出现在第一行或者第二行），Date_Now_1_Index的数值=Date_Now_1的索引值
函数表达：Date_Now_1_Index=[[Date_Now_1.getDay（）+1]]
其他日期=日期+/-与1号日期的差值天数，与1号日期的差值天数=其他日期的索引值-Date_Now_1_Index
函数表达：其他日期=[[其他日期.addDays（Item.index-Date_Now_1_Index）.getDate（）]]

原理绕了一圈，估计你可能有点”黑人问号脸“（我自己都有点绕蒙B了。。。）

下面进行实践，实践与原理对应起来了，就会豁然开朗了~