用网站做平台有哪些,tk域名注册地址,阿里云申请域名做网站,视频直播需要哪些设备案例73. 全选与取消全选效果案例来源:百度音乐-音乐盒案例效果#xff1a;初始状态/取消全选时#xff1a;(图5-117)全选后取消任一选项时#xff1a;(图5-118)全选/单选全部选中时#xff1a;(图5-119)案例描述#xff1a;列表中相邻的行具有交替的背景颜色#xff1b;点…案例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.xs.text.length*125]]”{y}“[[Target.y]]”的位置公式中“s”为局部变量其内容为元件“SongName”的对象实例这里要注意的是因为歌曲名称长度不一所以不能移动MV的图标到固定的位置在这里移动公式“[[s.xs.text.length*125]]”的含义为“歌曲名称元件的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.text1]]”公式“[[Target.text1]]”表示目标元件文字加17、为复选框“SelectItem”的【选中时】事件添加“用例2”添加条件判断【元件文字】于“SelectNumber”【】【值】“[[Item.Repeater.visibleItemCount]]”设置满足条件时的动作为【选中】元件“SelectAll”公式“[[Item.Repeater.visibleItemCount]]”的返回值为当前项所在的中继器的可见项数量完成动作设置后在用例名称上点击选择菜单中最后一项将用例的条件判断由“Else If”转换为“If”8、为复选框“SelectItem”的【取消选中时】事件添加“用例1”设置动作为【设置文本】于元件“SelectNumber”为【值】“[[Target.text-1]]”【取消选中】元件“SelectAll”公式“[[Target.text-1]]”表示目标元件文字减19、为复选框“SelectItem”的【取消选中时】事件添加“用例2”添加条件判断【值】“[[Item.IsPlay]]”【】【值】“False”设置满足条件时的动作为【取消选中】元件“BackgroundShape”完成动作设置后在用例名称上点击选择菜单中最后一项将用例的条件判断由“Else If”转换为“If”事件交互设置(图5-126)10、为元件“SelectAll”的【鼠标单击时】事件添加“用例1”设置条件判断【选中状态】于“当前元件”(This)【】【true】设置满足条件时的动作为【选中】元件“SelectItem”11、继续为元件“SelectAll”的【鼠标单击时】事件添加“用例2”设置不满足操作步骤10的条件时执行动作为【取消选中】元件“SelectItem”。事件交互设置(图5-127)~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~小楼老师全新打造Axure RP 9精品课程以独有的教学方法与技巧帮助你以最短的时间高效的完成学习目标。《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】喜欢 (51)or分享 (0)
