教程详解实践日历中继器

　　昨天看了大神RAEDME大鹏的中继器日历原型讲解，平时很少用到这些高级的，跃跃欲试。利用昨天的女神假期，原理+实践，尝试做出了这个日历，将详细的实践步骤分享给大家~
　　相信很多和我一样的，看了大神的原理，却苦于难实现的，捂脸jpg。大神的实践讲解总是很少…
　　准备工作，打开你电脑的axure，拉出两个控件（表格和中继器），表格保留一行，左右填充＂上月＂和＂下月＂，中间命名为＂当前＂；再拉出一个表格，保留一行7列，分别填充＂日 一 二 三 四 五 六＂，设置单元格40*40（这个大小随意设置）；中继器命名为＂日历＂，双击中继器，进入详细页面，设置矩形为40*40（宽度与星期的单元格保持一致，美观），命名为＂日历详情＂，给方格添加交互状态（选中控件，右键，添加鼠标划入，选中，禁用的状态），中继器属性区添加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了…）
　　下面进行实践，实践与原理对应起来了，就会豁然开朗了~
　　实践篇
　　开始给准备好的部件添加用例咯~
　　分成三部分来说，上面的控制月份的部件，下面中继器的部件，然后是月份与中继器的结合。
　　在页面载入时，先把3个全局变量赋值，并填充＂当前＂单元格的内容：
　　Date_Now=[[Now]]，获取当前日期
　　Date_Now_1=[[Date_Now.addDays（1-Date_Now.getDate（））]]，获取当前日期月份1号日期
　　Date_Now_1_Index=[[Date_Now_1.getDay（）+1]]，获取1号日期的索引值
　　当前=[[Date_Now.toLocaleDateString()]]，当前日期转化为＂年月日＂格式显示
　　设置上月，下月点击用例，以上月点击为例：
　　Date_Now=[[Date_Now_1.addMonths(-1)]]，当前日期为向过去移动一个月的1号日期
　　Date_Now_1=[[Date_Now_1.addMonths(-1)]]，当前日期月份的1号向过去移动一个月
　　Date_Now_1_Index=[[Date_Now_1.getDay()+1]]，移动一个月后的1号索引位置
　　当前=[[Date_Now.toLocaleDateString()]]
　　下月点击用例同理，将addMonths（-1）修改为addMonths（1）即可。
　　浏览器预览一下吧，看看点击上月，点击下月，当前的时间显示是否有变化呢？
　　接着对中继器添加用例。对当前日期高亮选中，非当月日期置灰禁用。点击中继器，右侧属性＂每项加载时＂添加用例。
　　添加用例1，高亮当前日期：
　　用例条件：[[Date_Now_1.addDays(Item.index-Date_Now_1_Index)]]==[[Date_Now]]，当前中继器的选项正好是当前日期，有点绕口，慢慢理解…
　　满足条件的进行操作：
　　日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期
　　日历详细，启用，鼠标划入有状态变化
　　日历详细，选中状态=true，设置被选中
　　添加用例2，显示当月的日期：
　　用例条件：[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getMonth()]]==[[Date_Now_1.getMonth()]]，当前日期所在月份与1号日期月份相同
　　满足条件的进行操作：
　　日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期
　　日历详细，选中状态=false，设置未选中
　　日历详细，启用，鼠标划入有状态变化
　　添加用例3，非当月的日期置灰：
　　用例条件直接为非以上两种情况，无需添加特殊说明
　　满足条件的进行操作：
　　日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期
　　日历详细，禁用，鼠标划入无效果
　　中继器的用例添加完了，预览下，看看是不是已经能够显示全部日期了呢？
　　接下来，把月份切换与中继器日期显示结合啦~
　　以点击上月为例，点击时，更新中继器的内容，且切换到上一个月时，日期定为到1号且高亮（看下电脑的日期，月份切换时，选中高亮每月1号日期）。
　　选择中继器的＂更新行＂，添加用例，满足条件[[TargetItem.index>0]]更新内容。
　　点击下月同理操作。
　　日历操作就完成了，快去浏览器里预览下吧~
　　原型预览：http://59lgso.axshare.com