Axure树形菜单展开与折叠

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:Axure树形菜单展开与折叠

主要内容:树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互

应用场景:关系树、菜单后台维护、角色关系

案例展示:

Axure树形菜单展开与折叠


正文内容:

步骤一:建立菜单表头,拖入矩形并进行命名

步骤二:依次录入一级类目、二级类目、三级类目、商品名单,组成整体信息内容

步骤三,除了一级类目,全部设置成载入时隐藏

步骤五:添加一级类目下蔬菜的交互;单击蔬菜按钮——显示二级类目——设置选中效果;(其他一级类目同理设计,因篇幅关系不上图了)

步骤六:添加点击三个点弹出更多选项;制作弹窗的背景——填加选项

步骤七:依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项

1、叶菜交互

2、瓜菜的交互

因为我们三级类目是上下布局,这时我们应把两个菜单进行叠加

以上同理设计三级类目和商品名称,因为篇幅关系,不重复操作了,感谢观看。

本课小结:隐藏与显示的深度理解,选中时与取消选中时元件的变化以及用户体验的设计;多元件的状态思考。


相关课程直通车:

 中继器实现时间读取和修改-CSDN博客

Axure复选框全选反选取消高级交互-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/55823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学习的自我理解和想法(15)

学的是b站的课程(千锋教育),跟老师写程序,不是自创的代码! 今天是学Python的第15天,从今天开始,每天一到两个常用模块,更完恢复到原来的,开学了,时间不多&am…

滚雪球学Redis[9.1讲]:Redis的常见问题与最佳实践

全文目录: 前言1. Redis的常见问题排查常见错误信息与解决方案性能瓶颈的识别与处理数据一致性问题的排查 2. Redis的最佳实践Redis使用中的通用原则典型业务场景中的最佳实践如何避免Redis中的反模式 小结下期预告 前言 在上一章【第八章:Redis的扩展与…

Java 直接获取 pom.xml 配置的属性值

Java 直接获取 pom.xml 配置的属性值 1.需求描述2.代码示例3.结果演示 系统:Win10 JDK:1.8.0_351 IDEA:2022.3.3 1.需求描述 在开发一个 SpringBoot 项目的时候,需要从 pom.xml 中获取配置的 artifactId,name&#xf…

vscode配置ssh远程连接服务器

注意:重启软件或重启电脑,解决很多问题 一. vscode配置ssh vscode通过ssh连接服务器(吐血总结)_vscode ssh-CSDN博客 二. VScode无法远程连接主机问题 VSCode远程连接服务器报错:Could not establish connection to…

paddleOcr记录

情况1:默认不需要标注电能表样本、训练电能表OCR模型,需调用PaddleOCR出识别字符,对识别信息进行提取 01 – >> test01.py 情况2:需要从无到有标注OCR样本,或已有样本及标签文件,需训练电能表OCR模型…

Redis技术指南:数据类型、事务处理与过期键管理

什么是redis? Redis(Remote Dictionary Server,远程字典服务)是一个开源的、基于键值对的内存数据结构存储系统,可以用作数据库、缓存和消息中间件。Redis支持多种数据结构,如字符串(strings&am…

HCIP-HarmonyOS Application Developer 习题(十六)

(判断)1、HiLink通过分布式软总线的方式连接所有设备,强能力设备可对弱能力设备进行设备虚拟化,将弱设备当做本机设备直接调用。 答案:错误 分析:HiLink 主要针对的是应用开发者与第三方设备开发者&#xf…

K14836 加密通话(call)

题目描述 杰克船长担心船上存在其他海盗船的间谍,于是和他的心腹们设计了一种加密通话方式,其中对数字加密的方式是这样的:如果这个数字是1222334111,可看做1个1,3个2,2个3,1个4,3个1,那么会被加密,1132231431&#x…

力扣 中等 143.重排链表

文章目录 题目介绍题解 题目介绍 题解 class Solution {public void reorderList(ListNode head) {ListNode mid middleNode(head);ListNode head2 reverseList(mid);while (head2.next ! null) {ListNode nxt head.next;ListNode nxt2 head2.next;head.next head2;head2.…

Linux-正则表达式

正则表达式 定义DRE模式-纯文本/特殊字符 定义DRE模式-锚字符/点号字符 定义DRE模式-字符组/排除型字符组 定义DRE模式-区间 定义DRE模式-特殊字符组 定义DRE模式-星号 扩展正则表达式-问号 扩展正则表达式-加号 扩展正则表达式-使用花括号 扩展正则表达式-管道符号/表达式分组…

如何通过CDN优化网站服务器访问速度?

CDN,即内容分发网络(Content Delivery Network),在现代互联网中起着重要作用。它可以显著提升网站服务器的访问速度。以下是CDN在加速网站访问方面的主要优势及其工作原理。 1. 全球分布的服务器节点 CDN通过在全球范围内布设多个…

【Router】路由器中NAT、NAPT、NPT是什么?

参考链接 NAT vs. NAPT: What’s the Difference? IPv6 Network Prefix Translation (NPt) | pfSense Documentation (netgate.com) 趣谈NAT/NAPT的原理,这篇不可不读! - 知乎 (zhihu.com) NAT (Network Address Translation) NAT说明 NAT&#x…

《YOLO 标注工具全览》

《YOLO 标注工具全览》 一、YOLO 标注工具的重要性二、常见的 YOLO 标注工具介绍(一)LabelImg(二)Yolo_Label(三)在线标注工具 Make Sense(四)Ybat - YOLO BBox Annotation Tool&…

成都睿明智科技有限公司电商服务可靠不?

在这个短视频风起云涌的时代,抖音不仅成为了人们娱乐消遣的首选平台,更是众多商家竞相追逐的电商新蓝海。成都睿明智科技有限公司,作为抖音电商服务领域的佼佼者,正以其独到的洞察力和专业的服务,助力无数品牌在这片沃…

微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具

微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具 背景介绍 一直都是本地电脑运行微信开发者工具打包上传。多项目中新老版本对node版本要求不一致,老是切来切去。而且同一个人开发上传需要打包…

pandas-使用技巧

pandas-使用技巧 简单技巧 仅个人笔记使用,感谢点赞关注 简单技巧 pd.to_dict():Dataframe格式数据转字典数据pd.dropna():去nan值& | ~:pd逻辑运算符pd.isnan():判断是否为nan值pd.concat:多个pd拼接…

李宏毅机器学习2022-HW7-BERT-Question Answering

文章目录 TaskBaselineMediumStrongBoss Code Link Task HW7的任务是通过BERT完成Question Answering。 数据预处理流程梳理 数据解压后包含3个json文件:hw7_train.json, hw7_dev.json, hw7_test.json。 DRCD: 台達閱讀理解資料集 Delta Reading Comprehension …

8.扩散模型的未来---GPT及大模型(3)完结

涌现能力 在自然语言处理领域中,涌现能力(EmergentAbility)是指在训练模型时,模型可以自主地学习到新的任务或功能。换句话说,涌现能力是指模型具有自学习的能力,可以在没有额外训练数据的情况下,自主地实现新的任务或功能。涌现能力…

openpnp - 底部相机视觉识别CvPipeLine的参数bug修正

文章目录 openpnp - 底部相机视觉识别的CvPipeLine的参数bug概述笔记openpnp的视觉识别参数的错误原因备注END openpnp - 底部相机视觉识别的CvPipeLine的参数bug 概述 底部相机抓起一个SOD323的元件,进行视觉识别。 识别出的矩形错了,是一个很长的长方…

Qt_软件添加版本信息

文章内容: 给生成的软件添加软件的版权等信息 #include <windows.h> //中文的话增加下面这一行 #pragma code_page(65001)VS_VERSION_INFO VERSIONINFO