小楼axure 图文教程（七）日历元件的制作（图像热区效果）
作者: 小楼一夜听春语示例原型下载：小楼原创元件-日历
实现目标：
1、 点击日历图标出现日期选择面板，点击其中一个预先设定好的日期，日期在文本框显示。
2、点击日历图标中的清空，则删除文本框中的日期。
3、点击今天则文本框日期显示为当前日期（通过变量实现，未接触过变量的同学可略过）。
4、点击关闭，则关闭日期选择面板。
最终效果如下：（看不到动态效果时，请点击图片。）
http://www.soger.net/wp-content/uploads/2013/07/gaollg03-300x219.gif
实现过程：
首先，准备一个文本框，一个日历图标，一个动态面板，一个日期选择面板的图片（示例用图是从百度图片下载的），把这些元件的标签都设置好（不会设置标签参看教程：小楼axure rp教程（一）文本框焦点效果）。
准备好这些，我们就可以开始制作了。
1、双击动态面板，再双击打开状态1，然后，把日期选择图片粘贴到里面，并拖动到左上角的位置，点右键—顺序–设置为最底层。
http://www.soger.net/wp-content/uploads/2013/07/15-185x300.jpg
2、从元件库里面拖出四个图片热区，分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。
http://www.soger.net/wp-content/uploads/2013/07/26.jpg
3、分别设置每个热区的鼠标点击事件。
A点击清空上的热区时，删除日期文本框的文字。
http://www.soger.net/wp-content/uploads/2013/07/33-300x132.jpg
B点击今天上的热区时，调用系统日期变量[]-[]-[]，将当前日期填入文本框。如果要是填前一天的就是[]-[]-[]喽，当天是月初1号，就是[]-[]-[]。然后设置动态面板隐藏，可以加上500毫秒淡入淡出的动画效果。
http://www.soger.net/wp-content/uploads/2013/07/43-300x168.jpg
（设置动态面板隐藏的图就不截了，不会的参照C步骤）
C点击关闭上的热区时，设置隐藏动态面板。
http://www.soger.net/wp-content/uploads/2013/07/51-300x161.jpg
D点击日期数字上的热区时，直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。
http://www.soger.net/wp-content/uploads/2013/07/61-300x214.jpg
4、回到主页面给日历图标也加个鼠标点击事件，当鼠标点击时，切换动态面板可见性。
http://www.soger.net/wp-content/uploads/2013/07/7-300x146.jpg
5、在动态面板上点右键—编辑选项—设为隐藏。
http://www.soger.net/wp-content/uploads/2013/07/8-300x271.jpg
6、生成原型检验效果。
本文出自 诉客 ▪ 产品经理的心声，转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/109.html 学习了，变量一直不怎么会用！ 没有源文件下载啊。。。 没有源文件下载啊。。。
lbzxy 发表于 2014-1-15 13:49 http://www.hiaxure.com/images/common/back.gif
已经下载学习了，感谢。 这个控件不是很有用呢，没法任意选择某年某月某日的日期。 4# 蔡斌 在哪里下载的？请问可以分享一下吗？
页:
[1]