本次教程学习制作时间控件选择,根据选择的日期,在输入框中显示所选择的日期。制作内容包括携程网的酒店“入住日期”时间控件与“退房日期”时间控件。
部件使用:动态面板、图片、矩形、文本框(单行)、单行文本、垂直线;
交互事件:鼠标点击时、获得焦点时;
动作:设置面板状态为指定状态、设置部件显示/隐藏、设置文本;
时间控件交互描述:常用于选择日期。如酒店入住与退房日期选择,旅游出发日期,日程安排等场景。
步骤1:新建文档
新建文档,并点击“文件>保存”,保存为“时间控件”(文件名自定义),如图1
图1
第一部分:
制作“入住日期”时间控件
在制作之前,先了解一下“入住时间”这个时间控件是由以下部分构成的:单行文本框、日历,点击单行文本框弹出的日历面板有2个月的日历,可以点击左上角的切换按钮向左切换,点击右上角的向右切换按钮向右切换。这次制作的时间控件的日历会包括1月与2月,3月与4月,5月与6月。
步骤2:添加标题“入住日期”事件
在部件库找到“线框图>公共”选择“单行文本”,然后拖曳到线框图中,双击“单行文本”修改为“入住日期”;如图2、图3:
图2
图3
步骤3:添加文本框(单行)事件
在部件库中找到“线框图>窗体”选择“文本框(单行)”拖曳到线框图中“入住时间”的右边(如图3);选中该文本框,在文本框中输入当前日期:2014-03-29,并在“部件交互和注释”中把该文本框(单行)命名为“入住时间”,如图4、图5:
图4
图5
步骤4:添加表格事件
在部件库>线框图>菜单和表格中选择“表格”拖曳到线框图中“入住日期”文本框的下方。如图6:
图6
步骤5:日历制作
每周7