• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure7.0教程(三)中继器的使用(3)

Axure7.0教程(三)中继器的使用(3)

作者:小楼 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure7.0中继器教程,axure7.0中继器,axure7.0视频教程,axure7.0教程,axure7.0教程实例等相关知识,小楼希望在学习及工作中可以帮助到您

本教程案例下载: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

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

3-3

事件三:从中继器中删除选定的项目;与上一篇教程删除中的操作不同,这个删除选定的项目,是指从中继器中解除我们在事件1中做的绑定。而不像上一篇教程中删除按钮并且删除关联的一行数据;在选择事件时,要记住选择中继器事件中的第3个,而不是第5个。

那么,为什么这么做呢?你可以在中继器中多添加几行数据,在保存onclick事件中不设置本事件,然后生成原型试一下,你会发现,你的每一次修改其他模块中的价格都会跟着变动。

3-4

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

您可能想查找下面的文章:

  • Axure教程:如何使用Axure中继器元件?
  • Axure教程 | 详解中继器的九宫格
  • Axure教程:用中继器和日期函数实现万年历
  • Axure 原型 | 关于中继器的简单使用及应用的场景
  • Axure教程:中继器实现列表到详情页的数据传递
  • Axure7.0教程(四)中继器的使用(4)
  • Axure7.0教程(三)中继器的使用(3)
  • Axure7.0教程(二)中继器的使用(2)
  • Axure7.0教程(一)中继器的使用(1)

相关文章

  • 2017-06-14高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-14Axure教程:用Axure实现晚会抽奖程序
  • 2017-06-13Axure教程|原型设计之抽屉列表
  • 2017-06-14Axure 8.0 拖动滑块设置数字和日期
  • 2017-06-13Axure实例:顶栏和侧边栏的固定和窗口自适应
  • 2017-06-13Axure教程:可使用的计算器demo制作(下)
  • 2017-06-13Axure教程:如何使用Axure中继器元件?
  • 2017-06-14Axure PR 7.0 实现页面纵向滑动效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
    • 用Axure8.0制作简单的登录窗口
    • Axure8.0原型案例:制作手机拨号界面
    • Axure 8.0实例:复选框的应用
    • Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
    • Axure教程:微信面对面建群原型设计
    • Axure教程:原型设计之多用户注册登录
    • Axure 制作下拉框省市县三级联动
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • axure九宫格拼图的实现原理

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有