AxureRP7.0基础教程 部件详解中继器repeater
原型库网站— 讲师金乌原创发布,可自由转载,请注明出处!
Axure 中文官网:www.AxureRP.cn
《AxureRP7.0部件详解》
中继器概述 REPEATER OVERVIEW
作为一款高端组件,在展示多个类型的内容时发挥着重要作用。它被广泛应用于商品目录、联系人名单以及数据表格等场景下。
-
-
- 中继器的构成 2 PARTS OFREPEATER
-
中继器数据集 Repeater Dataset
中继器部件由中继器数据集中的数据项进行填充。这些填充的数据项包括文本文件、图片文件以及指向网页的链接信息。请双击中继器以启动其功能,在页面底部面板的左侧找到并点击最左侧的标签即可进入中继器数据集。
中继器的项Repeater Item
被中继器组件所重复使用的布局被称为项或项目.点击进入其中继器项后即可开始编辑操作.
在右侧显示的编辑视图中会展示多个相同的组件元素(每个数据行对应一个).
填充数据到设计区域
通过在每个JavaScript负载过程中触发相应的事件来注入所需的数据到指定的DOM节点集合中
[](http://axure.yuanxingku.com/uploads/201405/1399601760mW6An1nU.png ""每项加载时事件" t ")每项加载时事件
- 插入文本Inserting Text
触发OnItemLoad事件并执行设置文本动作以将所需内容填入中继器。
在用例编辑器中选择Set text动作并在右侧找到需要填入的组件。
右键点击或直接输入路径打开编辑界面后拖动左侧变量[[Item.ColumnName]]到空白处确认。
当系统检测到中继器项加载时, 就会触发将数据集中的列内容被插入至指定的文本区域中.
在中继器内添加图像
- 插入图片Inserting Text
将图片导入数据集中,并通过设置图像为Set Image类型的命令将图片加入到中间节点字段中。
在 中继器数据集的工作表中双击需要插入图片的单元格,并通过'导入图片'功能将选定的图像添加到当前项目中。随后,在每项加载时触发的Onitemload事件中添加设置图像Set image指令。根据需要确定目标组件或区域,并从默认选项列表中选择对应的目标字段Value。通过右侧的fx按钮输入[[item.ColumnName]]后点击OK完成操作。
在中继器包含的部件中使用交互
USING REPEATER DATA IN INTERACTIONS ON CONTAINED WIDGETS
中继器的数据可以添加交互,比如添加基于条件判断的页面链接.
...中继器的数据交互
- 插入页面链接(参照页)Inserting Page Links
在其中允许添加参照页(页面链接),而每当有用户点击时会直接跳转至相应页面
右键点击一个空白项并选择 参照页Reference Page,然后选择页面.
根据需求,在核心目标中挑选一个可触发页面跳转操作的关键组件,并对该组件执行如下操作:首先打开CurrentLink in CurrentWindow功能;随后,在弹出选项中选择跳转至外部URL或文件;接着点击fx图标;随后,在出现的编辑值窗口内执行插入变量或函数的操作;最后从下拉菜单中选取数据集中包含参照页列名的那一项进行配置。
[](http://axure.yuanxingku.com/uploads/201405/1399606749dILTPm0u.png ""使用条件" t ")使用条件
- 使用条件Using Conditions
在数据集中可以选择满足特定条件的动作来进行评估,在这些动作中你可以选择设置一个符合条件的列例如年龄列当其数值大于16时将其标记为已选状态这样就能更加清晰地展示出符合条件的具体数据项
中继器格式
REPEATER FORMATTING
[](http://axure.yuanxingku.com/uploads/201405/1399607213vDvts2so.png ""中继器格式" t ")中继器格式
布局 Layout: 该设置允许改变数据的显示方式.
纵向 Vertical: 设置中继器数据集中的项纵向/垂直显示.
横向 Horizontal : 设置中继器数据集中的项横向/水平显示.
换行 Wrap Grid : 超过指定数量就换行/换列.
每列包含数量 Items Per Column: 设置每行/每列中包含的数据项的数量.
项的背景色 Item Background: 给中继器添加背景色
背景色 Back Color: 给每个中继器的项添加背景色.
交替背景色 Alternating Color: 给中继器的项添加交替背景色.
分页 Pagination: 设置在同一时间显示指定数量的数据集的项.
多页 Multiple Pages: 将中继器中的项放在多个页面中切换显示.
每页项的个数 Items Per Page: 设置中继器的项在每个单页中显示的数量.
开始页 Starting Page: 设置默认显示哪个页面.
间距 Spacing: 设置行/列数据之间的间隔
Row: 设置每行数据之间,相隔的像素大小.
Column: 设置每列数据之间,相隔的像素大小.
中继器部件的高级教程
排序Sort
过滤Filter
分页Paginate
