首页 > axure教程 > 正文

小楼axure7.0教程(十八):中继器实现全选、反选和选中计数
2017-09-09 16:26:00   来源:   评论:0 点击:

  哼哼哈兮,打开你的中继器;  吼吼哈嘿,我要把一个框框塞进去;  啊啊……   不是这样的,楼老师是个正经人!  本篇教程示例原型下载:Axure7 0原型_小楼作品_中继器全选、反选和选中计数 rp  第一
  哼哼哈兮,打开你的中继器;

  吼吼哈嘿,我要把一个框框塞进去;

  啊啊……..

  不是这样的,楼老师是个正经人!

  本篇教程示例原型下载:Axure7.0原型_小楼作品_中继器全选、反选和选中计数.rp

  第一式:准备元件

  1、 拖出来一个中继器到编辑区;

  2、 在外面放上一个复选框用于触发全选、一个按钮用来触发反选、还有一个文本Lable用来显示选中项的数量;

  3、 双击打开中继器,删除中继器主页中的矩形,然后拖一个复选框和一个文本Labae进去。

  4、创建一个计数用的变量,在示例中楼老师偷懒,用的系统自带的变量。

  第二式:整理思路

  全选:当复选框被选中时让中继器里面的复选框也被选中;当复选框取消选中的时候中继器里面的复选框也被取消;

  反选:当点击反选的时候,中继器里面的复选框切换被选中的状态;

  计数:当中继器里面的复选框被选中时,设置变量值递增1,如果选中被取消则变量值递减1,然后让文本显示出来。

  第三步:实现过程

  1、 设置触发全选的那个复选框的onclick事件,这里要添加两个用例:

18-1

  A:if被选中的值为真,设置选中中继器中的复选框;

  B:else if true ,设置未选中中继器中的复选框。

  2、 设置触发反选的那个复选框的onclick事件为:设置被选中的中继器复选框为切换(toggle);

18-2

  3、 设置中继器中的复选框的“选中状态改变时”事件,这里添加3个用例:

18-3

  A:if被选中的值为真,设置变量=值[[变量+1]];

  B:else if true ,设置变量=值[[变量-1]];

  C:if true,设置文本值为:选中了[[变量]]项。

  4、在中继器中添加一些测试数据,并且和中继器里面的复选框的文字做绑定。不会这一步的请先学习Axure7.0教程(一)。

18-4
18-5

  好了,下面就是最后的精彩时刻,你准备好了吗?啊!~~~~~~~~~~~~~~~~~~~~~~~~~~~

  (此处省略两个单词“The End”)

相关热词搜索:中继器 小楼 教程

上一篇:Axure7.0部件里的中继器是干什么用的?
下一篇:手把手教您使用Axure7.0的中继器(Repeater)

分享到: 收藏