托博塔斯知识网

您现在的位置是: 首页 > 娱乐新闻

如何为中继器制作简单的穿梭箱

2020-08-29 14:16:37托博塔斯知识网
编辑指南:穿梭箱更多地用于网页表单等。那么,如何使用中继器来制作简单的穿梭箱呢?本文的作者给了我们详细的答案。梭箱的布局分为两个区域:候选区域和选定区域。选择候选区域后,单击右箭头按钮以删除候选区域中的元素,并将该元素添加到所选区域。将转发器用作穿梭盒可避免在原型中反复进行添加,修改和删除的重复操作,并且

  编辑指南:穿梭箱更多地用于网页表单等。 那么,如何使用中继器来制作简单的穿梭箱呢?本文的作者给了我们详细的答案。

  

  梭箱的布局分为两个区域:候选区域和选定区域。 选择候选区域后,单击右箭头按钮以删除候选区域中的元素,并将该元素添加到所选区域。

  将转发器用作穿梭盒可避免在原型中反复进行添加,修改和删除的重复操作,并且只需对转发器数据进行简单的编辑即可。

  第一步:页面布局

  首先从左到右拖放两个动态面板,分别命名为候选区域和选定区域,并添加向右箭头,布局如图所示。

  

  步骤2:进入候选区域的动态面板,将中继器添加到其默认状态,并将其命名为候选中继器(注意:此时操作处于动态面板状态1)。

  步骤3:为候选中继器添加值。

  首先删除其默认列0的值,然后在excel中生成它后,将要写入的值复制到转发器中。 候选中继器值如下图所示。

  

  步骤4:输入候选中继器以删除其默认矩形。

  在转发器操作页面上拖动两个图标作为选择标识符,分别命名为“ unselected”和“ selected”,以显示此选项的选定状态(本文使用FontAwesome 5组件库)。

  

  默认情况下,未选中该选项,因此所选徽标和未选中徽标一起布置,并且所选徽标被隐藏。

  取消选择选项后,单击未选择的徽标可切换到选定的徽标,然后再次单击以从选定的徽标切换到未选定,交互设计如图所示。

  

  

  接下来,拖放一个名为情节的文本标签组件,以在转发器中显示数据。

  为了在页面上的转发器中显示数据,您需要将页面的文本标签和转发器数据绑定在一起。 操作如下:单击转发器,在->选中情节中设置文本->单击fx->插入变量或功能->选择项目。选项,如上设置交互式用例,以将文本标签和数据绑定到候选转发器中。

  

  完成上述步骤并进行预览之后,您可以看到候选中继器的选项显示在左侧的候选区域中。 下一步是选择一个选项,单击穿梭按钮,然后在右侧添加选项。删除左侧的此选项,让我们逐步分解操作。

  步骤5:在候选中继器中标记所选选项

  具体操作如下:在转发器操作页面上,添加新的全局变量NewVariable,为未选择的按钮添加用例,以在单击鼠标时标记行,并将全局变量NewVariable值设置为Item。选项。

  

  相应地,当选择按钮添加用例时,单击鼠标时该行未标记,并且全局变量NewVariable设置为空。

  

  步骤6:删除候选区域中标记的选项,并将选项值存储到全局变量中。

  此操作在主页上的右箭头上。 为此添加一个鼠标单击交互式操作:从候选转发器中删除标记的行。

  

  完成此操作后,实现了单击向右箭头以删除左侧候选区域中所选项目的操作,然后如何将所选项目的值转移到右侧所选区域?

  基于新创建的全局变量,此操作非常容易实现,因此首先让我们构建所选区域的组件。

  步骤7:单击进入所选区域的动态面板,拖动一个中继器,删除其默认矩形框和默认列column0,然后拖动组件,如图所示,以显示所选选项。 矩形被命名为Selected; 中继器列名称被命名为selected。

  

  为了在所选区域的候选区域中显示所选内容,需要两个步骤,即,将数据添加到所选中继器,以及在所选中继器中显示数据。

  步骤8:在主页上,为右箭头添加鼠标单击交互,并为所选的中继器添加一行。 具体操作如下:

  

  

  

  步骤9:在页面上的所选中继器中显示数据。

  对于交互式用例,将矩形设置为中继器中所选列的值。

  

  遵循这些步骤,转发器实现的穿梭框架就成功了!

  当然,该穿梭箱是比较基本的。 它没有太多的交互效果,也无法实现一次性的多数据往返。 只需使用中继器即可制作基本的穿梭箱。 让我们继续探索更复杂的功能!

  本文最初由@产品小白黑化中发表。 每个人都是产品经理。 禁止擅自转载

  图片来自Pexels,基于CC0协议

-