企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

【axure教程】repeater中继器实现课程表的上移下移效果

产品设计 码云 65℃ 0评论

实例描述:通过repeater中继器实现点击上移、下移按钮,移动相应的课程顺序。

这里我用的是AXURE汉化版的软件,相关下载请去官网,官网附有汉化教程方法,自行查看。

准备工作

上移、下移图标:

【axure教程】repeater中继器实现课程表的上移下移效果

repeater中继器:

【axure教程】repeater中继器实现课程表的上移下移效果【axure教程】repeater中继器实现课程表的上移下移效果

首先用表格做一个表头:

【axure教程】repeater中继器实现课程表的上移下移效果

双击repeater中继器进入设置,这里我给中继器命名为mytab,通过(粘贴复制的方法)另添加两列,并将上下移动图标按钮放到最后一列中,这里我为三列分别命名为tab1、tab2、tab3。

【axure教程】repeater中继器实现课程表的上移下移效果

为mytab设置数据集,如图:

为mytab设置数据集,如图: 为mytab设置数据集,如图:

初始化中继器,双击进入“每页加载项”,设置相关元件属性,选中“设置文本”点击你需要设置的原件tab1,设置文本为“值”,变量为“[[Item.id]]”,同样的tab2设置文本也为“值”,变量为“[[Item.content]]”,如下图:

【axure教程】repeater中继器实现课程表的上移下移效果

最终显示:

【axure教程】repeater中继器实现课程表的上移下移效果

因为排序过程中编号会相应变化,所以将一列表格挡在题型编号处:

上移、下移按钮图标添加事件:

【axure教程】repeater中继器实现课程表的上移下移效果

实现上移下移思路:

  • 通过修改id值,然后进行排序,从而达到想要的效果。
  • 只要把当前选中行的id值与上一行或者下一行互换,再进行排序就可以。以下移为例(实现上移同理)。
  • 借助一个全局变量tempData来保存当前选中行的id值
  • 更新上一行的id数值,使其加1
  • 更新当前行的id数值,使其减1
  • 添加排序,重新按照升序排列

如下图:

【axure教程】repeater中继器实现课程表的上移下移效果

实现步骤:

1、添加全局变量tempRows,tempRowsUp

【axure教程】repeater中继器实现课程表的上移下移效果

2、选中上移图标,进入case,设置全局变量,选中要设置的全局变量tempRows,设置值为“[[Item.id]]”,如图:

【axure教程】repeater中继器实现课程表的上移下移效果

3、更新行,选中刚刚自己创建的中继器mytab,设置条件为[[Item.id == tempRows+1]],设置列id值为[[Item.id-1]],如图:

【axure教程】repeater中继器实现课程表的上移下移效果

4、更新行,选中中继器mytab,设置this的id为[[Item.id +1]],如图:

【axure教程】repeater中继器实现课程表的上移下移效果

5、添加排序

【axure教程】repeater中继器实现课程表的上移下移效果

到此下移效果实现完成,实现上移同理。

最后,为大家留一个想一想问题,就是在排序过程中编号会发生相应变化,如何解决这一问题呢,欢迎大家留言谈论。

转载请注明:码云笔记 » 【axure教程】repeater中继器实现课程表的上移下移效果

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址