中继器通俗的解释就是一个小型的数据库,可对数据进行增加、删除、排序等操作。
关于中继器,我们重点讲解一个实际应用的例子,以某移动网站宽带专区为例,用户可在该专区内新装或续约宽带,通过查询条件过滤出自己想要的套餐。
这是一个最佳实践教程,会综合应用axure的知识。
点击下方阅读原文下载源文件
先看看该网站的实际截图:
页面上的功能说明:
1) 选择城市、速率、类型可以进行过滤
2) 宽带套餐信息显示的内容有速率、套餐简述、套餐价格、办理人数及立即抢购按钮
3) 鼠标经过宽带端口信息时会显示半透明窗口,显示套餐的详细描述信息
4) 点击立即抢购按钮进入套餐详情页面。
我们就以实现上面的功能为目标,体验中继器的使用方法。
示例场景:宽带专区套餐查询与过滤,为了演示方便,只设置部分地市
示例步骤:
1) 从生产环境上截图,获取图标(这是常用的方法,有的图标我们不需要自己来做,直接截图,或者图片另存为拿来使用)
2) 设置好文字标签
3) 地区、速率、类型选择按钮:几个按钮样式一致,设置一个后,其它复制
a)添加一个矩形,调整好大小和圆角
b)右键单击矩形设置交互样式,需要设置鼠标经过和选中的样式,截图当前默认选中的合肥,粘贴到设计区域,目的是为了获取颜色值
先设置鼠标悬停时的样式:边框为橙色
再设置选中状态下字体颜色和填充颜色,选中状态下按钮无边框,注意去掉:
设置选中样式的填充颜色值为橙色,通过颜色吸管获取颜色值,这是一个很实用的技巧哦,一定要熟悉!
设置好样式后,把截图粘贴过来的图片删除掉。
c)下面就是一个从1到N的复制/粘贴过程,下面的样式也准备好,添加个中继器(命名list)
d)F5预览,发现城市、速率、类型没有默认选中的样式,右键设置一下即可
再次F5看看效果:
4) 开始准备中继器数据
因为我们只是个原型,所以数据不必太多,场景覆盖到的数据有就行了。
5) 设置中继器内容项的样式
重点,这里要根据数据项设置元件的具体显示值,并要设置好布局样式
a)设置每项数据布局
双击中继器,进入中继器设置界面,添加相关标签和按钮,设置好样式,并给要显示的标签命名,便于后面赋值。
b)设置中继器样式
返回中继器上一层,设置一下样式属性,水平每排显示4个,水平和垂直间距为10,预览图看起来像个样子了,但是因为没有给标签赋值,所以数据看起来一个模样:
c)设置事件
开始设置事件,设置每个标签中要显示的内容:
确定后设计界面会同步变化,这次更接近真实数据了:
d)鼠标经过时样式
设置鼠标经过图片(占位符部分)时,显示半透明遮罩层:
半透明遮罩层组成:一个矩形,和后面的图片大小一致,设置填充色为黑色,透明度为50%;一个圆角虚线矩形显示速率(命名txtSpeed2),下方一个文本标签显示套餐详情(命名txtDesc2),将这个半透明遮罩层右键转换成动态面板,命名为mask,设置它初始状态为隐藏。
向前面一样,在中继器加载时,设置txtSpeed2和txtDesc2的值:
下一步是添加事件处理,在鼠标移入图片时,显示遮罩层,添加向上滑动的动画效果:
显示了遮罩层后,鼠标再次移出遮罩层时,我们需要隐藏遮罩层,并添加向下滑动的动画效果:
到这里,中继器本身的布局样式、数据、事件处理都设置完了,F5预览一下效果。
6) 地区、速率和类型的过滤处理
现在我们回头开始设置选择不同的地区、不同速率、不同类型是展示对应的数据。
a)处理单选效果
选中“合肥”按钮,设置OnClick事件(每个按钮要命名):
重要:事件里先取消选中所有同组按钮,再设置当前按钮为选中状态,这样就达到单选的目的了。
复制按钮合肥的事件到其它地区(安庆、蚌埠)的按钮上(事件可以复制粘贴的)
b)单击“合肥”过滤出合肥的数据
先移除地市的其它过滤条件,再添加过滤合肥(命名hefei)的条件,其它两个地区设置类似。
和地区过滤一样,设置速率过滤时,注意不要删除了地区的过滤,因为和地区的过滤是并存的,只需要删除同类条件(其它速率)即可:
设置速率的“不限”条件时,只删除速率的三个条件。、
中继器是个比较复杂的元件,有时我们可能根本就不需要这样的元件,我们只要能向用户解释出我们的需求即可。几句话其实也能解释清楚,毕竟做中继器的过滤这样的操作还是比较复杂的,花的时间过多可能偏离我们使用原型的本意了。