您现在的位置:主页 > 网站制作 > 界面设计 >

常用交互实例:axure常用交互实例日历控件

来源:建站吧 责任编辑:Jzq8 发表时间:2012-01-09 点击:

上次分享了一个Axure常用交互实例带提示文本框和拖拽物的教程,有不少网站有转载,说明内容还是有点价值的。今天分享一个日历控件中的一个常用交互实例:选择日期。

1.日历控件

第一步:

从控件库中拖出两个文本面板和一个矩形框。一个文本面板控件中输入“选择日期”(标签命名为文本1),另一个输入一个默认日期(标签命名为文本2),编辑文本框控件的属性为:文本框。

第二步:

打开日历控件,这里需要注意下,一般自带控件库中是没有日历控件的,这里可以在网上下载一个,我这里直接用一个之前已经做好的自定义控件:

第三步:

将刚才的日历控件组合成一个控件,右键转化为动态面板,设置标签为:日历控件,将其拖动到文本框下方,设置为隐藏,如图:

2.添加事件

第一步:

点击文本框2,添加OnClick事件,具体设置如下图:

第二步:

双击“日历控件”下的动态面板,选择26添加事件,设置如下图:

1) 设置文本2的值,即选择26时,将选中的值等于文本2;

2) 选中的同时需要隐藏日历控件;

(此处数字随便选取,由于axure本身的局限性,如果想查个多个选中日期的效果,按照此步骤多设置几个数字即可)

第三步:

选中20,重复第二步的操作;(这样选择26号和14号都可以传递到文本2中)

设置好之后点击保存,生成网页就能看到效果了。如果你下载的日历控件有完整月份,那么可以直接把切换月份的交互实例与日期结合,这样整个日历的交互就搞定可,各位可以试试看~~

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    验证码:点击我更换图片

    今日头条

    更多>>

    推荐图文

    • TeamCola信息结构:互联网产品前期设计方法
    • 常用交互实例:axure常用交互实例日历控件
    • 探索图标设计的微观世界:从符号学说起
    • 建立完美的同学录之浅谈同学录的完善包装
    • 百度搜索客户端设计分享:全新的视觉和交互体验
    • 网站设计师在设计网站时应该遵循的原则
    • 网页进度条设计:关于讨论loading加载后的一些心得
    • 网页制作小技巧:揪出网页无效链接
    • 美化网页 制作精美圆角表格
    Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
    Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
    冀ICP备09002514号
    冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款