axure教程之八日历控件的制作:[8]图像的热区
1、打开工具,从左侧元件库中拖拽一个动态面板
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/05e24be983aee8d77e4d645b6b781431deb666ff.jpg)
2、双击动态面板,再双击打开状态1,然后,把日期选择图片粘贴到里面,并拖动到左上角的位置,点右键—顺序–设置为最底层
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/e2aefe781431dfb61e0bd0d212cf02532e6363ff.jpg)
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/562787cf02532f6312e26782699147e832e05cff.jpg)
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/e3d059e833e039720a643c5eb5863048604356ff.jpg)
3、拖拽图片到动态面板区域,调整好大学
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/31097f43d7d448313a8c7113d40f822b75ee51ff.jpg)
4、从左侧元件库里面拖出四个图片热辨泔矣嚣区,分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上,下图我设置了一个热区,大家要做的话要全部设置上其他热区
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/836a6aee1c324b18144b0b4553a72633498448ff.jpg)
5、分别设置热区的点击事件(如何设置点击事件大家看前几节课),点击清空上的热区时,删除日期文本框的文字
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/49c5d3e34b2c56ee361801baf775e5f4fdf540ff.jpg)
6、点击今天上的热区时,瓢遥费涓调用系统日期变量[[Year]]-[[Month]]-[[Day]],将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]柯计瓤绘]-[[Day-1]]喽,当天是月初1号,就是[[Year]]-[[Month-1]]-[[Day-1]]。
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726b5a85e253bf0f64781523b9ff.jpg)
7、点击关闭上的热区时,设置隐藏动态面板。点击确定
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/2083a5d6e1d06de8fb060191ca93cee8b104acff.jpg)
8、点击日期数字上的热区时,直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/5e615d715fdb36203b5d4a3dabc5260f89358dff.jpg)
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/8974c38a59de45070266bfc45e413a8ca70885ff.jpg)
9、回到主页面给日历图标也加个鼠标点击事件,当鼠标点击时,切换动态面板可见性
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/a44e8afc508c9bce549f0dc3d6dd884ce44afaff.jpg)
10、在动态面板上点右键—编辑选项—设为隐藏。
![axure教程之八日历控件的制作:[8]图像的热区](https://exp-picture.cdn.bcebos.com/e6ae36066b0192ddae2731471a87031c98c0f0ff.jpg)
11、生成原型界面,即可看到效果了
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:49
阅读量:36
阅读量:74
阅读量:55
阅读量:36