Axure RP实例教程:全选与取消全选效果
发布时间:2023-07-23 20:40:43
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图、流程图、原型和规格的设计制作,从低到高的视觉和交互保真度的全方位构建,是目前业界首屈一指的交互式产品原型设计软件!此次小编就带大家来看看Axure RP如何做全选与取消全选效果
1、案例效果:
初始状态/取消全选时:
全选后取消任一选项时:
全选/单选全部选中时:
2、案例描述:
列表中相邻的行具有交替的背景颜色;点击列表中复选框时,可以切换复选框的勾选状态,复选框被勾选时整行变为灰色,取消勾选时恢复默认颜色;列表中的复选框被全部勾选时,列表左下方的全选复选框变为被勾选状态;列表中的复选框有任何一个取消勾选时,全选复选框都会变为未勾选状态;全选复选框被主动勾选时,列表中所有的复选框均被勾选,全选复选框被主动取消勾选时,列表中所有的复选框均被取消勾选。
另外,本案例中当列表中某一行被双击时,该行为播放状态,歌曲名之前显示播放图标,并且显示听相似歌曲与看现场翻唱的按钮。
元件准备:
页面中:
中继器“PlayList”中:
中继器“PlayList”数据集中:
中继器“PlayList”样式设置中:
包含命名:
复选框(用于全选的复选框):SelectAll
文本标签(用于记录列表中复选框被勾选的数量):SelectNumber
中继器(用于歌曲列表):PlayList
组合(用于歌曲信息部分的同一操作):InfoGroup
组合(用于其它按钮部分的同一操作):ButtonGroup
图片(用于播放状态显示的频谱图标):SpectrumIcon
图片(用于显示歌曲MV图标):MVIcon
复选框(用于列表中每行的复选框):SelectItem
文本标签(用于显示歌曲名称):SongName
文本标签(用于显示歌手姓名):SingerName
文本标签(用于显示专辑名称):AlbumName
矩形(用于歌曲信息部分的灰色背景):BackgroundShape
3、思路分析:
完成歌曲列表的常规信息部分;(操作步骤1)
为播放状态的歌曲显示更多的按钮;显示频谱图标,将歌曲名称置于频谱图标右侧,显示整行灰色的背景;(操作步骤2)
为有MV的歌曲显示MV的图标,MV的图标在歌曲名称右侧间距5像素的位置;(操作步骤3)
双击歌曲列表中任何一项时,取消其它歌曲的播放状态,并将当前歌曲改变为播放状态;(操作步骤4~5)
勾选歌曲列表中任何一项的复选框时,整行显示灰色背景,勾选数量记录增加1;(操作步骤6)
如果勾选数量记录等于列表项的总和,勾选复选框“SelectAll”;(操作步骤7)
取消勾选歌曲列表中任何一项的复选框时,勾选数量记录减少1;取消勾选复选框“SelectAll”;(操作步骤8)
如果歌曲列表中取消勾选的项不是播放状态,取消显示整行的灰色背景;(操作步骤9)
在单击复选框“SelectAll”时判断复选框是否被勾选,如果该复选框被勾选则勾选歌曲列表中所有的复选框;否则,取消勾选歌曲列表中所有的复选框;这里需要注意的是,全选与取消全选只有在主动勾选或取消勾选复选框“SelectAll”时才能够生效,所以触发事件要选择复选框“SelectAll”的【鼠标单击时】而不是【选中时】和【取消选中时】。(操作步骤10~11)
4、操作步骤:
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像素”;
事件交互设置:
4、为组合“InfoGroup”的【鼠标双击时】事件添加“用例1”,设置动作为【更新行】于中继器“PlayList”,勾选【条件】,设置条件为“True”(表示全部符合条件),【选择列】为“IsPlay”,设置列的【Value】(值)为“False”;这一步完成了取消列表中所有歌曲的播放状态;
5、继续上一步,添加动作【更新行】于中继器“PlayList”,勾选【This】,【选择列】为“IsPlay”,设置列的【Value】(值)为“True”;这一步完成了将当前歌曲设置为播放状态;
事件交互设置:
6、为复选框“SelectItem”的【选中时】事件添加“用例1”,设置动作为【选中】元件“BackgroundShape”;【设置文本】于元件“SelectNumber”为【值】“[[Target.text+1]]”;公式“[[Target.text+1]]”表示目标元件文字加1;
7、为复选框“SelectItem”的【选中时】事件添加“用例2”,添加条件判断【元件文字】于“SelectNumber”【==】【值】“[[Item.Repeater.visibleItemCount]]”;设置满足条件时的动作为【选中】元件“SelectAll”;公式“[[Item.Repeater.visibleItemCount]]”的返回值为当前项所在的中继器的可见项数量;完成动作设置后,在用例名称上点击
8、为复选框“SelectItem”的【取消选中时】事件添加“用例1”,设置动作为【设置文本】于元件“SelectNumber”为【值】“[[Target.text-1]]”;【取消选中】元件“SelectAll”;公式“[[Target.text-1]]”表示目标元件文字减1;
9、为复选框“SelectItem”的【取消选中时】事件添加“用例2”,添加条件判断【值】“[[Item.IsPlay]]”【==】【值】“False”;设置满足条件时的动作为【取消选中】元件“BackgroundShape”;完成动作设置后,在用例名称上点击
事件交互设置:
10、为元件“SelectAll”的【鼠标单击时】事件添加“用例1”,设置条件判断【选中状态】于“当前元件”(This)【==】【true】,设置满足条件时的动作为【选中】元件“SelectItem”;
11、继续为元件“SelectAll”的【鼠标单击时】事件添加“用例2”,设置不满足操作步骤10的条件时,执行动作为【取消选中】元件“SelectItem”。
事件交互设置:
猜你喜欢
- Word表格中内容太多不能全部显示该怎么设置?在word中插入了一个表格,给每个单元格输入了内容,制作完成以后,发现不是所有的内容都显示,文
- 1.打开钉钉,登录后点击左上角的头像,然后能看到设置,再点设置。
- 很多朋友不太清楚Excel2016“最近使用的文档 ”显示个数如何设置?下面小编给大家带来设置及关闭方法,一起来看吧本篇介绍一下在excel
- 我们在办公过程中,难免会遇到Word文档中出现一些多余的线条,这些线条都无法直接按Delete键清理,那么,该怎么办呢?今天小编为大家总结了
- Excel中的并排比较不能使用具体该如何解决呢?接下来是小编为大家带来的excel2003不能并排比较的解决方法,供大家参考。excel20
- Excel作为办公人员常用的软件之一,获得了世界范围的推广和使用;在Excel中插入日历来说也许对于大部分的用户比较陌生,其实我们需要通过一
- Excel 是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多
- pdf文件由于无关操作系统平台,良好的跨平台特性能节省时间、人力、设备和成本等资源,在办公文档和开发文档领域得到广泛应用。很多初涉职场或是初
- 苹果今日向 Mac 电脑用户推送了 macOS 12.2 RC 更新(内部版本号:21D48),本次更新距离上次发布隔了 5 周时间。本次更
- 在Excel表格中怎么自动求和?求和是Excel表格中经常会用到的功能,那么在Excel表格中怎么样自动求和呢?教你使用快捷键,一秒求和。1
- ①首先我们启动WPS演示2013,单击菜单栏--插入--形状,选择一款图形插入。 ②右击图形,选择设置对象格式。
- word怎么绘制一个角度图?word中想要绘制一个带角度的图,该怎么绘制呢?下面我们就来看看word画一个角的教程,需要的朋友可以参考下在教
- 苹果公司官网昨天给大家上线了MagSafe外接电池,这是一款给iPhone 12系列设计的 * 电池,可以通过无线方式给iPhone充电。上线
- Excel中的好多函数,其名称大体雷同,但是功能却存在差异。 本文给您介绍的是COUNT函数,一起来看看吧count函数在我们日常工作中的使
- 用户在wps软件上会享受到许多功能带来的好处和便利,wps软件的功能有着word、excel等不同办公软件的支持,因此可以满足用户各种各样的
- 在Word2007文档中,用户可以为艺术字设置包括投影、透视在内的多种阴影效果,具体操作步骤如下所述:工具/原料Word2007步骤/方法第
- 如何打开或关闭Mac屏幕共享?您可以使用屏幕共享在离开时访问您的 Mac,在其他人的 Mac 上解决问题,或者就网站或演示文稿等项目与其他人
- 现在有很多小伙伴都都会编辑各种Word文档,但是在使用Word的时候,还是有不少的小伙伴觉得Word不是那么简单,编辑一个文档都要弄很久,效
- 近日,微软发布了全新Office应用——Microsoft Office移动APP的宣传视频,给大家介绍这个Office家族的新成员。Mic
- 使用WPS处理文字的时候,有时候需要给文档添加页眉,并且可能还需要给页眉添加横线,当然添加页眉横线的方法是非常多的,有些朋友可能不清楚怎么在