Axure中继器的使用

Axure中继器的作用类似于ul ,li 这样,呈现多个具有相似样式的结构。本文简介Axure7.0中继器的使用,包括创建中继器,对中继器数据的增,删,查,改。本文的步骤比较详细,为了照顾刚接触Axure的看客。

这里是是RP文件的分享

目录:

一、创建中继器
二、设置中继器数据
三、动态添加中继器数据
四、动态删除数据
五、动态修改数据

 

一、创建中继器

1.在站点地图里面新建子页面:中继器的使用

2.拖放中继器(即:repeater)到子页面,给该中继器起一个名字(例子中用的是list)

3.再双击中继器(即:3)得到编辑单个中继器的子块样式。

我画了一个常用的产品介绍的布局,站位符为产品图片,矩形框为产品名称和价格,都相应的取了名字

4.现在返回中继器的使用页面,就可以看见纵向排列的四个子块构成的中继器的

 

二、设置中继器数据

5.在编辑中继器子块样式页面的下方,选择中继器数据集,插入你要的数据

6.在中继器项目交互中,双击csae1,分别勾选pro_name,pro_price,并点击fx,分别给其赋值为 ?[[Item.name]] ?和 ?[[Item.price]]

注意,手动书写也是有效的,但是必须按照格式写成 ?[[xxxxx]] ?这样的格式,为了防止写错可直接点击插入变量。

 

7.在中继器格式中,选择横向布局,可设置一行显示的项数,适当的调整间距,这样就可以的到一个初步的带数据的中继器。

三、动态添加中继器数据

8.在中继器使用页面上拖两个Text Field ,分别命名为input_name , input_price

9.拖动一个HTML Button取名add 并给按钮添加鼠标单击事件→新增行→勾选list(就是自己命名的那个中继器)→点击新增行→点击fx,输入命名规则。

这里的数据应先添加局部变量在点击插入变量

然后预览就可以动态添加数据了

 

四、动态删除数据

10.在编辑单个中继器的页面上添加一个删除按钮,给按钮添加单击事件就ok了

五、动态修改数据

11.编辑单个中继器,将pro_name 和 pro_price 转换为动态面板,分别命名为show_name和show_price,并分别添加编辑和显示两个状态,显示状态里面还是矩形框,编辑状态里面为输入框,名字为mod_name ? 和 ? mod_price.

12.向单个中继器中添加动态面板,命名为mod_button,面板有两个状态,修改状态为修改button,确定状态为确定button

13.给上一步的动态面板添加事件,修改button添加让显示数据的矩形框

14.给确定按钮添加事件动态更新

中继器还可以实现筛选数据,数据排序,翻页等效果,在这里就不一一细说了,原理都一样,在此还分享了示例 的PR文件,希望可以有所帮助,有误的地方或者有疑问的看客可以邮件联系。

 

 

 

 

 

发表评论

电子邮件地址不会被公开。