Axure 动态面板快速实现更多查询条件展示/隐藏

2020-07-0310:09:30原型设计Comments4,670 views字数 302阅读模式

一,说明

在PC端的后台管理界面上,经常会遇到一个表格有许多列,为了做数据筛选会做大量的查询条件,当查询条件较多时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19680.html

二、效果演示

Axure 动态面板快速实现更多查询条件展示/隐藏
案例链接:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19680.html

三、操作步骤

  1. 在画布中添加按关键字查找基本查询条件;
  2. 再添加高级查询条件,按日期查找按状态查询等查询条件;
  3. 将高级查询条件,全部选中,右键转换为动态面板并命名为高级查询;
  4. 给高级查询动态面板添加状态,状态命名为无数据;
  5. 选择查询条件高级元件添加鼠标单击交互事件,同步插入设置文本设置面板状态
  6. 设置面板状态时,注意在更多选项中勾选展开/收起元件,截图如下
    Axure 动态面板快速实现更多查询条件展示/隐藏
  7. 添加用例判断,当元件为高级时,展开高级程序,否则隐藏高级查询。
    详细操作如下:
    Axure 动态面板快速实现更多查询条件展示/隐藏
    Axure 动态面板快速实现更多查询条件展示/隐藏
    Axure 动态面板快速实现更多查询条件展示/隐藏

这个案例综合了动态面板状态切换及展开收缩效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19680.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19680.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/19680.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定