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

Axure教程:中继器如何切换标记状态?

作者: @许木胜 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure中继器标记行,axure中继器,axure中继器教程,axure中继器的作用,axure中继器的使用等相关知识, @许木胜 希望在学习及工作中可以帮助到您

中继器如何切换标记状态呢?一定有很多PM和我一样为此苦恼,一起来看看作者的解答。

写在前面

在之前的文章《Axure教程:如何使用Axure中继器元件?》中,@wu赖、在评论里指出:

有瑕疵,选中一次后背景颜色改变再点击一次背景颜色变成原始状态,但这行其实状态还是标记状态,会一起被删除。

问题产生的原因是什么呢?答案是当我们点击中继器某一行的时候,该行的选中状态会“toggle”而标记状态不会“toggle”也不会变为“false”,也就是说,中继器只是切换了选中状态而没有切换标记状态。

因此当点击某一行两次时,该行选中状态为“false”→“true”→“false”,而标记状态为“false”→“true”→“true”。于是我们看到的视觉效果就是白→蓝→白,而该行却依然处于标记状态,删除处于标记状态的行时该行依然会被删除。

这个问题看似简单,其实不然。在网上也无法搜到正确的解决方案。有的只是如何“标记行”和“取消标记”,并没有“切换标记状态”的方法。

那么,中继器到底该如何切换标记状态呢?

上下求索

想法一

一下子想到的便是,既然点击时行的选中状态可以“toggle”,那标记状态也跟着“toggle”不就好了?不幸的是,Axure并不支持对行标记状态的“toggle”。So bad.

点击中继器模式编辑操作区中的组合,在右侧“检视:组合——交互”中双击“Case 1”打开用例编辑<鼠标单击时>面板,如下图所示,可以看到没有“切换标记状态”动作,只有“标记行”和“取消标记”动作。

想法二

问题总会有办法解决的!既然选中状态可以“toggle”,标记状态不可以“toggle”,那我们可不可以删除处于选中状态的行呢?答案是Axure也不支持删除处于选中状态的行,只支持删除处于标记状态的行。真令人难过。

切换到主界面,点击选择用于删除的按钮,在右侧“检视:矩形——交互”中双击“Case 1”打开用例编辑<鼠标单击时>面板,如下图所示,可以看到没有“已选中”选项。

想法三

咦,除了已标记,这不还有个条件嘛!说不定那里有我们想要找的答案!点进去一看,还是可用的条件,绝望。。。

选择“条件”选项,点击右下角“fx”,试图设置删除行的条件为[[“isPitchOn”==true]],然而如下图所示,并没有这样的变量或函数。

条件判断

山穷水尽疑无路,柳暗花明又一村。

点击中继器模式编辑操作区中的组合,在右侧“检视:组合——交互”中双击“Case 1”打开用例编辑<鼠标单击时>面板,我们看到有个“添加条件”的按钮。

点开看看?可以看到,我们可以根据行的选中状态来决定对应用例(也就是这里的Case1:切换选中状态和标记行)的执行与否。

于是脑海里产生了这样的想法:

if (选中状态 == false) {选中状态 == true;标记状态 == true;}

if (选中状态 == true) {选中状态 == false;标记状态 == false;}

嗯!一定就是这样了!试试看!

解决方案

点击中继器模式编辑操作区中的组合,在右侧“检视:组合——交互”中双击“Case 1”打开用例编辑<鼠标单击时>面板,点击“添加条件”按钮,打开<条件设立>面板,将判断变量设为“选中状态”,判断值设为“false”,如图所示。

按“确定”按钮保存,关闭条件设立面板,关闭用例编辑<鼠标单击时>面板,回到中继器模式编辑操作区。在右侧“检视:组合——交互”中右键单击“鼠标单击时”,选择“添加用例”。

会自动弹出用例编辑<鼠标单击时>面板,点击正上方“添加条件”按钮,设置判断变量为“选中状态”,判断值为“true”。

按“确定”按钮关闭条件设立面板,回到用例编辑<鼠标单击时>面板,在左侧“添加动作”栏点击“元件——取消选中”添加取消选中动作。

再在左侧“添加动作”栏点击“中继器——数据集——取消标记”添加取消标记动作。

点击“确定”按钮关闭用例编辑<鼠标单击时>面板,回到中继器模式编辑操作区,可以在右侧“检视:组合——交互”中看到此时鼠标单击时会执行的动作。

大功告成!

点击上方“预览”按钮查看最新效果。

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

  • Axure教程:中继器如何切换标记状态?

相关文章

  • 2017-06-13如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13Axure实例:制作一个通用的移动端内容滚动区
  • 2017-06-14如何优雅的用Axure装逼?高保真原型心得分享
  • 2017-06-13自定义微信元件库:Axure基本元件的应用(下)
  • 2017-06-13Axure教程:中继器如何切换标记状态?
  • 2017-06-14Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-14Axure7.0教程(四)中继器的使用(4)
  • 2017-06-14Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法

文章分类

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

最近更新的内容

    • Axure教程:微信聊天列表原型制作(一)
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?
    • Axure教程:中继器实现列表到详情页的数据传递
    • Axure教程:导航栏和广告悬停效果制作
    • Axure8.0小案例:电动机原型
    • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
    • Axure实现两种滑动的方式(附源文件下载)
    • Axure教程:滑动鼠标页面自动切换(一)
    • Axure教程:原型设计之侧滑菜单

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

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