axure7.0教程_小楼作品(三)中继器的使用(3)

AxureRP7.0教程 小楼一夜听春语 12465℃ 0评论

(早期教程,Axure7.0.0.3133版对中继器做了改动,新版本教程目前只有视频课程中有,文字教程暂无)

本教程案例下载:axure7.0教程_小楼作品(三)中继器的使用(3) 

在上一节教程axure7.0教程_小楼作品(一)中继器的使用(1)axure7.0教程_小楼作品(二)中继器的使用(2)中我们分别讲解了增、删两个功能,那在今天的教程中我们来讲一下简单的修改功能:

比如,我们觉得商品的价格是应该可以修改的,那么我们在中继器中主页中添加一个修改的按钮(动态面板,点击之后变成保存)和一个用来修改价格的输入框,并设置中继器的事件来实现这个效果。

怎么做呢?步骤也非常的简单,我们把按钮拖进中继器的主页中适当的位置,然后转化成动态面板,并且在动态面板中增加一个状态叫保存,增加这个状态的时候,我们不用像axure6.5那样,新增一个状态然后添加按钮,修改文字,在axure7.0中,可以直接复制选中的状态为新状态,你只需要修改新状态的名字和里面的文字就可以了。然后我们分别设置着两个状态中按钮的事件(onclick):

3-1

修改按钮事件:修改按钮事件,要负责把隐藏的文本框显示出来,并且把所在的动态面板转换成保存的状态;本来没什么好说的,但是目前7.0.3113版本中存在bug,我们要在显示中继器交互的onload事件中多加一个隐藏文本框的事件,否则丫的不给你隐藏!顺便提一下,如果你隐藏的是动态面板,那就要在显示动态面板的事件前,多加一个隐藏动态面板的事件,否则丫的不给你显示,要点三下才能显示!

另外,特意提到的是,在axure7.0中,元件都可以隐藏(这个功能在右键中取消了,新的位置在元件坐标值编辑框的右面,和样式管理中)和移动,一般情况下无需再转换成动态面板了。

保存按钮事件:这是要重点说的了,在报存按钮的onclick事件中,我们要添加以下事件,来实现修改原有数据的效果。

事件1:像删除功能的实现一样,我们需要先标记要编辑的一行数据,这样才能够对数据进行操作;

事件2:然后我们设置编辑选定项目(更新被标记的行),选定中继器后,在属性中选择中继器中价格的项目名,并把新价格文本框中的值,赋给这个属性。

3-2

注意:在Axure7.0新版本中,上图中“新增到选定项目”更名为“标记行”,“编辑选定项目”更名为“更新被标记的行”。

附:通过局部变量获取文本框的文字赋给属性

3-3

事件三:从中继器中删除选定的项目(取消标记行);

3-4

注意:在Axure7.0新版本中,上图中“从选定项目删除”更名为“取消标记行”。

好了,这个效果讲解完毕,接下来,就是见证奇迹的时刻!你做对了么?


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(三)中继器的使用(3)

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 楼老师的教程讲的很清楚。
    小诺2013-08-26 17:07 回复
  2. 点击修改按钮,新的价格输入框设置为选中状态,更好用
    leeke2014-01-15 16:50 回复
  3. 建议楼老师在文尾加上相应课程的下一课链接,体验就更棒了
    jiatiange2014-01-17 20:40 回复
  4. 下载了这个原型,请问中继器中修改价格——保存价格无法实现转换是什么情况呢?谢谢
    鹏悦谦和2014-06-17 17:26 回复
    • 小楼一夜听春语
      有问题可以在群里咨询
      小楼一夜听春语2014-06-17 18:21 回复
  5. 最后为什么要取消行标记
    隔壁老王2016-09-14 17:41 回复