首页 > 代码库 > AxureRP7.0基础教程系列 部件详解 中继器部件Repeater
AxureRP7.0基础教程系列 部件详解 中继器部件Repeater
原型库网站—讲师金乌原创发布,可自由转载,请注明出处!
Axure中文官网:www.AxureRP.cn
《AxureRP7.0部件详解》
中继器概述 REPEATER OVERVIEW
中继器部件是一款高级部件,用来显示重复的文本、图片和链接. 通常使用中继器来显示商品列表、联系人信息列表、数据表或其他.
中继器的构成 2 PARTS OFREPEATER
中继器数据集 Repeater Dataset
中继器部件是由中继器数据集中的数据项填充的.这些填充的数据项可以是文本、图片或页面链接.
双击中继器,进入中继器数据集,在页面底部面板的最左侧标签可以看到.
中继器的项Repeater Item
被中继器部件所重复的布局叫做项(项目).双击中继器部件进入中继器项进行编辑.
在右侧图片显示的编辑视图中所展示的部件,会被重复多次(数据集中有几行就重复几次).
填充数据到设计区域
使用每项加载时事件填充数据到设计区域 POPULATING DATA INTO THE DESIGN AREAWITH ONitemload
每项加载时事件
插入文本Inserting Text
双击每项加载时OnItemLoad 事件并使用设置文本动作插入文本到你的中继器.
在
用例编辑器中选择设置文本Set text动作然后在用例编辑器右侧选择你想要插入的文本部件,在右下角点击设置文本值Set text to
value 打开 编辑文本Edit text 然后点击 Insert Variable or Function 选择变量
[[Item.ColumnName]]并点击OK.
当你的中继器项加载时,就会将数据集中列(column)的内容插入到你刚刚设置的文本部件中了.
中继器中插入图片
插入图片Inserting Text
导入图片到数据集中并使用 设置图像Set Image 动作 将图片插入到中继器项中.
在 中继器数据集中右键点击要插入图片的项,点击导入图片Import Image并添加图片.然后双击 每项加载时 Onitemload 事件,添加 设置图像 Set image 动作. 选择要将图片插入到哪个部件,然后在默认下拉选项中选择值 Value并在右侧点击fx选择[[item.ColumnName]] ,点击OK.
在中继器包含的部件中使用交互
USING REPEATER DATA IN INTERACTIONS ON CONTAINED WIDGETS
中继器的数据可以添加交互,比如添加基于条件判断的页面链接.
中继器数据交互
插入页面链接(参照页)Inserting Page Links
中继器数据集的项中可以添加参照页(页面链接),当用户点击时就跳转到相关页面.
右键点击一个空白项并选择 参照页Reference Page,然后选择页面.
在 终极其中选择一个你想要触发页面跳转动作的部件,对其添加动作 在当前页打开Open Link in CurrentWindow,然后选择链接到外部url或文件 Link toan external url or file ,点击fx ,在弹出的编辑值Edit Value窗口中点击 Insert Variable or function 下拉列表中选择在数据集中添加了参照页的列名.
使用条件
使用条件Using Conditions
数据集中的项值可以使用带有特定条件的动作进行评估,例如,你可以设置数据集中名称为age的列,如果值>16就设置为选择状态,这样可以突出显示特定的数据项.
中继器格式
REPEATER FORMATTING
中继器格式
布局 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
AxureRP7.0基础教程系列 部件详解 中继器部件Repeater