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

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

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

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

演示链接: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”中添加辅助列可实现更多的自定义效果,如选中效果、禁用效果、默认效果等。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 100金币
第2名 沈十三 10金币
最新回复 (477)
  • 马保国 普通用户 2天前
    0 引用 478
    谢谢你
  • fangjx1024 普通用户 4天前
    0 引用 477
    谢谢分享
  • 宝贝不哭 普通用户 16天前
    0 引用 476
    666666666666
  • hanliang 普通用户 1月前
    0 引用 475
    感谢分析
  • wowo 普通用户 1月前
    0 引用 474
    感谢分享
  • pcaaa711 普通用户 1月前
    0 引用 473
    感谢分享
  • BensonBenson 普通用户 1月前
    0 引用 472
    感谢分享
  • lbbbbb 普通用户 1月前
    0 引用 471
    666666
  • mimibighouse 普通用户 1月前
    0 引用 470
    感谢
  • leoyao 普通用户 1月前
    0 引用 469
     get
  • Nink778 普通用户 1月前
    0 引用 468
    拿走
  • 胡桃夹子amy996 普通用户 2月前
    0 引用 467
    哈哈好
  • 蓉城阿森 普通用户 2月前
    0 引用 466
    谢谢分享
  • 王者 普通用户 2月前
    0 引用 465
    谢谢分享
  • 告辞 普通用户 2月前
    0 引用 464
    感谢分享
  • 不知道先森 普通用户 2月前
    0 引用 463
    感谢分享
  • Harvin 普通用户 2月前
    0 引用 462
    感谢大佬
  • 谢菻 普通用户 2月前
    0 引用 461
    谢谢大佬分享!
  • zzcdiv 普通用户 2月前
    0 引用 460
    hao
  • momoo 普通用户 2月前
    0 引用 459
    谢谢分享
  • lingers 普通用户 2月前
    0 引用 458
    学习了
  • arvin 普通用户 2月前
    0 引用 457
    感谢大佬分享
  • vikichien 普通用户 3月前
    0 引用 456
    不错!
  • cumtyear 普通用户 3月前
    0 引用 455
    感谢分享
  • 贺兰 普通用户 3月前
    0 引用 454
    漂亮
  • 吉米 普通用户 3月前
    0 引用 453
    感谢
  • Jack888 普通用户 3月前
    0 引用 452
    感谢分享,感谢大佬
  • byewenzi 普通用户 3月前
    0 引用 451
    感谢分享
  • 本人是天才 普通用户 3月前
    0 引用 450
    感谢大佬分享教程和素材
  • 1449982477 普通用户 3月前
    0 引用 449
    ganxieenx
  • 茅嘉懿他老子 普通用户 3月前
    0 引用 448
    666
  • lunayt 普通用户 3月前
    0 引用 447
    感谢分享
  • doudouken 普通用户 3月前
    0 引用 446
    谢谢
  • Sapphire266366 普通用户 3月前
    0 引用 445
    谢谢
  • peterbug 普通用户 4月前
    0 引用 444
    x谢谢楼主分享
  • 15723037535 普通用户 4月前
    0 引用 443
    感谢感谢
  • vibe 普通用户 4月前
    0 引用 442
    谢谢大佬
  • ttadmin 普通用户 4月前
    0 引用 441
    谢谢分享
  • 坨坨 普通用户 4月前
    0 引用 440
    感谢分享
  • sunpoo 普通用户 4月前
    0 引用 439
    谢谢
  • 初七和芋泥 普通用户 4月前
    0 引用 438
    信息感谢分享
  • 权权 普通用户 4月前
    0 引用 437
    谢谢
  • jiliany 普通用户 4月前
    0 引用 436
    感谢分享
  • 911640733 普通用户 4月前
    0 引用 435
    感谢分享
  • xiaomin_pkq 普通用户 4月前
    0 引用 434
    谢谢分享
  • 背包客乄 普通用户 4月前
    0 引用 433
    666
  • 45685 普通用户 4月前
    0 引用 432
    谢谢
  • Hayden江城 普通用户 4月前
    0 引用 431
    谢谢分享!
  • spencer9 普通用户 4月前
    0 引用 430
    感谢
  • yh_h 普通用户 5月前
    0 引用 429
    xx
  • zhenzhenyang 普通用户 6月前
    0 引用 428
    感谢分享
  • 北城一遇 普通用户 8月前
    0 引用 427
    感觉不错!
  • 天边一朵云 普通用户 8月前
    0 引用 426
    感谢大公无私奉献啊
  • 哎呦看看 普通用户 8月前
    0 引用 425
    感谢分享
  • Alston丶 普通用户 8月前
    0 引用 424
    感谢
  • 16534087769 普通用户 8月前
    0 引用 423
    谢谢
  • 16534087769 普通用户 8月前
    0 引用 422
    谢谢
  • miumiao 普通用户 8月前
    0 引用 421
    感谢
  • mcgreed 普通用户 8月前
    0 引用 420
    感谢
  • 鲍彦卫 普通用户 8月前
    0 引用 419
    感谢
  • bhy 普通用户 8月前
    0 引用 418
    感谢分享
  • SONY 普通用户 8月前
    0 引用 417
    感谢分享
  • Elapse 普通用户 8月前
    0 引用 416
    感谢分享
  • hehaijun 普通用户 8月前
    0 引用 415
    学习下
  • zkkzz 普通用户 8月前
    0 引用 414
    感谢分享
  • agis502 普通用户 9月前
    0 引用 413
    下载学习学习
  • wolffyb 普通用户 9月前
    0 引用 412
    感谢分享 
  • 770567970 普通用户 9月前
    0 引用 411
    非常好
  • kekaoke 普通用户 9月前
    0 引用 410
    谢谢分享啦
  • Senny 普通用户 9月前
    0 引用 409
    zan
  • stylewong 普通用户 9月前
    0 引用 408
    666正好需要
  • 雄先生 普通用户 9月前
    0 引用 407
    感谢分享
  • Angel_1603269518 普通用户 9月前
    0 引用 406
    感谢分享
  • 陈莹 普通用户 9月前
    0 引用 405
    感谢分享
  • 兔拉拉 普通用户 9月前
    0 引用 404
    感谢分享
  • tyh 普通用户 9月前
    0 引用 403
    感谢分享
  • 普普普普 普通用户 9月前
    0 引用 402
    感谢分享
  • windycity 普通用户 9月前
    0 引用 401
    加油加油加油。
  • MGaiXT 普通用户 9月前
    0 引用 400
    感谢分享
  • 沉. 普通用户 9月前
    0 引用 399
    谢谢
  • meingst 普通用户 9月前
    0 引用 398
    感谢分享
  • weiwuhu 普通用户 9月前
    0 引用 397
    感谢分享
  • 有味 普通用户 9月前
    0 引用 396
    感谢分享
  • baewenjie 普通用户 10月前
    0 引用 395
    谢谢分享
  • 康宁 普通用户 10月前
    0 引用 394
    感谢
  • zll970901 普通用户 10月前
    0 引用 393
    感谢分享
  • 淼_1600998181 普通用户 10月前
    0 引用 392
    感谢分享
  • loveredsign 普通用户 10月前
    0 引用 391
    感谢楼主太好用看了
  • 熊芽 普通用户 10月前
    0 引用 390
    感谢分享
  • pmyeskim 普通用户 10月前
    0 引用 389
    感谢分享
  • ₩histle° 普通用户 10月前
    0 引用 388
    感谢分享
  • 雪人 普通用户 10月前
    0 引用 387
    感谢分享
  • 黎沐晴 普通用户 10月前
    0 引用 386
    谢谢
  • zFLKid 普通用户 10月前
    0 引用 385
    谢谢分享!
  • 空灵 普通用户 10月前
    0 引用 384
    感谢分享
  • Garson 普通用户 10月前
    0 引用 383
    感谢
  • lee_1600739856 普通用户 10月前
    0 引用 382
    11111111111
  • 三芊焱炎火 普通用户 10月前
    0 引用 381
    多谢大佬分享~
  • quanaini 普通用户 10月前
    0 引用 380
    谢谢分享
  • Aizen12138 普通用户 10月前
    0 引用 379
    学到了
返回
axure商城