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

人隐江湖 普通用户 3月前 1295

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

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

演示链接: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金币
最新回复 (88)
  • kshparadise 普通用户 1天前
    0 引用 89
    不错
  • STC2333 普通用户 2天前
    0 引用 88
    秒啊
  • yy111111111 普通用户 2天前
    0 引用 87
    感谢分享
  • 波斯猫YF 普通用户 2天前
    0 引用 86
    感恩
  • 闰土君 普通用户 2天前
    0 引用 85
    感谢分享,获得10金币奖
  • 女人香 普通用户 6天前
    0 引用 84
    感谢分享信息
  • redhobor 普通用户 6天前
    0 引用 83
    感谢分享
  • 你猜…… 普通用户 6天前
    0 引用 82
    感谢分享
  • Mol 普通用户 6天前
    0 引用 81
    谢谢分享
  • HCZCZ 普通用户 7天前
    0 引用 80
    感谢分享
  • Tiffany 普通用户 8天前
    0 引用 79
    axure8做起来感觉找不到设置参数的地方
  • Matsuri 普通用户 8天前
    0 引用 78
    666
  • sswy0036 普通用户 8天前
    0 引用 77
    为什么我按照步骤做完了,没有右边的滚动条呢
  • 重剑无锋_1581931789 普通用户 9天前
    0 引用 76
    感谢
  • suxiaobao 普通用户 9天前
    1 引用 75
    感谢
  • risingsun 普通用户 10天前
    1 引用 74
    灯箱有了背景色了。还是看源文件吧。
  • ღ°清欢渡ฅ ྀ 普通用户 10天前
    0 引用 73
    总是做不对
  • 周波 普通用户 11天前
    0 引用 72
    感谢分享,我照着做碰到个问题
  • qinbo 普通用户 11天前
    0 引用 71
    感谢分享
  • 栀染 普通用户 11天前
    0 引用 70
    ,,
  • mrhan629 普通用户 11天前
    0 引用 69
    感谢!学习了!
  • 胡啊 普通用户 12天前
    0 引用 68
    感谢分享,获得10金币奖励!
  • 林豆豆 普通用户 12天前
    0 引用 67
    谢谢分享!
  • 栖止 普通用户 12天前
    0 引用 66
    感谢分享,学习学习
  • 先看头像 普通用户 13天前
    0 引用 65
    一般啊
  • 梁明通 普通用户 13天前
    0 引用 64
    感谢分享。。。
  • 蚂蚁先生 普通用户 13天前
    0 引用 63
    中继器矩形单机后设置Select文本时,目标里找不到Select文本框该咋办
  • 旺旺真知棒 普通用户 13天前
    0 引用 62
    XIEXIEFENGXIANG !
  • 苏羽 普通用户 15天前
    0 引用 61
    xxfenx
  • dxelon 普通用户 15天前
    0 引用 60
    谢谢分享哦
  • 早睡早起身体好 普通用户 16天前
    0 引用 59
    谢谢大佬
  • Ethan_1577249681 普通用户 16天前
    0 引用 58
    谢谢大佬,下载学习
  • liness 普通用户 16天前
    0 引用 57
    谢谢分享哦
  • ddrrdd 普通用户 16天前
    0 引用 56
    谢谢
  • 陈懋隆 普通用户 16天前
    0 引用 55
    感谢分享~
  • winni_xin 普通用户 19天前
    0 引用 54
    十分感谢
  • Ethereal 普通用户 20天前
    0 引用 53
    感谢
  • 陈彦少 普通用户 20天前
    0 引用 52
    谢谢分享哦
  • z琦 普通用户 21天前
    0 引用 51
    eee
  • szuzsq 普通用户 22天前
    0 引用 50
    ok
  • Benny_1580742915 普通用户 23天前
    0 引用 49
    感谢分享,获得10金币奖励!
  • GoldBlack 普通用户 23天前
    0 引用 48
    非常好  谢谢
  • ptxshen 普通用户 23天前
    0 引用 47
    谢谢分享
  • fangfang 普通用户 24天前
    0 引用 46
    感谢分享
  • alarwj 普通用户 24天前
    0 引用 45
    感谢分享~
  • hnrichie 普通用户 26天前
    0 引用 44

    看下源码!外层那个动态面板没有必要,属于垃圾代码,只会增加源文件体积,降低渲染效率,建议精益求精!

  • yanjie 普通用户 28天前
    0 引用 43
    学习中,谢谢分享
  • yekki 普通用户 28天前
    0 引用 42
    谢谢
  • 彭朝培 普通用户 1月前
    0 引用 41
    多谢分享
  • 香草卷 普通用户 1月前
    0 引用 40
  • ZZH 普通用户 1月前
    0 引用 39
    感谢分享,获得10金币奖励!
  • 沈小扬 普通用户 1月前
    0 引用 38
    感谢分享
  • hling 普通用户 1月前
    0 引用 37
    感谢分享
  • linshi2020 普通用户 1月前
    0 引用 36
    看了源文件,第一步应该是需要画一个动态面板呀
  • linshi2020 普通用户 1月前
    0 引用 35
    感谢分享
  • 田隆 普通用户 1月前
    0 引用 34
    可以
  • 小小聪 普通用户 1月前
    0 引用 33
    谢谢
  • 千寻_1579416321 普通用户 1月前
    0 引用 32
    感谢解答疑惑
  • 普通用户 1月前
    0 引用 31
    万分感谢
  • wmy0316 普通用户 1月前
    0 引用 30
    感谢分享
  • 黑白灰 普通用户 1月前
    0 引用 29
    感谢分享
  • shengyexixi8 普通用户 1月前
    0 引用 28
    感谢分享~
  • Gwzlaa 普通用户 1月前
    0 引用 27
    666
  • itwxf 普通用户 1月前
    0 引用 26
    喏,上次经过你家,我还发了朋友圈
  • hanmeng1126 普通用户 1月前
    0 引用 25
    感谢分享
  • Cecilia0617 普通用户 1月前
    0 引用 24
    谢谢分享
  • 猴哥 普通用户 1月前
    0 引用 23
    请先回复,再下载。所以,先感谢分享。
  • 鸿星星 普通用户 1月前
    0 引用 22
    感谢
  • yy1 普通用户 1月前
    0 引用 21
    666
  • cham_1579138223 普通用户 1月前
    0 引用 20
    谢谢分享
  • meihao 普通用户 1月前
    0 引用 19
    感谢分享
  • A宋毫 普通用户 1月前
    0 引用 18
    感谢分享~
  • yifeiyh 普通用户 1月前
    0 引用 17
    谢谢分享
  • V同学 普通用户 1月前
    0 引用 16
    感谢分享~
  • lannizhong 普通用户 1月前
    0 引用 15
    谢谢分享
  • 晓_1578985800 普通用户 1月前
    0 引用 14
    感谢分享~ 
  • Renee_1578974438 普通用户 1月前
    0 引用 13
    thanks
  • 甲甲龟兔 普通用户 1月前
    0 引用 12
    感谢分享
  • tony_bear 普通用户 2月前
    0 引用 11
    感谢大佬分享
  • @墨未满 普通用户 2月前
    0 引用 10
    谢谢分享
  • 飞机正在抵抗地球 普通用户 2月前
    0 引用 9
    111
  • ahleeyang 普通用户 2月前
    0 引用 8
    感谢大佬分享
  • demo111111111 普通用户 2月前
    0 引用 7
    谢谢分享
  • YWXin_89 普通用户 2月前
    0 引用 6
    感谢分享
  • 熟悉的陌生人 普通用户 3月前
    0 引用 5
    跟着做了没用,下载看看!
  • 89_1572675602 普通用户 3月前
    0 引用 4
    感谢分享~
  • 婉儿_1570691211 普通用户 3月前
    0 引用 3
    感谢分享
  • 沈十三 管理员 3月前
    0 引用 2
    感谢分享,获得10金币奖励!
返回