中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

?昨天看了大神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

作者：Lprecious，成長中的產品汪

本文由 @Lprecious 原創發布于人人都是產品經理。未經許可，禁止轉載。