【Axure 教程】中继器中级教程-联级框

　　联级框的创制实质上是中继器筛选才具的一个进阶用法，这日咱们就来进修一下如何创制常用的联级框吧！这回的交互会比拟繁琐，公共必然要耐心看完哦！

　　

原型显现：

　　

所需原件：

　　 中继器 文本框

联级框的创制实质上是中继器筛选才具的一个进阶用法，这日咱们就来进修一下如何创制常用的联级框吧！这回的交互会比拟繁琐，公共必然要耐心看完哦！

　　

一、文本框

　　

如上图所示，拖入矩形，模仿输入框，并填入文字“请抉择”，修树好【悬停】、【选中】、【获取核心】的交互样式；文本标签行为下拉联级框的题目，按上图构造即可获得文本框模子；

　　

二、联级框

　　

如上图，拖入三个中继器，永别定名为【L1】、【L2】、【L3】行为一级、二级、三级的联级列外，并做好数据填充和【每项加载】的修树，永别将【Item.L1】、【Item.L2】、【Item.L3】赋值给到【L1】、【L2】、【L3】；

　　

正在填凑数据这一步，倡议公共可能像上图相同，先用 Excel 做好数据备份，以便后续篡改操纵，且中继器数据是增援直接通过 Excel 复制黏贴到中继器的数据外中的；

　　

三、交互修树

　　

选中【L1】的中继器，双击选中【L1】文本标签，增加【单击时】修树切换选中功效的交互行动；

　　

　　

为【选中时】增加修树文本，将【Item.L1】赋值给到【sel_L1】的文本标签；

　　

　　

同时，向对象对象【L2】中继器增加筛选，原则为 [[Item.L1==TargetItem.L1]]，注视勾选“移除其他筛选”

　　

　　

而且显示【L2】中继器，如上图修树所示；

　　

　　

当【撤销选中时】，将【sel_L1】修树为空值，且移除【L2】的筛选，同时潜藏【L2】；

　　

　　

同理可能本人考试一下修树【L2】的交互哦~

　　

　　

最终，【L3】的交互就相对简易一点，同样，须要修树切换选中的交互行动，但【选中时】仅需将【Item.L3】赋值给到【sel_L3】文本标签，且【撤销选中时】将【sel_L3】修树为空值；

　　

四、细节优化

　　

这个组件的小细节依然比拟众的，我就不逐一阐明了，我就挑几个来说，起初是联级框的配景，正在选中【L1】时，须要将配景的宽度翻倍，选中【L2】时，配景再加 1.5 倍；

　　

　　

中继器【L1】的文本标签【选中时】，除赋值给【sel_L1】外，需同步重置【sel_L2】、【sel_L3】的值；

　　

　　

中继器【L1】的文本标签【撤销选中时】，潜藏【L2】、【L3】中继器；

　　

更众实质，微信寻求“爱学儿”，一同交换商讨吧！