仗中继器实现百度搜索提示的作用。每点击一浅上加一个初的区域。

百度搜索

中继器(英文名Repeater)是Axure RP
7.0推出的初效能,是目前为止Axure最复杂的效力(没有之一),学习她的行使有助于我们快设计片苛的并行界面。下面和大家分享自己的用体验。

当我们以搜索引擎输入关键词之时节,搜索引擎会基于搜索词模糊匹配推荐一些系的始末以搜索框的花花世界显示,这里呢带有了咱的物色记录。点击搜索按钮,搜索引擎就见面实行搜,利用爬虫抓到手之网页,按照一定的算法返回寻找结果列表。
那么这样的原型交互作用,是否好通过Axure完成制了?这虽是今吗大家讲解的互相案例,借助中继器实现百度搜索提示的法力。

中继器这个翻译是于丁费解之,如果直译成“重复器”虽然非极端专业但再次有益于理解,或者简直不编译,用“Repeater”就实施。用了Asp.Net的食指,一定对里面的Repeater很熟稔,没错,Axure的Repeater与Asp.Net的规律基本上是一模一样的。

准案例之讲课适用于有自然的Axure使用基础的食指,关于工具的操作步骤不举行详细讲解。本文讲述的根本在逻辑的梳理与一些启发性的笔触和措施,希望能够帮大家做出还酷炫的互作用。

优先来说说Repeater解决什么问题。


01 准备元件

该案例被要用的预制构件有文本框、矩形按钮和中继器。文本框用于输入搜索词,这里的种类需要安装为觅;矩形按钮可以一直由元件库中拖拽到搜索框右,并以按钮中之契修改为“搜索”;中继器用来展示提示词列表,即因查找内容索引出来的列表,这里需要留意将中继器转换为动态面板,因为动态面板可以根据情节自动扩展尺寸,默认隐藏动态面板

元件准备部分重要教学中继器在本案例被的利用,首先为中继器数据集column0这无异于列预设一些情(iphone、iphone7、iphone8、iphone8plus、iphonex、iphonex价格、iphonex配置、iphonex换屏、二手iphonex、维修iphone),共有10起数据内容;然后以啊中继器的起设置一个鼠标悬停的互动样式,填充色设置为灰;最后当用中继器项之边框颜色去丢。至此,中继器的显示力量就了,看上去与百度的效用基本一致。

请求圈之下图片。上方是一个表单,有5单表单部件和一个“添加”按钮,界面默认显示下方4独图文区域。点击“添加”后出现第5个图文区域。每点击一坏补充加一个新的区域。没有Repeater之前,要打这样的原型是蛮窘迫的。

02 交互设置

图片 1

a 中继器

此处关键有少独相事件,第一个也中继器设置各起加载时事件(注意这里的互相设置的目标是中继器不是桩),目的是吧中继器的起加载内容,在文书设置中将中继器项的价设置为函数[[Item.Column0]];第二独为中继器的起设置单击事件,在文件设置中将搜索框的价值设置也宗的价,即函数[[this.text]],并躲中继器动态面板。

加载中继器的起

用起之值传递让文本搜索框

应用Repeater实现以上效果是比较便于的。

b 文本框

否文本框添加一个文件改变事件,当文本框的情变更时,我们意在达到如此的成效:显示中继器动态面板,移除之前的筛选结果,重新按新的搜索词进行索引筛选。这里要证明的是补偿加新的筛选时,需要设定一个极,即当中继器数据汇总包含搜索的情常常,执行筛选并出示出来,需要插入这样一个函数[[TargetItem.Column0.indexOf(LVAR1)>-1]]履行新的罗。文本改变事件还得加上任何一个用例case2,用例被补充加一个口径就是要文本框的始末吧空,则执行的动作为躲中继器动态面板,记得将case2切换为if,case2通常默认为else
if。

文本框设置文本改变事件

1、  在界面被拖入一个Repeater。中文名叫“中继器”。

c 搜索按钮

率先要想清楚,点击搜索按钮后我们期待达到的职能是如何的。如果输入的物色词不以中继器数据集里面,这时候我们用在中继器数据集中长这无异于久数据;再次点击按钮,首先移除之前的凡事罗,
添加新的淘,这里的淘规则也规范索引。梳理清楚逻辑规则后,下面我们来拘禁下怎么设置交互事件。

呢找按钮设置单击事件,添加第一个用例,在编排条件被编函数,首先将中继器设置也片变量LAVR1,然后插入函数[[LVAR1.itemCount]](筛选结果的数额),在编辑条件被设置值等于0,添加动作数据集添加行,在补偿加行到中继器时,先拿文本框定义也一些变量LVAR1,然后在以之片变量添加到行。

添加亚独用例case2,动作设置中率先移除全部筛选,然后于长初筛中安装筛选标准也[[TargetItem.Column0==LVAR1]]。LVAR1为文本框定义的变量,TargetItem.Column0表达的意为中继器数据集Column0这同排列数据,这里的数包含之前筛选的结果。

追寻按钮设置单击事件

筛选结果的多少并不等于数据集项的多寡,我们可举行只实验,添加两个按钮,一个著筛选结果的数量,一个亮数据集项的数。在中继器项的加载事件中补充加少个动作,设置两个按钮的文本值分别吗函数[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(设置的截图而参照上文 加载中继器的项

图片 2

03 最后之总结

至这结束,模拟百度搜索提示的彼此作用既好了,预览你的原型,欣赏而麻烦半龙的著作吧。本案例中之要紧在中继器的归纳使用,中继器是Axure7.0版本之后新长的功力,中继器可以看做成一个地面的袖珍数据库。熟练运用后,还可以兑现电商列表的淘,管理后台的尺度查询或是在线随机抽奖等作用。

据案例的源文件链接:https://pan.baidu.com/s/1c2rXauc 密码:h3ta


正好拖上是者样子的。

 附:中继器函数说明

Repeater 用途:中继器的目标。Item.Repeater即为Item所在的中继器对象。

visibleItemCount
用途:中继器项目列表中不过见项的数据。比如:项目列表共有15宗,分页显示为各国页6桩。当型列表在第1、2页时常,可见项数据为6;当型列表在第3页时,可见项数据也3。

itemCount
用途:获取中继器项目列表的毕竟数据,或者受加载项数据。默认情况下路列表的终究数据会跟中继器数据集中的数据行数量同样,但是,如果进行了筛选,项目列表的毕竟数量虽然是筛选后底多少,这个数不受分页影响。

dataCount 用途:获取中继器数据汇总数据行的总数量。

pageCount 用途:获取中继器分页的究竟数量,即能获得分页后共有多少页。

pageIndex 用途:获取中继器项目列表当前来得内容之页码。

Item 用途:获取数据集一行数的集结,即数据行的目标。

TargetItem 用途:目标数据行的靶子。

Item.列名 用途:获取数据行中指定列的价值。

index 用途:获取数据行的索引编号,编号开头为1,由达到至下各行递增1。

isFirst
用途:判断数据行是否也第1实行;如果是第1实行,返回值为“True”,否则也“False”。

isLast
用途:判断数据行是否也极端末行;如果是极其末行,返回值为“True”,否则也“False”。

isEven
用途:判断数据行是否也突发性数行;如果是偶数行,返回值为“True”,否则也“False”。

isOdd
用途:判断数据行是否也惊诧数行;如果是奇数行,返回值为“True”,否则也“False”。

isMarked
用途:判断数据行是否也受记;如果为记,返回值为“True”,否则也“False”。

isVisible
用途:判断数据行是否为可见行;如果是可见行,返回值为“True”,否则也“False”。

图片 3

2、     设置Repeater内部部件

双击这个Repeater,进入Repeater内部界面。默认它会来一个矩形部件,删除其,按自己的求拖入其他部件。如下,这个由于同张图片和“活动称”、“活动状态”、“开始时”、“结束时间”4独Label部件组成的区域虽是一旦重复显示的内容。

图片 4

注意,这时如让每个部件命名。从即以Repeater的动作被找到部件。方法如下:

图片 5

3、  设置Repeater的数据集(Dataset)

以Repeater编辑界面下方可看到以下界面。Repeater
Dataset是数据集,另外两单相同会面再说。

以Dataset中安要显得的数额的结构,同时可补偿加默认显示的多少。也就是“Column”与“Row”。以下”Name”、”Status”、”Start”、”End”、”Image”为抬高的Column,注意列名必须也英文。

图片 6

4、  设置Repeater的动作(Item Interactions)

a)        设置文本部件值——“Set Text”

于OnItemLoad(注意不是OnLoad,中文版的同校要自行翻译)中双击Case。

图片 7

双击后面世以下界面。根据工作需设置部件值。比如自己是只要装同一摆放图纸以及季单Label,于是分别选择了Set
Text与Set
Image。在最右边选择Repeater内部的预制构件(注意:必须在第2步时设置部件名称,否则无法区分部件。)。以下也Set
Text的界面。选择部件后,在凡间选择Rich Text,再点击Edit Text。

图片 8

点击Edit Text后面世以下界面。

图片 9

点击Insert Variable of Function。

图片 10

每当Repeater/Dataset中选择列的价。如item.Name,item.Status,item.Start等。然后以左侧文本框会油然而生带[[]]的值。[[]]是Axure取值的语法。

图片 11

b)        设置图片——“Set Image”

如上说的凡安装文本的办法,如果是图形,可参见下图。可直接由电脑里导入,也可装成Dataset里的值,当然也可是根据Axure的语法设置成外价值。

图片 12

5、  设置Repeater的格式

下图是安装Repeater格式的界面。可以设置Wrap(自动换行),并安装各几独品种开换行。背景啊的也得安装。

图片 13

运行一下就可以看到成效了。

6、  实现点击“添加”的效力

回去主页面,这时变成以下职能了。Repeater根据活动计算呈现出所见就所得之效益。接下来,我们抬高几单表单部件和一个“添加”按钮,来贯彻“添加”功能。

图片 14

为表单中之部件设置名称,如图。

图片 15

啊“添加”部件设置OnClick事件,如图,双击”Case”:

图片 16

每当打开的Case Editor界面中甄选Repeaters-Dataset-Add
Rows,勾选右侧复选框,点击右侧下方的Add
Rows按钮。其规律是当点击“添加”按钮时于Repeater的Dataset中补充加一行。

图片 17

弹有以下窗口,点击Add
Row,在初补的马上等同推行遭录入表单部件值。可以经点击fx按钮添加。

图片 18

点击fx后跻身以下窗口。点击Add Local
Variable。在首先格录入变量名称,如LVAR_Name。如果如取文本框的价值,第二束缚可以选text
on widget。第三格选相应的构件。

图片 19

再也点击Insert Variable or
Function,选择刚刚装的变量LVAR_Name。点击OK。再用其它几只部件值也安上即可。

这般,就成功了点击“添加”按钮的效力了。

相关文章