Axure教程:使用中继器和动态面板制作自定义下拉框(一) 获赏110金币 案例教程 基础教程

人隐江湖 普通用户 2019-11-11 13807

本系列教程主要介绍如何使用中继器和动态面板制作自定义下拉框,包括基础下拉框、带搜索下拉框、多级联选框、时间选框等。因篇幅和时间关系,教程分为多个章节。

本章节介绍如何制作基础下拉框,首先效果图:

演示链接:http://cloud.axureshop.com/DXJ6HJ/

文章主要分为绘制元件、添加交互、文章小结三部分


一、绘制元件

1.  【选框】:绘制一个文本框,命名为“Select”,属性设置为“只读”

    设置文本框“Select”交互样式:【获取焦点】改变线段颜色(Axure9新增功能,其他版本可使用矩形的【选中】效果实现);

2.  【标识】:绘制一个下拉的图标,命名为“Icon”;


3.  【滚动条】:  绘制一个动态面板,命名为“Panel”;属性设置为“垂直滚动”,并隐藏

    设置动态面板Panel”的线段颜色(Axure9新增功能,其他版本可在动态面板中添加矩形实现);

4.  在动态面板“Panel”中绘制一个中继器,命名为“Repeater”,将中继器Repeater中的矩形命名为“Option”,在中继器Repeater中添加备选数据;

    设置矩形Option”的交互样式:【悬停】改变填充颜色;


二、添加交互

1.  为文本框“Select”的【单击时】事件添加动作:【显示】动态面板“Panel”,效果为“置于顶层”、“灯箱效果”(必须设置灯箱效果,否则交互有问题

2.  为动态面板“Panel”的【显示时】添加动作:【旋转】图标“Icon”,效果为“顺时针180度”、“缓进缓出300ms”

     为动态面板“Panel”的【隐藏时】添加动作:【旋转】图标“Icon”,效果为“逆时针180度”、“缓进缓出300ms”;

3.  为矩形“Option”【单击时】事件添加动作:【设置文本】 文本框“Select”为中继器“Repeater”中的“[[Item.Option]]”;【隐藏】动态面板“Panel”

三、文章小结

1.  使用文本框元件作为【选框】是为了后续交互中使用【文本改变时】事件,若没有后续交互也可使用矩形元件;

2.  在中继器“Repeater”中添加辅助列可实现更多的自定义效果,如选中效果、禁用效果、默认效果等。

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 100金币
第2名 沈十三 10金币
最新回复 (567)
  • 刘壮壮Lib 普通用户 8天前
    0 引用 568
    感谢分享
  • 爱才七元钱 普通用户 21天前
    0 引用 567
    感谢
  • 18365450952 普通用户 2月前
    0 引用 566
    666
  • 张哈哈LIVE 普通用户 2月前
    0 引用 565
    谢谢
  • lslan 普通用户 2月前
    0 引用 564
    感谢
  • zjlcstar 普通用户 3月前
    0 引用 563
    感谢分享
  • yq001 普通用户 3月前
    0 引用 562
    感谢大佬分享
  • 18314761797 普通用户 3月前
    0 引用 561
    1
  • Ethel1 普通用户 3月前
    0 引用 560
    感谢
  • Ethel1 普通用户 3月前
    0 引用 559
    感谢
  • axure狂热 普通用户 4月前
    0 引用 558
    感谢
  • walker411 普通用户 4月前
    0 引用 557
    111
  • Wang121 普通用户 4月前
    0 引用 556
    111
  • abisstr 普通用户 5月前
    0 引用 555
  • Alisa_Axure 普通用户 5月前
    0 引用 554
    感恩分享
  • Onismmee 普通用户 5月前
    0 引用 553
    好东西,支持啊支持
  • 13524164198 普通用户 5月前
    0 引用 552
    1
  • kicyan 普通用户 6月前
    0 引用 551
    nice!!!
  • aceyy 普通用户 6月前
    0 引用 550
    666
  • parabens 普通用户 6月前
    0 引用 549
    66
  • uiiiiiii 普通用户 6月前
    0 引用 548
    感谢分享
  • NNNN 普通用户 7月前
    0 引用 547
    感谢,6666
  • learnAx 普通用户 7月前
    0 引用 546
    感谢分享
  • lwq20144389 普通用户 7月前
    0 引用 545
    感谢分享
  • 雪域孤帆 普通用户 7月前
    0 引用 544
    感谢分享
  • yujiabian 普通用户 7月前
    0 引用 543
    6666
  • 董子雨 普通用户 2022-6-23
    0 引用 542
    适用
  • cyt 普通用户 2022-6-22
    0 引用 541
    非常感谢
  • 20220322 普通用户 2022-6-16
    0 引用 540
    谢谢
  • 20220322 普通用户 2022-6-16
    0 引用 539
    感谢
  • tuchengen 普通用户 2022-6-7
    0 引用 538
    感谢分享
  • lalalalalala 普通用户 2022-6-1
    0 引用 537
    谢谢
  • 是吗 普通用户 2022-5-28
    0 引用 536
    111
  • liu113520 普通用户 2022-5-26
    0 引用 535
  • demo1 普通用户 2022-5-25
    0 引用 534
    11
  • demo1 普通用户 2022-5-25
    1 引用 533
    11 
  • tdh 普通用户 2022-5-25
    0 引用 532
    666
  • BodenX 普通用户 2022-4-20
    0 引用 531
    前来学习
  • 流水线 普通用户 2022-4-13
    0 引用 530
     感谢
  • ahahaha 普通用户 2022-4-13
    0 引用 529
    超级棒!
  • 啊汤 普通用户 2022-4-2
    0 引用 528
    感谢分享
  • zryany 普通用户 2022-3-31
    0 引用 527
    感谢分享!
  • 栗子荔枝傻傻分不清楚 普通用户 2022-3-30
    0 引用 526
    感谢博主
  • 6932qwe 普通用户 2021-12-17
    0 引用 525
    感谢分享
  • zhangqe 普通用户 2021-12-16
    0 引用 524
    感谢收下膝盖
  • 耳又又 普通用户 2021-12-14
    0 引用 523
    感谢分享
  • mingri 普通用户 2021-12-13
    0 引用 522
    感谢分享
  • demo123 普通用户 2021-12-2
    0 引用 521
    谢谢
  • 呼噜呼噜毛 普通用户 2021-11-28
    0 引用 520
    感谢
  • eyeoner 普通用户 2021-11-28
    0 引用 519
    靠谱
  • yinshi1989 普通用户 2021-11-26
    0 引用 518
    谢谢分享
  • ningpd 普通用户 2021-11-26
    0 引用 517
    感谢分享
  • boylilz 普通用户 2021-11-21
    0 引用 516
    666
  • 花夏 普通用户 2021-11-19
    0 引用 515
    最后一步没法实现  效果还是不对
  • root111 普通用户 2021-11-18
    0 引用 514
    感谢
  • teletubby 普通用户 2021-11-17
    0 引用 513
    感谢分享
  • 下相 普通用户 2021-11-15
    0 引用 512
    ganxiefenxiang
  • salmon501 普通用户 2021-11-11
    0 引用 511
    cool
  • 脸蛋天才 普通用户 2021-11-10
    0 引用 510
    谢谢啦
  • mianshi 普通用户 2021-11-10
    0 引用 509
     赞赞
  • 杨532111 普通用户 2021-11-9
    0 引用 508
    感谢分享
  • Alohayoung 普通用户 2021-11-9
    0 引用 507
    太感谢分享了
  • huixiusnow 普通用户 2021-11-4
    0 引用 506
    感谢分享  就是不知道最后那个文本框怎么获取到option的值
  • august33 普通用户 2021-11-2
    0 引用 505
    感谢
  • 18080241296 普通用户 2021-11-2
    0 引用 504
    谢谢
  • jiabin 普通用户 2021-11-1
    0 引用 503
    感谢分享
  • lilin2009 普通用户 2021-10-29
    0 引用 502
    感谢分享
  • 丁少 普通用户 2021-10-29
    0 引用 501
    感谢分享
  • huihui0606 普通用户 2021-10-27
    0 引用 500
    感谢分享
  • 样子 普通用户 2021-10-27
    0 引用 499
    遇见
  • huibo 普通用户 2021-10-25
    0 引用 498
    感谢分享
  • dddy 普通用户 2021-10-25
    0 引用 497
    谢谢
  • tangzw 普通用户 2021-10-19
    0 引用 496
    感谢分享
  • 新梦 普通用户 2021-10-14
    0 引用 495
    感谢分享
  • 随遇而安sd 普通用户 2021-10-11
    0 引用 494
    感谢分享
  • 随遇而安sd 普通用户 2021-10-11
    0 引用 493
    感谢分享
  • Kolar 普通用户 2021-10-10
    0 引用 492
    感谢分享
  • Helel 普通用户 2021-9-25
    0 引用 491
    感谢分享
  • linmingeng 普通用户 2021-9-14
    0 引用 490
    谢谢哒
  • kl8375 普通用户 2021-9-7
    0 引用 489
    感谢分享
  • jhin001 普通用户 2021-9-7
    0 引用 488
    谢谢
  • qyfn 普通用户 2021-9-6
    0 引用 487
    非常感谢分享
  • Dave4396 普通用户 2021-9-6
    0 引用 486
    感谢
  • hepengdashuaige 普通用户 2021-9-3
    0 引用 485
    666
  • zjl0713 普通用户 2021-8-30
    0 引用 484
    好 谢谢
  • 丹尘子 普通用户 2021-8-26
    0 引用 483
    666666
  • ALIWENG 普通用户 2021-8-19
    0 引用 482
    好的
  • syq123 普通用户 2021-8-17
    0 引用 481
    niu a 
  • kvadrat88 普通用户 2021-8-10
    0 引用 480
    谢谢
  • 2285532987 普通用户 2021-7-28
    0 引用 479
    谢谢大佬!
  • 马保国 普通用户 2021-7-22
    0 引用 478
    谢谢你
  • fangjx1024 普通用户 2021-7-21
    0 引用 477
    谢谢分享
  • 宝贝不哭 普通用户 2021-7-9
    0 引用 476
    666666666666
  • hanliang 普通用户 2021-6-23
    0 引用 475
    感谢分析
  • wowo 普通用户 2021-6-21
    0 引用 474
    感谢分享
  • pcaaa711 普通用户 2021-6-21
    0 引用 473
    感谢分享
  • BensonBenson 普通用户 2021-6-16
    0 引用 472
    感谢分享
  • lbbbbb 普通用户 2021-6-10
    0 引用 471
    666666
  • mimibighouse 普通用户 2021-6-4
    0 引用 470
    感谢
  • leoyao 普通用户 2021-6-1
    0 引用 469
     get
返回