Axure 进阶 | 制作携程网酒店“入住日期”与“退房日期”控件

​

 

本次教程学习制作时间控件选择，根据选择的日期，在输入框中显示所选择的日期。制作内容包括携程网的酒店“入住日期”时间控件与“退房日期”时间控件。

部件使用：动态面板、图片、矩形、文本框（单行）、单行文本、垂直线；

交互事件：鼠标点击时、获得焦点时；

动作：设置面板状态为指定状态、设置部件显示/隐藏、设置文本；

时间控件交互描述：常用于选择日期。如酒店入住与退房日期选择，旅游出发日期，日程安排等场景。

步骤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天，故在3列的原基础上添加4列：选中任意一个表格右击拉出右击菜单，选择“在右侧插入列（R）”，重复3次&