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

案例来源:

百度音乐-音乐盒

 

案例效果：

• 初始状态/取消全选时：（图5-117）

• 全选后取消任一选项时：（图5-118）

• 全选/单选全部选中时：（图5-119）

案例描述：

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

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

 

元件准备：

• 页面中：（图5-120）

• 中继器“PlayList”中：（图5-121）

• 中继器“PlayList”数据集中：（图5-122）

• 中继器“PlayList”样式设置中：（图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）

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

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

• 事件交互设置：（图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）

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

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

• 事件交互设置：（图5-127）

---------------------------------------------------- End ----------------------------------------------------

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

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>