Axure 制作动态日历记录

最近学习Axure的使用,学到制作自己的元件,又恰好客户制作的原型中需要用到日历,就想到自己制作一个动态变化的日历表,添加到“我的原件”中,于是,我就开始了研究。。。

首先看一下效果:第一张图为界面原始效果,第二张图为点击箭头之后的变化图。


2017年9月份日历
2017年10月份日历

首先我们得知道客户使用日历的先后顺序:显示日历——选择年份月份——选择日期

第一步:显示日历

显示内容:当前年份月份,以及日期。年份月份都很好知道,通过电脑系统即可知道当前年份和月份,方法:获取年份,[[Now.getFullYear()]];获取月份,[[Now.getMonth()]];

显示日期就比较麻烦了,要确定每月第一天是星期几,确保每一个单元格内容正确显示,经过多次尝试最终得出正确打开方式:

计算每月第一天:

蔡勒(Zeller)公式:w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1;w:星期;c:世纪-1;y:年(两位数);m:月(m大于等于3,小于等于14,即在蔡勒公式中,某年的1、2月要看作上一年的13、14月来计算,比如2003年1月1日要看作2002年的13月1日来计算);d:日;[ ]代表取整,即只要整数部分。(C是世纪数减一,y是年份后两位,M是月份,d是日数。1月和2月要按上一年的13月和 14月来算,这时C和y均按上一年取值。)

蔡勒公式得出的结果除以7 取余,余数即为每月第一天对应的是星期几,如:2017年09月第一天为星期五。

需要注意的是:蔡勒公式计算中  取整  问题,Axure  里面没有取整计算方式,所以我一开始使用的是  [[LVAR.toFixed(0)]],这个方法是保留0位小数,在一开始的设计中,九月份能正常显示,但是十月份第一天就往后推一天(本来是周日,变成周一),后来查资料发现这个公式有四舍五入的效果,而恰好在蔡勒公式中的  [26(m+1)/10]  在十月份的时候是28.6,那么在最终结果上就多出“1”,所以十月份第一天就往后推了一天;问题找到,解决问题:将  [[LVAR.toFixed(0)]]  替换为  [[LVAR.split('.',1)]]。该函数意为:将字符串以“.”分割为1个字符串数组,成功解决问题。

在单元格中正确显示日期:将每个单元格设置名称,从第一个个开始设置为1,第二个设置为2,第三个设置为3,第四个。。。,以此类推,将所有单元格设置名称(星期所在单元格除外)。给每个单元格赋值:[[This.name-MinuendNumber]],This指的是当前单元格;

完成以上内容基本上可以实现日历显示,只不过我们还需注意各个事件的先后顺序,以及事件的执行时机,进过诸多尝试得出如下执行顺序:显示年份月份的控件:执行    载入时   获取年份月份,获取蔡勒公式中需要的C和Y,并对控件赋值。执行   文本改变时   给月份赋值,同时将日历表显示。

控件载入时


文本改变时

说明:X对应的是蔡勒公式中的年份,Y对应的是蔡勒公式中的世纪数(世纪数不需要减一)。Z对应的是月份数。

日历表:执行  显示时   ,判断月份,根据月份设置月份天数,计算月份第一天的星期数,改变所有单元格的选中状态;


日历表显示时


显示时Case1

单元格:执行  选中改变时  根据 [[This.name-MinuendNumber]] 结果来判断单元格赋值情况,执行   鼠标单击时  给某一控件赋值。这个就很随意了,直接将单元格内容赋值到某一控件。

第二步:改变年份和月份

这一步是整个日历表最重要的一部分,他是实现日历表动态变化的关键。仅以左侧箭头来说明问题:执行   鼠标单击时  事件:根据月份来判断年份和月份的增减,给显示年月的控件重新赋值,日历表隐藏,日历表显示;


箭头-鼠标单击时

说明:左侧箭头“减”:Case1:月份等于1时,年份减少,月份为12月;Case2:月份大于1时改变月份。

到这,一个完整的日历表就完成了,下面给一个事件执行顺序图,以帮助大家的理解。


事件执行顺序图

另外,需要注意的是单元格点击事件需要作出判断,单元格内容为空的时候作出合理的操作。

实际上在大多数的原型设计中不需要这么复杂的功能设计,只需要展示即可,单复杂的设计有助我们去理解Axure中事件执行的先后顺序,函数的功能等等,所以没事的时候不妨自己设计几个比较好玩的控件也是不错的!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容