日历部件在工作中是一个通用的部件,比如说像旅游网站,网站后台日期的选择。 Axure里面有一个简单制作日历部件的方法,就是使用文本框部件,将文本框部件的类型选择为日期。预览之后,点击就可以看到日期选择的效果。这种方式做的日期选择器在样式方面比较单一,如果你的要求很简单的话,可以直接用这个。那如果需要做一个比较精美的日历,这个就满足不了了。如果是借助已经日历的图片,可以怎么做呢? 我们做这个日期选择器要具体要有什么效果呢?来看看 1、点击日历图标出现日期选择面板,点击其中一个日期,日期在文本框显示。2、点击清空按钮,删除文本框中的日期。3、点击今天,在文本框中显示当前日期。4、点击关闭,关闭日期选择面板。先把元素准备好,一个文本框,一个日历图标,一个日期选择的图片,一个清空按钮,一个今天按钮,一个关闭按钮。搭建好我们需要的界面。 准备好之后,就可以根据我们的实现效果去做交互了。 1、 把日历图片和今天、关闭按钮组合一下,并且设置为隐藏。在点击日历图标的时候把这个组合显示出来就行了。 要对日期做选择,先把隐藏状态取消。从部件库里面拖出热区部件,调整成合适的大小后覆盖要选择的日期数字上。这里以7号8号做范例,大家可以用其他的日期。在热区的单击时时间上做交互设置,设置文本框的文字为“2013-8-7”和“2013-8-8”2、清空日期。主要在清空按钮上设置文本框值为空就行了,设置参考前面一步,只需把值删除掉就行了。 3、点击今天按钮,调用系统日期变量[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()]],将当前日期填入文本框。直接就可以获取到当天的日期了。 如果是选择设置今天的前一天,前一月等其他日期,只需要在现在的这个获取时间的表达式上做一点修改就行了。比如前一天,就将具体的日减去一天即可,完整的表达式就是:[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()-1]] 4、点击关闭,隐藏日期选择组合。这个交互设置好之后,千万不要忘记,将日期选择组合再改为隐藏。 到这里交互就全部都做好了。来看看完整的效果是怎么样的吧这里我们直接用的是图片做的,在制作上可以节省很多时间。如果你想要自己搭建整个界面,当然是没有问题的,制作的思路与这个是一样的,相信大家可以做得比这个更好。
0 评论