小楼axure 图文教程(七)日历元件的制作(图像热区效果)

AxureRP6.5教程 小楼一夜听春语 141350℃ 0评论

示例原型下载:小楼原创元件-日历

实现目标:

1、 点击日历图标出现日期选择面板,点击其中一个预先设定好的日期,日期在文本框显示。

2、点击日历图标中的清空,则删除文本框中的日期。

3、点击今天则文本框日期显示为当前日期(通过变量实现,未接触过变量的同学可略过)。

4、点击关闭,则关闭日期选择面板。

最终效果如下:(看不到动态效果时,请点击图片。)

gaollg0

实现过程:

首先,准备一个文本框,一个日历图标,一个动态面板,一个日期选择面板的图片(示例用图是从百度图片下载的),把这些元件的标签都设置好(不会设置标签参看教程:小楼axure rp教程(一)文本框焦点效果)。

准备好这些,我们就可以开始制作了。

1、  双击动态面板,再双击打开状态1,然后,把日期选择图片粘贴到里面,并拖动到左上角的位置,点右键—顺序--设置为最底层。

1

2、  从元件库里面拖出四个图片热区,分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。

2

3、  分别设置每个热区的鼠标点击事件。

A点击清空上的热区时,删除日期文本框的文字。

3

B点击今天上的热区时,调用系统日期变量[[Year]]-[[Month]]-[[Day]],将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽,当天是月初1号,就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏,可以加上500毫秒淡入淡出的动画效果。

4

(设置动态面板隐藏的图就不截了,不会的参照C步骤)

 

C点击关闭上的热区时,设置隐藏动态面板。

5

D点击日期数字上的热区时,直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。

6

4、  回到主页面给日历图标也加个鼠标点击事件,当鼠标点击时,切换动态面板可见性。

7

5、  在动态面板上点右键—编辑选项—设为隐藏。

8

6、  生成原型检验效果。

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure 图文教程(七)日历元件的制作(图像热区效果)

喜欢 (6)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 写的很好!感谢
    duan2014-06-18 16:53 回复