axure选中后横线切换_Axure8.0|动态面板内容简单切换技巧

无论做web段还是移动端,常常会用到动态面板固定在某个区域来变换内容,达到节省空间的作用,今天分享的就是如何实现这种方式。

预览效果:

一、元件准备

以IT/互联网、设计创作、职场金融这三组为例,所涉及到的元件分别为it1(小竖条矩形)、it(标识”IT/互联网”矩形)、 design1(小竖条矩形)、design(标识“设计创作”矩形)、 finance1(小竖条矩形)、finance(标识“职场/金融”矩形)以及最后的动态面板neirong(分为三组,名称分别对应it、design、finance)。

注:小竖条矩形默认颜色是灰色的,这里填充颜色只是为了看清楚。

二、添加事件

1,将三个小竖条矩形设置选项组,名称为“标记”,并且分别添加选中事件:填充颜色 #2CC27B。

2,将三个矩形设置选项组,名称为“课程”,并且分别添加选中事件:填充颜色 白色。

释:这里设置选项组的目的是为了当点击其中一个为选中时,其他两个就会变为不选中。

3,鼠标单击 “it(IT/互联网)” 设置动态面板neirong ,选择状态 Value,状态名称 [[this.name]];

选中 it1和it。

将it的鼠标单击事件复制然后粘贴到“desgin(艺术设计)”、finance(职业/金融),且分别将选中对应改为 design1和design、finance1和finance。

4,针对上下拖动动态面板而不超出框架这一实现方式可以参考上一期的 Axure8.0|移动端上下滑动不出屏  。

三、效果

作者:乐悠悠,QQ:714226583,产品新人,目前在找工作。

本文由 @乐悠悠 原创发布于人人都是产品经理。未经许可,禁止转载。

给作者打赏,鼓励TA抓紧创作!赞赏

2人打赏

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

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

相关文章

flutter text 最大长度_Flutter小技巧之TextField换行自适应

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果fl…

【机器学习】分类算法sklearn-朴素贝叶斯算法

分类算法-朴素贝叶斯算法1. 概率基础2. 朴素贝叶斯介绍3. sklearn朴素贝叶斯实现API4. 朴素贝叶斯算法案例1. 概率基础 概率定义为一件事情发生的可能性:扔出一个硬币,结果头像朝上;某天是晴天 联合概率和条件概率“”: 联合概率…

收集的电影网站

迅播影院-Gvod Player-Gvod电影-迅雷电影下载动漫下载|BT|漫画|动画|游戏 - 极影动漫一路电影网-高清电影下载_1080p电影下载_蓝光电影下载_3d电影下载天天美剧人人影视电影天堂电影FMTorrentProject - Torrent Search EngineBT Kitty - Professional torrent searc…

LeetCode 1851. 包含每个查询的最小区间(排序 + 离线查询 + 优先队列)

文章目录1. 题目2. 解题1. 题目 给你一个二维整数数组 intervals ,其中 intervals[i] [lefti, righti] 表示第 i 个区间开始于 lefti 、结束于 righti(包含两侧取值,闭区间)。 区间的 长度 定义为区间中包含的整数数目&#xff…

canvas 判断哪个元素被点击_监听 Canvas 内部元素点击事件的三种方法

canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在“元素”这个概念,他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍,想要监听图形的点击事件思路很简单,只要监听canvas元素本身的点…

git 查看某些文档的历史版本_Git 教程(二)log 命令的使用

使用 Git 进行版本控制时,要习惯他的工作流程,Git 的工作流程是,先在工作区创建项目并编写代码,然后将写好的文件添加到暂存区,最后将暂存区里的文件提交到历史版本库。如下图所示:每向版本历史库做一次提交…

【机器学习】sclearn分类算法-决策树、随机森林

分类算法-决策树、随机森林1.决策树1.1 认识决策树1.2 信息论基础-银行贷款分析1.3 决策树的生成1.4 决策树的划分依据之一-信息增益1.5 sklearn决策树API1.6 泰坦尼克号乘客生存分类2. 集成学习方法-随机森林1.决策树 1.1 认识决策树 决策树思想的来源非常朴素,程…

在Java中正确使用注释

Java提供了3种类型的注释: 单行注释(C风格) 在Java中最简单的注释是单行注释。它以两个正斜杠开始并到行尾结束。例如: // this is a single-line commentx 1; // a single-line comment after code 多行注释(C风格&a…

Spark 机器学习中的线性代数库

文章目录1. DenseVector、SparseVector2. DenseMatrix3. SparseMatrix4. Vector 运算5. 矩阵运算6. RowMatrix7. IndexedRowMatrix8. CoordinateMatrix9. BlockMatrix完整代码pom.xml学自:Spark机器学习实战 https://book.douban.com/subject/35280412/ 环境&#…

atitit. orm框架的hibernate 使用SQLQuery createSQLQuery addEntity

atitit. orm框架的hibernate 使用SQLQuery createSQLQuery addEntity 1. addEntity 对原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行Session.createSQLQuery()获取这个接口。最简单的情况下,我们可以采用以下形式: List cats ses…

【机器学习】回归算法-线性回归分析、回归实例和回归性能评估

回归算法-线性回归分析、回归实例和回归性能评估线性回归损失函数(误差大小)sklearn线性回归正规方程、梯度下降API线性回归实例回归:目标值连续;分类:目标值离散。 预测回归和分类是不一样的。回归问题可以用于预测销售额,比如公…

scrapy使用代理报错keyerror: proxy_爬虫Scrapy框架-Crawlspider链接提取器与规则解析器...

Crawlspider一:Crawlspider简介CrawlSpider其实是Spider的一个子类,除了继承到Spider的特性和功能外,还派生除了其自己独有的更加强大的特性和功能。其中最显著的功能就是”LinkExtractors链接提取器“。Spider是所有爬虫的基类,其…

activity-启动动画的设定(下面弹出出现,弹入下面消失)

1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作。 1)如果把一个activity以dialog的形式显示? 这个只需要设置theme的样式为*.di…

传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...

模板名称:(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,创意设计、装饰设计、餐饮酒店设计…

【机器学习】逻辑回归—良/恶性乳腺癌肿瘤预测

逻辑回归—良/恶性乳腺癌肿瘤预测 逻辑回归的损失函数、优化 与线性回归原理相同,但由于是分类问题,损失函数不一样,只能通过梯度下降求解 sklearn逻辑回归API sklearn.linear_model.LogisticRegressionLogisticRegression sklearn.linear…

mysql分组之后统计数量

select count(*) from(SELECT count(*) FROM 表名 WHERE 条件 GROUP BY id ) a ; 转载于:https://www.cnblogs.com/shenming/p/4343895.html

opencv mat初始化_【OpenCV入门之十二】看起来一样的图像竟然存在这么大的差别!...

小白导读学习计算机视觉最重要的能力应该就是编程了,为了帮助小伙伴尽快入门计算机视觉,小白准备了【OpenCV入门】系列。新的一年文章的内容进行了很大的完善,主要是借鉴了更多大神的文章,希望让小伙伴更加容易理解。如果小伙伴觉…

LeetCode 1854. 人口最多的年份(差分)

文章目录1. 题目2. 解题1. 题目 给你一个二维整数数组 logs ,其中每个 logs[i] [birthi, deathi] 表示第 i 个人的出生和死亡年份。 年份 x 的 人口 定义为这一年期间活着的人的数目。 第 i 个人被计入年份 x 的人口需要满足:x 在闭区间 [birthi, dea…

hdu 4280 最大流sap

模板套起来 1   5 7  //5个结点&#xff0c;7个边 3 3  //坐标 3 0   3 1 0 0 4 5 1 3 3  //相连的结点和流 2 3 4 2 4 3 1 5 6 4 5 3 1 4 4 3 4 29 1 #include<cstdio>2 #include<algorithm>3 #include<cstring>4 using namespace std;5 const in…