寻找引擎就会实行搜索,上边大家来看望利用中继器怎样兑现那些前端交互效用澳门永利娱乐总站

百度查寻

上1节我们讲课了中继器的基本原理和动用办法,本文通过多少个实际的案例来提携我们更进一步的控制中继器的使用方法,感受中继器的强硬。在原型设计时,善于利用中继器,可以使得进步原型的保真度。

当我们接纳搜索引擎输加入关贸总协定组织键词的时候,搜索引擎会依据搜索词模糊相配推荐1些相关的剧情在搜索框的下方突显,那里也饱含了我们的物色记录。点击搜索按钮,搜索引擎就会实施搜索,利用爬虫抓取的网页,遵照一定的算法再次回到寻找结果列表。
那么如此的原型交互作用,是还是不是可以透过Axure实现制作了?这正是明日为大家讲解的并行案例,借助中继器完结百度查寻提醒的意义。

澳门永利娱乐总站 1商品列表.png

本案例的授课适用于具有一定的Axure使用基础的人手,关于工具的操作步骤不做详细讲解。本文讲述的主要性在于逻辑的梳理以及部分启发性的笔触与方法,希望能够协助大家做出更酷炫的并行效用。

商品列表页涉及的交互首要涵盖筛选、排序以及翻页,上面大家来看望利用中继器怎么样贯彻这么些前端交互成效。拖入中继器至规划区域,双击中继器为中继器设置项,在中继器编辑界面添加图片及文件标签元件,作为商品图片、题目、价格、销量及评价的项,做好元件的命名工作。为中继器添加数据集,注意数据汇总列的称号必须为英文(何人让Axure是西班牙人支付的工具产品)。


澳门永利娱乐总站 2数据集.png

0壹 准备元件

此案例中需要使用的部件有文本框、矩形按钮和中继器。文本框用于输入搜索词,那里的类型供给安装为寻找;矩形按钮可以平昔从元件库中拖拽至搜索框出手,并将按钮中的文字修改为“搜索”;中继器用来呈现提示词列表,即遵照查找内容索引出来的列表,那里要求专注将中继器转换为动态面板,因为动态面板能够依据剧情自动扩张尺寸,默许隐藏动态面板

元件准备部分首要讲解中继器在本案例中的应用,首先为中继器数据集column0那1列预设一些内容(iphone、iphone七、iphone8、iphone8plus、iphonex、iphonex价格、iphonex配置、iphonex换屏、二手iphonex、维修iphone),共有十项数据内容;然后在为中继器的项设置3个鼠标悬停的竞相样式,填充色设置为奶油色;最后在将中继器项的边框颜色去掉。至此,中继器的显示效果完毕了,看上去与百度的职能基本1致。

接纳中继器“每项加载时”事件,将数据集内容赋值给标题、价格、销量及评价那些项,(图片就不导入了,有时间也能够拉长到数据集)。使用安装文本动作,将数据赋值给中继器的变量[[Item.title]]、[[Item.price]]、[[Item.sale]]、[[Item.evaluate]]。

02 交互设置

澳门永利娱乐总站 3每项加载时.png

a 中继器

这里根本有七个相互事件,第二个为中继器设置每项加载时事件(注意那里的互动设置的靶子是中继器不是项),目标是为中继器的项加载内容,在文书设置中校中继器项的值设置为函数[[Item.Column0]];第3个为中继器的项设置单击事件,在文书设置旅长搜索框的值设置为项的值,即函数[[this.text]],并逃匿中继器动态面板。

加载中继器的项

将项的值传递给文本搜索框

在中继器外添加壹些矩形元件作为排序规则和筛选标准,依据标价、销量、评价展开排序,遵照价格区间作为筛选标准,综合和全体看作私下认可排序和默许筛选。

b 文本框

为文本框添加1个文本改变事件,当文本框的内容变更时,大家希望达到如此的效果:突显中继器动态面板,移除此前的筛选结果,重新遵照新的搜索词实行索引筛选。那里须求表明的是添加新的筛选时,须求设定贰个条件,即在那之中继器数据汇总包涵搜索的始末时,执行筛选并显示出来,供给插入那样八个函数[[TargetItem.Column0.indexOf(LVAR1)>-1]]履行新的筛选。文本改变事件还索要加上另2个用例case二,用例中添加1个规则即只要文本框的内容为空,则实施的动作为隐匿中继器动态面板,记得将case二切换为if,case二经常暗许为else
if。

文本框设置文本改变事件

在这么些案例中,我们需求贯彻遵照价格降序、销量降序、评价降序查看商品列表。价格升序:选桐月件,添加“鼠标单击事件”,选中当前元件,动作配置面板中精选“添加排序”动作,名称填写“价格由低到高”,列选用price,排序类型选择Number,排序选择升序。将近年来元件设置为当选样式。(提前将价格、销量、评价等排序规则设置为三个组)

c 搜索按钮

首先供给想领会,点击搜索按钮后我们期待达到的功效是怎么的。尽管输入的搜索词不在中继器数据集里面,那时候大家要求在中继器数据汇总添加这一条数据;再度点击按钮,首先移除此前的整整筛选,
添加新的筛选,那里的筛选规则为规范索引。梳理清楚逻辑规则后,上边我们来看下怎么样设置交互事件。

为寻找按钮设置单击事件,添加首个用例,在编写制定条件中编辑函数,首先将中继器设置为壹些变量LAVENCORE一,然后插入函数[[LVAR1.itemCount]](筛选结果的多寡),在编写条件中设置值等于0,添加动作数据集添加行,在添加行到中继器时,先将文本框定义为部分变量LVA奥迪Q5一,然后在将以此片段变量添加到行。

加上其次个用例case2,动作设置中首先移除全体筛选,然后在丰硕新筛选中装置筛选标准为[[TargetItem.Column0==LVAR1]]。LVA兰德逍客一为文本框定义的变量,TargetItem.Column0表达的情趣为中继器数据集Column0那壹列数据,那里的数量包蕴从前筛选的结果。

寻找按钮设置单击事件

筛选结果的数目并不等于数据集项的数目,我们得以做个实验,添加五个按钮,叁个显得筛选结果的数额,二个显得数据集项的多少。在中继器项的加载事件中添加七个动作,设置多少个按钮的文本值分别为函数[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(设置的截图可参照上文 加载中继器的项

澳门永利娱乐总站 4价格升序.png

0三 最终的总括

到此截至,模拟百度找寻提醒的相互成效已经实现了,预览你的原型,欣赏你麻烦半天的文章吗。本案例中的重点在于中继器的回顾运用,中继器是Axure7.0版本之后新增添的效应,中继器能够看做成1个本地的袖珍数据库。熟识使用未来,还足以兑现电商列表的筛选,管理后台的规则查询或是在线随机抽奖等效果。

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


销量降序:选兰月件,添加“鼠标单击事件”,选中当前元件,动作配置面板中选拔“添加排序”动作,名称填写“销量由高到低”,列选用sale,排序类型选用Number,排序接纳为降序。将日前元件设置为当选样式。

 附:中继器函数表明

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

visibleItemCount
用途:中继器项目列表中可知项的数据。比如:项目列表共有一五项,分页彰显为每页陆项。当项目列表在第叁、二页时,可知项数据为6;当项目列表在第贰页时,可知项数据为三。

itemCount
用途:获取中继器项目列表的总数据,或许叫加载项数据。暗中同意景况下项目列表的总数据会与中继器数据汇总的数据行数量同样,但是,倘诺进展了筛选,项目列表的总数据则是筛选后的多寡,那么些数量不受分页影响。

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

pageCount 用途:获取中继器分页的总数据,即能够取得分页后共有多少页。

pageIndex 用途:获取中继器项目列表当前显示内容的页码。

Item 用途:获取数据集一行数据的集聚,即数据行的对象。

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

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

index 用途:获取数据行的索引编号,编号起初为一,由上至下每行递增1。

isFirst
用途:判断数据行是还是不是为第三行;借使是第一行,重临值为“True”,不然为“False”。

isLast
用途:判断数据行是或不是为最末行;即便是最末行,再次回到值为“True”,不然为“False”。

is伊夫n
用途:判断数据行是或不是为偶数行;假若是偶数行,再次来到值为“True”,不然为“False”。

isOdd
用途:判断数据行是或不是为奇数行;假设是奇数行,重临值为“True”,不然为“False”。

is马克ed
用途:判断数据行是不是为被标记;借使被标记,再次来到值为“True”,不然为“False”。

isVisible
用途:判断数据行是还是不是为可知行;假如是可知行,重回值为“True”,否则为“False”。

澳门永利娱乐总站 5销量降序.png

评说的安装方法同销量同样,只是参加排序的列区别,这里不做重新认证。综合:为元件设置“鼠标单击事件”,设置选中样式,选用“移除排序”动作,移除全部排序。

澳门永利娱乐总站 6移除全体排序.png

依据一9玖九以下、三千-399九、五千-599九、5000以上那多少个价格间距筛选商品。1九玖七以下:为元件设置“鼠标单击事件”,设置选中样式(提前将筛选标准设置为四个组),选择中继器动作“添加筛选”,选中中继器,设置名称“一九九陆元以下”,规则填写[[Item.price<=1999]],移除其余筛选。设置如下图所示:

澳门永利娱乐总站 7加上筛选-1.png

陆仟元之上设置与此类似。2000-399九:设置“鼠标单击事件”,设置选中样式,添加动作“添加筛选”,选中中继器,设置名称“3000元-399九元之间”,规则填写[[Item.price<=3999&&Item.price>=2000]],移除此外过滤。设置如下图所示:

澳门永利娱乐总站 8添加筛选-二.png5000-599九、6000上述与上述设置格局类似。

整套:选兰月件,添加“鼠标单击事件”,设置选中样式,添加动作“移除筛选”,移除全体过滤器。如下图所示:

澳门永利娱乐总站 9移除全体筛选.png

点击上一页或下1页按钮达成货物列表的翻页,达成思路如下:为矩形按钮设置“鼠标单击事件”,添加“设置当前来得页面”动作,页面选拔Next或Previous。设置如下图所示:

澳门永利娱乐总站 10翻页.png澳门永利娱乐总站 11用户列表.png

元件准备:拖动中继器至规划区域,双击中继器进入编辑界面,拖动陆个矩形,前多个矩形命名叫真名、性别、年龄、地区,后边五个矩形为编写按钮和删除。将前方多少个矩形选中并转载为动态面板,动态面板第二个状态命名字为显示,复制状态1数据,第三个情景命名称为编制,并将编辑修改为保存。拖动八个文本框至前多少个矩形框中,陆个文本框分别命名称为:编辑姓名、编辑性别、编辑年龄和编排地区,撤废编辑状态中前多个矩形的命名。选中中继器,分别添加NameText、SexText、AgeText和RegionText那四列数据,暗中认可Column列保存,作为行的序号。至此,全数的部件准备干活早已截至。

有关数据集的切切实实应用办法,请参见《Axure
玖.0高等教程:史上最强元件-中继器的应用方法》。

大家希望完结的职能如下:

  • 点击编辑,能够对当下行的数据字段实行编辑。
  • 点击保存,更新当前行的多少,使编辑修改后的多寡生效。为了达成上述的法力,大家供给对编辑和删除这五个矩形元件设置以下交互。编辑:入选元件,设置“鼠标单击事件”,首先添加“设置面板状态动作”,将动态面板切换为编写状态;然后为现名文本添加“获取关节”动作。交互设置如下图所示:澳门永利娱乐总站 12编辑.png保存:当选元件,设置“鼠标单击事件”,添加中继器“更新行”动作,将日前四项修改后的数额保存到中继器数据汇总,将前4项文本框的文字设置为部分变量LVAENCORE一;添加“设置面板状态动作”,将动态面板切换为显示状态。交互设置如下图所示:澳门永利娱乐总站 13保存.png

率先拖动一个菜谱元件至页面设计区域(注意不要拖入到中继器面板),菜单内容分别填写为方今插入和后边插入,隐藏菜单。首先大家照旧依旧旁观下这四个菜单的意义及效益:前边插入

  • 在当前行前边插入一条为编写状态的空数据。
  • 扩展的行序号为插入行的序号。
  • 铺排行及前面行的序号+一。前边插入
  • 在当前行前面插入一条为编写制定状态的空数据。
  • 追加的行序号为插入行的序号+一。
  • 插入行前边行的序号+壹。

插入行的交互完结思路如下:右击菜单:当选动态面板,为动态面板设置“鼠标右击事件”,利用全局变量存款和储蓄当前行的序号,为现在行序号的更变做好基础。那里运用系统默许的大局变量OnLoadVariable存款和储蓄插入行的序号,移动菜单达到鼠标的岗位,突显菜单
。设置如下图所示:

澳门永利娱乐总站 14右击菜单.png

前面插入:为菜单项添加“鼠标单击事件”,添加中继器动作“更新行”,设置规则:当序号大于等于插入行序号时,目的行序号+1,添加一条与插入行序号壹致的空数据,隐藏菜单。交互设置如下图所示:

澳门永利娱乐总站 15近期插入行.png前面插入:为菜单项添加“鼠标单击事”,添加中继器动作“更新行”,设置规则:当序号大于插入行序号时,目的行序号+一,新加上的行序号+一,隐藏菜单。交互设置如下图所示:澳门永利娱乐总站 16末尾插入行.png保存新插入行的数码后,供给释放全局变量的值,以有限支撑后续的编写和插入操作能够平常使用,因而供给将上文中保留按钮再添加一个动作为变量赋予3个空值。设置如下:澳门永利娱乐总站 17授予空值.png

中继器要是想要将插入行的数据暗中认可为编辑状态,大家需求为中继器事件“每项加载时”,添加二个新的情景(情况就是用例,玖.0汉化后的叫法分歧)。当全局变量OnLoadVariable等于序号时,设置动态面板为编写状态,姓名文本获取关节。为了保障插入行后,数据依照科学的序号举办排序,而不是插入行数据永远突显在最终一行,则必要为中继注重新添加排序规则,依照序号数字排序。中继器交互设置如下图所示:

澳门永利娱乐总站 18中继器交互设置.png

当选删除矩形元件,设置“鼠标单击事件”,添加中继器动作“删除行”,动作配置面板中甄选当前行。设置如下图所示:

澳门永利娱乐总站 19删除行

要是你对Axure或原型设计有趣味,希望系统性地球科学习Axure知识,精通越多Axure使用技术;恐怕希望经过临摹交互案例,进一步升级高保交互设计能力。请点击下方关切按钮,查看越来越多连载小说。点击获取案例小说源文件

相关文章