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

人隐江湖 普通用户 6月前 3655

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

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

演示链接: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金币
最新回复 (256)
  • 奶泡 普通用户 2天前
    0 引用 257
    最后的中继器真的不算是很明白
  • 一点点点点点 普通用户 2天前
    0 引用 256
    感谢分享
  • dola 普通用户 2天前
    0 引用 255
    谢谢分享
  • 77jy 普通用户 2天前
    0 引用 254
    谢谢
  • 梁珂_1590461674 普通用户 3天前
    0 引用 253
    感谢分享~~~~~~~~~~
  • 抢走你小熊 普通用户 5天前
    0 引用 252
    感谢分享
  • 云_1590059884 普通用户 8天前
    0 引用 251
    非常感谢分享
  • 15079208394 普通用户 10天前
    0 引用 250
    感谢分享
  • 悟空_1589853708 普通用户 10天前
    0 引用 249
    学习一下
  • nicole77 普通用户 10天前
    0 引用 248
    感谢分享
  • 格吖。 普通用户 10天前
    0 引用 247
    感谢分享
  • Mark-Tao 普通用户 10天前
    0 引用 246
    谢谢分享
  • PmyesX 普通用户 10天前
    0 引用 245
    PmyesX is me!
  • jllew 普通用户 10天前
    0 引用 244
    谢谢,好东西
  • Graham 普通用户 10天前
    0 引用 243
    xx
  • 墨墨哒 普通用户 14天前
    0 引用 242
    想看看原型图
  • tzx_qx 普通用户 14天前
    0 引用 241
    多写分享
  • _寺司 普通用户 15天前
    0 引用 240
    感谢分享
  • 祝清华 普通用户 15天前
    0 引用 239
    谢谢分享
  • meihao 普通用户 15天前
    0 引用 238
    感谢分享 
  • _Ccccch 普通用户 15天前
    0 引用 237
    感谢
  • 亦乐 普通用户 16天前
    0 引用 236
    感谢
  • 虐毒狂人 普通用户 16天前
    0 引用 235
    拿来跟自己写的对比下
  • lavender_1589335799 普通用户 16天前
    0 引用 234
    感谢分享
  • 刀刀狗 普通用户 16天前
    0 引用 233
    感谢
  • 阚小鸟 普通用户 17天前
    0 引用 232
    感谢
  • 王伟_1588751934 普通用户 17天前
    0 引用 231
    感谢分享
  • cutxru 普通用户 18天前
    0 引用 230
    感谢分享
  • hitlx 普通用户 21天前
    0 引用 229
    感谢分享!
  • 李峰 普通用户 21天前
    0 引用 228
    感谢分享!
  • zzs_1588755731 普通用户 21天前
    0 引用 227
    中继器那里还是搞不懂
  • andealee 普通用户 24天前
    0 引用 226
    可以可以,感谢分享
  • 唐超 普通用户 25天前
    0 引用 225
    感谢分享
  • 茅雪明 普通用户 29天前
    0 引用 224
    感谢分享
  • babybear619 普通用户 1月前
    0 引用 223
    感谢分享
  • Carol_1588085263 普通用户 1月前
    0 引用 222
    感谢分享
  • EDGEJING 普通用户 1月前
    0 引用 221
    感谢啊
  • 肆塊伍 普通用户 1月前
    0 引用 220
    很实用
  • 古古奇 普通用户 1月前
    0 引用 219
    这个不错
  • ECHO_HE 普通用户 1月前
    0 引用 218
    感谢分享
  • 速客中国张 普通用户 1月前
    0 引用 217
    感谢分享。人人为我,我为人人。
  • 赵汉青 普通用户 1月前
    0 引用 216
    感谢分享。人人为我,我为人人。
  • 广州立邦周先生 普通用户 1月前
    0 引用 215
    下载学习一下
  • 王杨_1587865986 普通用户 1月前
    0 引用 214
    感谢分享
  • zzx1991 普通用户 1月前
    0 引用 213
    2222
  • 千山飞鸟 普通用户 1月前
    0 引用 212
    感谢分享~~
  • 卡☆卡 普通用户 1月前
    0 引用 211
    谢谢分享
  • iceyang 普通用户 1月前
    0 引用 210
    感谢分享
  • lisheng 普通用户 1月前
    0 引用 209
    感谢分享~
  • Matsuri 普通用户 1月前
    0 引用 208
    666
  • 周五查查字典 普通用户 1月前
    0 引用 207
    图文并茂,讲解到位
  • 小鹏_1587622523 普通用户 1月前
    0 引用 206
    感谢
  • ty001 普通用户 1月前
    0 引用 205
    感谢分享
  • Newt 普通用户 1月前
    0 引用 204
    感谢分享
  • vvvvccccc 普通用户 1月前
    0 引用 203
    Axure8没做成功,看下源文件
  • G小健 普通用户 1月前
    0 引用 202
    感谢
  • Xs_ 普通用户 1月前
    0 引用 201
    谢谢分享
  • 毛大爷 普通用户 1月前
    0 引用 200
    感谢分享,共同学习
  • Chris_1578555273 普通用户 1月前
    0 引用 199
    感谢分享
  • ·小媛媛· 普通用户 1月前
    0 引用 198
    谢谢分享!
  • knightfay 普通用户 1月前
    0 引用 197
    感谢分享
  • joeyyyyyy 普通用户 1月前
    0 引用 196
    感谢分享
  • 卧枕市泥巴 普通用户 1月前
    0 引用 195
    ssssssssssssssssssssssssss
  • 普通用户 1月前
    0 引用 194
    谢谢
  • 若镭 普通用户 1月前
    0 引用 193
    感谢分享
  • ¿_1586953332 普通用户 1月前
    0 引用 192
    感谢
  • 9long 普通用户 1月前
    0 引用 191
    学习
  • yuyu1118 普通用户 1月前
    0 引用 190
    谢谢
  • houwan123 普通用户 1月前
    0 引用 189
    谢谢分享
  • 爱看星星的周宇宙 普通用户 1月前
    0 引用 188
    喵啊
  • 一拳一个小呆呆 普通用户 1月前
    0 引用 187
    谢谢
  • zixiezhang 普通用户 1月前
    0 引用 186
    牛皮普拉斯
  • 小仙儿 普通用户 1月前
    0 引用 185
    谢谢分享
  • laojing 普通用户 1月前
    0 引用 184
    感谢分享
  • Blakeliu 普通用户 1月前
    0 引用 183
    感谢分享
  • Megneto 普通用户 1月前
    0 引用 182
    感谢分享
  • 豆子:-) 普通用户 1月前
    0 引用 181

    感谢分享

  • 平安是福 普通用户 1月前
    0 引用 180
    谢谢
  • ,无止境 普通用户 1月前
    0 引用 179
    谢谢
  • 张先森_1586338363 普通用户 1月前
    0 引用 178
    感谢分享,正在学习,制作出来了但出现了bug,需要查验一下源文件看哪里出了问题
  • Mr.Nobody 普通用户 1月前
    0 引用 177
    好的
  • 心外无物 普通用户 1月前
    0 引用 176
    感谢分享。
  • musclewl 普通用户 1月前
    0 引用 175
    阿斯达所大所
  • AME 普通用户 1月前
    0 引用 174
    哈哈哈哈哈哈哈哈好
  • 17660423404 普通用户 1月前
    0 引用 173
    感谢分享
  • 冯涛Terry 普通用户 1月前
    0 引用 172
    感谢
  • 天之蓝源 普通用户 1月前
    0 引用 171
    感谢分享
  • 小崔 普通用户 1月前
    0 引用 170
    学习学习
  • 13085336463 普通用户 1月前
    0 引用 169
    十分感谢
  • 好好好好好好666666 普通用户 1月前
    0 引用 168
    非常感谢,非常感谢
  • Lingna 普通用户 1月前
    0 引用 167
    感谢分享。
  • kingdom031 普通用户 1月前
    0 引用 166
    感谢分享
  • 超人eric 普通用户 2月前
    0 引用 165
    感谢分享
  • 夏至、未至 普通用户 2月前
    0 引用 164
    感谢分享
  • 123123wqeqwe 普通用户 2月前
    0 引用 163
    666
  • 嗨玉哥儿 普通用户 2月前
    0 引用 162
    谢谢分享
  • 不曾介入_1584449374 普通用户 2月前
    0 引用 161
    谢大佬分享
  • eedoc 普通用户 2月前
    0 引用 160
    感谢分享
  • 刘艳儿_1585141683 普通用户 2月前
    0 引用 159
    666
  • asdffsag 普通用户 2月前
    0 引用 158
    好东西
返回
axure商城