您的位置:首页 > 其它

AxureRP7.0基础教程系列 部件详解 中继器部件Repeater

2014-08-26 15:22 423 查看
原型库网站—讲师金乌原创发布,可自由转载,请注明出处!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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息