Axure 制作动态日历记录

Axure 制作动态日历记录,第1张

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

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

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

第一步:显示日历

显示内容:当前年份月份,以及日期。年份月份都很好知道,通过电脑系统即可知道当前年份和月份,方法:获取年份,[[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对应的是月份数。

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

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

第二步:改变年份和月份

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

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

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

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

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

火狐浏览器不支持,谷歌浏览器支持。详细各浏览器对Axure文本框控件11种类型支持情况,请参阅如下文章:http://blog.sina.com.cn/s/blog_4a7ef11b0102v0by.html

1、首先双击图标打开Axure RP软件。

2、然后会看到界面,左侧默认有个空白项目,右击页面标题可以更改名称。

3、然后会看到左侧有各种控件,可以直接按住鼠标拖动到右侧页面中。

4、点击右侧页面中的控件之后,可以看到会激活上面的菜单工具,可以对控件各种参数进行调整。

5、想要预览项目可以按F5快捷键,或者上面的预览按钮。

6、或者在“发布”菜单的子菜单中也可以找到“预览”按钮。

7、


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11612874.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存