AxureRP8实战手册-案例73(全选与取消全选效果)

AxureRP8.0教程 小楼一夜听春语 12335℃ 0评论

案例73. 全选与取消全选效果

案例来源:

百度音乐-音乐盒

 

案例效果:

  • 初始状态/取消全选时:(图5-117)

5-117

  • 全选后取消任一选项时:(图5-118)

5-118

  • 全选/单选全部选中时:(图5-119)

5-119

案例描述:

列表中相邻的行具有交替的背景颜色;点击列表中复选框时,可以切换复选框的勾选状态,复选框被勾选时整行变为灰色,取消勾选时恢复默认颜色;列表中的复选框被全部勾选时,列表左下方的全选复选框变为被勾选状态;列表中的复选框有任何一个取消勾选时,全选复选框都会变为未勾选状态;全选复选框被主动勾选时,列表中所有的复选框均被勾选,全选复选框被主动取消勾选时,列表中所有的复选框均被取消勾选。

另外,本案例中当列表中某一行被双击时,该行为播放状态,歌曲名之前显示播放图标,并且显示听相似歌曲与看现场翻唱的按钮。

 

元件准备:

  • 页面中:(图5-120)

5-120

  • 中继器“PlayList”中:(图5-121)

5-121

  • 中继器“PlayList”数据集中:(图5-122)

5-122

  • 中继器“PlayList”样式设置中:(图5-123)

5-123

包含命名:

  • 复选框(用于全选的复选框):SelectAll
  • 文本标签(用于记录列表中复选框被勾选的数量):SelectNumber
  • 中继器(用于歌曲列表):PlayList
  • 组合(用于歌曲信息部分的同一操作):InfoGroup
  • 组合(用于其它按钮部分的同一操作):ButtonGroup
  • 图片(用于播放状态显示的频谱图标):SpectrumIcon
  • 图片(用于显示歌曲MV图标):MVIcon
  • 复选框(用于列表中每行的复选框):SelectItem
  • 文本标签(用于显示歌曲名称):SongName
  • 文本标签(用于显示歌手姓名):SingerName
  • 文本标签(用于显示专辑名称):AlbumName
  • 矩形(用于歌曲信息部分的灰色背景):BackgroundShape

 

思路分析:

  • 完成歌曲列表的常规信息部分;(操作步骤1)
  • 为播放状态的歌曲显示更多的按钮;显示频谱图标,将歌曲名称置于频谱图标右侧,显示整行灰色的背景;(操作步骤2)
  • 为有MV的歌曲显示MV的图标,MV的图标在歌曲名称右侧间距5像素的位置;(操作步骤3)
  • 双击歌曲列表中任何一项时,取消其它歌曲的播放状态,并将当前歌曲改变为播放状态;(操作步骤4~5)
  • 勾选歌曲列表中任何一项的复选框时,整行显示灰色背景,勾选数量记录增加1;(操作步骤6)
  • 如果勾选数量记录等于列表项的总和,勾选复选框“SelectAll”;(操作步骤7)
  • 取消勾选歌曲列表中任何一项的复选框时,勾选数量记录减少1;取消勾选复选框“SelectAll”;(操作步骤8)
  • 如果歌曲列表中取消勾选的项不是播放状态,取消显示整行的灰色背景;(操作步骤9)
  • 在单击复选框“SelectAll”时判断复选框是否被勾选,如果该复选框被勾选则勾选歌曲列表中所有的复选框;否则,取消勾选歌曲列表中所有的复选框;这里需要注意的是,全选与取消全选只有在主动勾选或取消勾选复选框“SelectAll”时才能够生效,所以触发事件要选择复选框“SelectAll”的【鼠标单击时】而不是【选中时】和【取消选中时】。(操作步骤10~11)

 

操作步骤:

1、为中继器“PlayList”的【每项加载时】事件添加“用例1”,设置动作为【设置文本】;勾选元件“SongName”,设置文本为【值】“[[Item. SongName]]”;勾选元件“SingerName”,设置文本为【值】“[[Item. SingerName]]”;勾选元件“AlbumName”,设置文本为【值】“[[Item.AlbumName]]”;

2、继续为中继器“PlayList”的【每项加载时】事件添加“用例2”,设置条件判断【值】“[[Item.IsPlay]]”【==】【值】“True”;设置满足条件时的动作为【显示】组合“ButtonGroup”,【显示】图片“SpectrumIcon”,【移动】元件“SongName”【经过】{x}“25”{y}“0”的位置,【选中】元件“BackgroundShape”;

3、继续为中继器“PlayList”的【每项加载时】事件添加“用例3”,设置条件判断【值】“[[Item.MV]]”【==】【值】“Yes”;设置满足条件时的动作为【显示】图片 “MVIcon”,【移动】图片“MVIcon”【到达】{x}“[[s.x+s.text.length*12+5]]”{y}“[[Target.y]]”的位置;公式中“s”为局部变量,其内容为元件“SongName”的对象实例;这里要注意的是:因为,歌曲名称长度不一,所以不能移动MV的图标到固定的位置,在这里移动公式“[[s.x+s.text.length*12+5]]”的含义为“歌曲名称元件的x轴坐标值+歌曲名称字符数量*字符的宽度+5像素”;

  • 事件交互设置:(图5-124)

5-124

4、为组合“InfoGroup”的【鼠标双击时】事件添加“用例1”,设置动作为【更新行】于中继器“PlayList”,勾选【条件】,设置条件为“True”(表示全部符合条件),【选择列】为“IsPlay”,设置列的【Value】(值)为“False”;这一步完成了取消列表中所有歌曲的播放状态;

5、继续上一步,添加动作【更新行】于中继器“PlayList”,勾选【This】,【选择列】为“IsPlay”,设置列的【Value】(值)为“True”;这一步完成了将当前歌曲设置为播放状态;

  • 事件交互设置:(图5-125)

5-125

6、为复选框“SelectItem”的【选中时】事件添加“用例1”,设置动作为【选中】元件“BackgroundShape”;【设置文本】于元件“SelectNumber”为【值】“[[Target.text+1]]”;公式“[[Target.text+1]]”表示目标元件文字加1;

7、为复选框“SelectItem”的【选中时】事件添加“用例2”,添加条件判断【元件文字】于“SelectNumber”【==】【值】“[[Item.Repeater.visibleItemCount]]”;设置满足条件时的动作为【选中】元件“SelectAll”;公式“[[Item.Repeater.visibleItemCount]]”的返回值为当前项所在的中继器的可见项数量;完成动作设置后,在用例名称上点击<鼠标右键>,选择菜单中最后一项,将用例的条件判断由“Else If”转换为“If”;

8、为复选框“SelectItem”的【取消选中时】事件添加“用例1”,设置动作为【设置文本】于元件“SelectNumber”为【值】“[[Target.text-1]]”;【取消选中】元件“SelectAll”;公式“[[Target.text-1]]”表示目标元件文字减1;

9、为复选框“SelectItem”的【取消选中时】事件添加“用例2”,添加条件判断【值】“[[Item.IsPlay]]”【==】【值】“False”;设置满足条件时的动作为【取消选中】元件“BackgroundShape”;完成动作设置后,在用例名称上点击<鼠标右键>,选择菜单中最后一项,将用例的条件判断由“Else If”转换为“If”;

  • 事件交互设置:(图5-126)

5-126

10、为元件“SelectAll”的【鼠标单击时】事件添加“用例1”,设置条件判断【选中状态】于“当前元件”(This)【==】【true】,设置满足条件时的动作为【选中】元件“SelectItem”;

11、继续为元件“SelectAll”的【鼠标单击时】事件添加“用例2”,设置不满足操作步骤10的条件时,执行动作为【取消选中】元件“SelectItem”。

  • 事件交互设置:(图5-127)

5-127


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例73(全选与取消全选效果)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(15)个小伙伴在吐槽
  1. 讲得好模糊啊
    wqw7532016-07-19 09:41 回复
    • 小楼一夜听春语
      说说哪里模糊?如果没有接触过中继器,先去看前面的中继器基础案例。
      小楼一夜听春语2016-07-19 13:14 回复
      • 你的元件扩展库的图片太辣了,我都无法在办公室用了 :mrgreen:
        月下2016-09-24 09:12 回复
  2. 能有生成的原型看最好
    里斯本竞技2016-07-21 08:29 回复
  3. 是有点模糊,组合ButtonGroup是谁和谁呢?都属于中继器的一部分吗?中间的黄色矩形是做什么的?
    心雨2016-07-22 08:55 回复
    • 小楼一夜听春语
      仔细看图5-121
      小楼一夜听春语2016-07-23 22:07 回复
  4. 请教:默认第一首歌正在播放中,但是勾选后,为什么number变为2?
    心雨2016-07-23 19:57 回复
    • 我也是这个问题,请教老师~!
      Angelo2016-09-03 18:03 回复
  5. 请教小楼老是,为什么我按照这个流程来做的,但是效果出来去不一样,并且排列的很凌乱
    默默2016-10-21 14:24 回复
  6. http://wenda.axure.com.cn/question/557 小楼老师 求解!!!
    默默2016-10-21 15:40 回复
  7. 【每项加载时】【移动】图片“MVIcon”【到达】{x}“[[s.x+s.text.length*12+5]]”{y}“[[Target.y]]” 为什么【移动】里面只有【绝对位置】和【相对位置】可以选?找不到【到达】。 还有target是指哪个元件?会自动识别?
    智商捉急的新人2016-11-23 15:05 回复
    • 小楼一夜听春语
      1、用本站汉化包; 2、目标元件。
      小楼一夜听春语2016-11-23 15:42 回复
    • 选用【绝对位置】就好,[[Target.y]]就是指目标原件y轴原有的位置,这里是水平移动,y轴位置是不变的,用原来的位置即可
      jqseven2017-08-14 19:21 回复
  8. 谢谢小楼老师的详细教程
    Jdanzi2017-06-08 18:02 回复
  9. 有个问题,选中几项后,再双击某行,原来选中的就没有了。但是,SelectNumber上的数还在,再点几下,全选就勾上了,而页面上没有全都勾上
    星缘2017-06-23 17:13 回复