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

​本次教程学习制作时间控件选择,根据选择的日期,在输入框中显示所选择的日期。制作内容包括携程网的酒店“入住日期”时间控件与“退房日期”时间控件。部件使用:动态面板、图片、矩形、文本框(单行)、单行文本、垂直线;交互事件:鼠标点击时、获得焦点时;动作:设置面板状态为指定状态、设置部件显示/隐藏、设置文本;时间控件交互描述:常用于选择日期。如酒店入住与退房日期选择,旅游出发日期,日程安排等场景。步骤1:新建文档新建文档,并点击“文件>保存”,保...
摘要由CSDN通过智能技术生成

 

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

部件使用:动态面板、图片、矩形、文本框(单行)、单行文本、垂直线;

交互事件:鼠标点击时、获得焦点时;

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

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

步骤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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值