axure商城

6、灵活使用中继器(1) —— Axure实用交互

写在开头:

最近一阵在自学MySQL数据库的使用以及php语言,学得我真的是xxxx脑子发懵眼睛发直的。

这几天空闲时间也看了许多在平台上发表的新文章或者新教程,

但总感觉自从平台升级换代后——

 

卖源文件的卖家多了,十有八九都标注了“资源下载”的字样

 

于是我也蠢蠢欲动,追个时髦凑个热闹打算插上一足。

哪位原型交互爱好者要是对我的高保真原型感兴趣的话,可以加我QQ购买,号码在上一篇文章的评论处。

详见上一篇文章实战高保真demo

 

书归正题

当然,写这篇文章的侧重点还是针对中继器的使用方法进行基础教学

预览效果如下:

灵活使用中继器

 

开始原型设计

1、准备材料

(1) 首先,打开我们万能的Axure软件,在画板上创建一个中继器,并命名为shopping;双击中继器进入其内部,并删除内部已存在附带的矩形框。

(2) 在页面里创建6个100*40的矩形框,依次排列(边框重合)在一行,并分别命名为brand、name、style、memory、video、price

(3) 为了能让在座的各位以最直观的方式观察数据,同时不花费你宝贵的时间。于是我细心的手动打了(应该有掌声吧)许多数据,为你省去不必要的繁琐时间。

链接在此:数据内容

 

首先需要复制Excel的数据,接着按照下图所示,左键点击“1”的位置按Ctrl+v进行复制操作(注意是点击一次,而不是双击!不是把数据复制在1的文本框内,而是以1作为复制数据的原点),然后你就能发现中继器中的数据出现了(鹅妹zing)!

6、灵活使用中继器(1) —— Axure实用交互

 

(4) 接着需要修改数据列名称,6种数据和6列名称一一对应好。

6、灵活使用中继器(1) —— Axure实用交互

 

(5) 最后设置中继器的每项加载时动作为:设置文字到中继器中

6、灵活使用中继器(1) —— Axure实用交互

 

这里有个小窍门:先勾选第一个需要设置文字的,输入好相应的[[item.xxxx]],然后再勾选第二个需要设置文字的,这时你会发现文本值自动呈现出来。

还有一点:左键双击[[item.xxxx]]的xxxx内容部分,即可直接修改定义名。

6、灵活使用中继器(1) —— Axure实用交互

 

(6) 点击中继器的样式一栏,选择多页展示,每页项目数为8,起始页为1;

6、灵活使用中继器(1) —— Axure实用交互

 

(7) 中继器数据展示图

6、灵活使用中继器(1) —— Axure实用交互

 

2、进入正题

(1) 在中继器外部的下面创建两个无边框无背景的矩形框,尺寸为100*40,分别命名为“页码”和“数据数”;

(2) 然后设置中继器每项加载时的动作增添设置文字于“页码”矩形框,值为“页码:[[lvar1.pageindex]] / [[lvar1.pagecount]]” , 还需要设置Fx为lvar1=元件 this

其中函数pageindex的含义为当前页数,pagecount为总页数。

6、灵活使用中继器(1) —— Axure实用交互

 

(3) 接着需要在上述同样的条件下,设置文字于“数据数”矩形框,值为“数据:[[lvar1.itemcount]]”,同样需要设置Fx;

6、灵活使用中继器(1) —— Axure实用交互

 

(4) 创建两个按钮,分别命名为“上一页”和“下一页”。设置点击按钮的动作分别为设置中继器当前显示页面为previous和next

6、灵活使用中继器(1) —— Axure实用交互

 

(5) 再在中继器内部创建一个矩形框,矩形框100*40大小,内部加上一个“删除”按钮,设置删除按钮的鼠标点击的动作为:删除中继器当前目标行

6、灵活使用中继器(1) —— Axure实用交互

 

(6)最后在中继器外面的顶部创建每列数据的名称。

6、灵活使用中继器(1) —— Axure实用交互

 

6、灵活使用中继器(1) —— Axure实用交互

 

之后就可以点击F5进行浏览了。

该教程主要是关于中继器实用教学第一部分的内容


至此,灵活使用中继器(1)讲演结束,期待与您的交流沟通!

 

 

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

【元件库】简洁大气后台系统元件库—Inspinia最新前端元件库

2018-11-7 22:23:00

Axure教程

6、灵活使用中继器(2) —— Axure实用交互

2018-11-23 20:37:50

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索