axure教程之八日历控件的制作：[8]图像的热区

制作的日历控件，基本上能实现日历控件在网页的基本功能，例如点击日历图标出现日期选择面板，点击其中一个预先设定好的日期，日期在文本框显示.点击日历图标中的清空，则删除文本框中的日期。点击关闭，则关闭日期选择面板。

操作方法

  • 01

    打开工具,从左侧元件库中拖拽一个动态面板

  • 02

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

  • 03

    拖拽图片到动态面板区域,调整好大学

  • 04

    从左侧元件库里面拖出四个图片热区，分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上,下图我设置了一个热区,大家要做的话要全部设置上其他热区

  • 05

    分别设置热区的点击事件(如何设置点击事件大家看前几节课),点击清空上的热区时，删除日期文本框的文字

  • 06

    点击今天上的热区时，调用系统日期变量[[Year]]-[[Month]]-[[Day]]，将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽，当天是月初1号，就是[[Year]]-[[Month-1]]-[[Day-1]]。

  • 07

    点击关闭上的热区时，设置隐藏动态面板。点击确定

  • 08

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

  • 09

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

  • 10

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

  • 11

    生成原型界面,即可看到效果了

赞 (0)

相关推荐

  • excel怎么插入日历控件

    excel怎么插入日历控件? 1.首先,打开Excel 2007软件,然后在表格的最左上角有一个office按钮,然后鼠标右键点击,如图.然后在弹出的对话框选择"自定义快速访问工具栏&quo ...

  • WPS表格怎么插入日历控件?

    wps表格中想要添加日历控件来输入日期,可以使用开发工具中的日历控件控件.该怎么使用日历控件呢?请看下文详细介绍. 1.打开WPS软件,在表格中创建一个简单的表格,在单元格中的输入数据,比如图书借阅表 ...

  • Excel2010表格中如何增添日历控件

    Excel2010表格中如何增添日历控件

    今天,小编给大家介绍Excel2010表格中增添日历控件的方法,希望对大家有所帮助.具体如下:1. 首先,请大家打开电脑,然后打开目标表格,接着选择屏幕左上方的[文件],接着选择[选项].2. 第二步 ...

  • wps表格没有日历控件

    wps表格没有日历控件

    office软件是大家使用率很高的软件,在以往的execl版本中添加日历控件很方便,但是在execl2016-64位的版本中,并不能够直接找到相关控件.想知道怎么办,请诸君往下戳 ......添加开发 ...

  • excel2016没有日历控件怎么办 如何添加日历控件

    在编辑Excel文档的时候,想要使用excel2016的日历控件,发现在哪里都没有找到,在哪里添加excel2016的日历控件呢?下面就一起来看一下操作方法吧. 操作方法 01 打开需要编辑的exce ...

  • 选择日期Excel日历控件将日期插入到指定单元格

    在Excel中如何实现选择日历控件,就将日期插入到指定的单元格? 操作方法 01 请跟随如下操作: 在EXCEL窗口中执行"视图"→"工具栏"→"控件 ...

  • 如何在Excel工作表中插入日历控件？

    日历控件可以提供快速地日期选择,可以通过以下步骤在Excel工作表中插入日历控件. 操作方法 01 单击"开发工具"选项卡下的"控件"工作组中的"插入 ...

  • 介绍几个js日历控件

    这三款js日历控件非常精美漂亮,推荐给大家下载代码,自己使用,下面还有一个仿Vista的日历控件,大家也可以看看! 操作方法 01 这个js日历代码的优势是:代码简介明了,方便用户使用修改. js日历 ...

  • wps演示教程:妙用控件工具在幻灯片里播放网络视频

    运用之妙 存乎一心 ——妙用控件工具在幻灯片里播放网络视频 伴随着网络带宽的不断提高，视频点播已经成为互联网的主流娱乐项目之一。在海量的网络视频里有许多优质的教学素材。使用常规方法插入网络视频至少要解 ...