写在开头:
最近一阵在自学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)!
(4) 接着需要修改数据列名称,6种数据和6列名称一一对应好。
(5) 最后设置中继器的每项加载时动作为:设置文字到中继器中
这里有个小窍门:先勾选第一个需要设置文字的,输入好相应的[[item.xxxx]],然后再勾选第二个需要设置文字的,这时你会发现文本值自动呈现出来。
还有一点:左键双击[[item.xxxx]]的xxxx内容部分,即可直接修改定义名。
(6) 点击中继器的样式一栏,选择多页展示,每页项目数为8,起始页为1;
(7) 中继器数据展示图
2、进入正题
(1) 在中继器外部的下面创建两个无边框无背景的矩形框,尺寸为100*40,分别命名为“页码”和“数据数”;
(2) 然后设置中继器每项加载时的动作增添设置文字于“页码”矩形框,值为“页码:[[lvar1.pageindex]] / [[lvar1.pagecount]]” , 还需要设置Fx为lvar1=元件 this
其中函数pageindex的含义为当前页数,pagecount为总页数。
(3) 接着需要在上述同样的条件下,设置文字于“数据数”矩形框,值为“数据:[[lvar1.itemcount]]”,同样需要设置Fx;
(4) 创建两个按钮,分别命名为“上一页”和“下一页”。设置点击按钮的动作分别为设置中继器当前显示页面为previous和next;
(5) 再在中继器内部创建一个矩形框,矩形框100*40大小,内部加上一个“删除”按钮,设置删除按钮的鼠标点击的动作为:删除中继器当前目标行。
(6)最后在中继器外面的顶部创建每列数据的名称。
之后就可以点击F5进行浏览了。
该教程主要是关于中继器实用教学第一部分的内容
至此,灵活使用中继器(1)讲演结束,期待与您的交流沟通!