当前位置:首页 » 数据仓库 » 动态面板如何配置两种state
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

动态面板如何配置两种state

发布时间: 2023-04-04 12:10:51

⑴ 使用Axure实现切换一级菜单效果

axure版本 :8.0

实现效果


原型查看

https://u7k6gc.axshare.com/#c=2

实现思路

       通过动态面板实现菜单选中与未选中的不同效果,在页面烂带加载时,将指定菜单的动态面板状态设置为选中状态。由于菜物嫌单一般会涉及多个页面,可以通过母版来减少重复工作。

       本示例只讲解了横放的菜单实现,竖放的菜单与此实现一致,各位童鞋们可以举一反三。

制作步骤

1、制作一个未选中的菜单。添加一个文本框,填写好菜单的名称,设置好样式。


2、将其转换为动态面板。并用State1复制一个状态。


3、双击编辑State2,修改该文本的颜色,并添加一个选中的标记条。(各位可根据UI实现效果,添加其中的图标或者图片)


4、复制该动态面板,并修改相关文字,制作其他几个菜单,分别为每个动态面板取上对应的名字。


5、选中刚才制作的所有菜单的动态面板,点击右键,“转换为母版”,将此母版命名为“顶部菜单”。



6、分别为每个菜单制作相应的页面,并在页面顶部同样的位置插入该母版。



7、分别设置每个页面的页面载入时事件,动作添加为“设置面板状态”。


公司介绍页面,将动态面板“公司介绍”的状态设置为State2,其他动态面板的状态设置为state1;

产品方案页面,将动态面板“产品方案”的状态设置为State2,其他动态面板的状态设置为state1;

联系我们页面,将动态面板“联系我们”的状态设置为State2,其他动态面板的状态设置为state1;


8、添加菜单点击事件。

双击刚才创建的母版,进入母版编辑界面。


分别选中创建的菜单动态面板,添加“鼠标单击时”事件


公司介绍菜单,鼠标单击时在当前窗口打开公司介绍页面;

产品方案菜单,鼠标单击时饥蚂芦在当前窗口打开产品方案页面;

联系我们菜单,鼠标单击时在当前窗口打开联系我们页面;


至此,一级菜单的效果已经实现。

⑵ Axure RP8 | 动态面板-多状态

动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机,而状态则是幻灯片。” 打开状态的编辑界面,即可放置各种各样的元件,组成内容。
有几种特性:容器、 多状模饥态 、拖动、循环、适应宽度、相对固定。

动态面板-多状态: 动态面板里的多个状态。可以通过键袜添加交互,让某个状态的顺序切换到首位。

制作搜索框、标签栏(填充为白色或透明,字体为橙色)

三个标签栏都要设置好【选中】状态的样式(填充为橙色,字体为白色),且其中一个标签栏的默认状态为【选中】;然后【设置选项组名称】为相同的,这里是“SearchTab”
设置相同的选项组名称: 为了切换标签时,实现唯一选中的效果)

选中需要变化的区域,右键,转换为动态面板

动态面板命名为SearchPanel,并双击,选中State1,并复制两个

双击每个状态,修改每个状态的内容,这里修改了文本框的提示文字和框框的颜色

为每个标签添加两个用例
一是【鼠标单击时】-【选中】-【当前元件】

二是【设置面板状态】-【动态面板】-【选择对应的状态旦亮返】

搞定!

⑶ axure动态面板不同状态怎么切换

首先设置一个全局变量aX的单击事件产生的动作如下:(1)设置a=1,(2)页面跳转到B;Y的单击事件产生的动作如下:(1)设哗敏置a=2,(2)页面跳转到B设置B页面的“页面加载时”事件,在产生结果之前进行一个判断。(1)ifa=1,动态面板切换到State1,(2)elseifa=2,动态面乱仿枝板切换大茄到State2。

⑷ Axure:教你10步用动态面板实现移动端上下滚动屏幕

本文章主要是为需要的人提供教程以及为自我学习的一种复盘方式。

1.从元件库中拖入一个手机模板。

2.在导航栏和标签栏之间拖乎歼搭入一个动态面板,并将面板名称命名为:外改散层动态面板。

3.双击 【外层动态面板】,将state1改为:state1-外层动态面板,并双击进入  state1-外层动态面板里面

4.在【 state1外层动态面板】里,拖入一个动态面板,并命名为:内层动态面板。 内层动态面板的长度为所要展示的内容的长度。

5.同理,双击【内层动态面板】后,将state1命名为:state1-内层动态面板,并双击进入【state1-内层动态面板】里面。并拖入自己要展示的内容

6.返回至主页面,单击【外层动态面板】,给它添加“拖动时”用例

7.双击“拖动时”后,点击“移动”,要移动的元件选择【内层动态面板】,移动选为:垂直移动

8.点击“添加边界”,添加2个边界:(1)顶部<=0(2)顶部>=0。当顶部>=0时,需要为其添加函数,点击>=0时的 fx

9.设置变量,点击“添加局部变量”,panel1=元件 外层动态面板;panel2=元件 内层动态面板。panel1,panel2可按自己喜好命名

10.设置函数,设置函数为:[[panel1.height-panel2.height]]  。设置完成后,按f5预览,如果不能实现效果,请务必检查每一个变量名和函数(特别岁拿易错,我错了三次)。

注:本教程参考: 阿阿小兰兰  发布的(Axure之上下滑动屏幕实现,原文网址 https://www.jianshu.com/p/dd44f5229c32 。ps:阿阿小兰兰写得特别清楚,从她的教程中本人受益良多)

⑸ axure点击下拉列表,鼠标悬浮A选项时候,显示子列表A1,A2...,如何做到

设置A为悄锋动态伏慎面板1
设置动态1鼠标移入时为state1,移出时为state2
在子列表的位置上放动态面板2,隐藏
在动态2state1里放子列表
设置动态1鼠标移入时显示动态2
设置启厅晌动态2鼠标移出时隐藏动态2且设置动态1为state2
再设置BCD选项鼠标移入时隐藏动态2且设置动态1为state2
可能有点麻烦,我一直这么做的

⑹ axure8.0 动态面板的上下级怎么设置

打开Axure8(axure7也一样),默认是新创建的孝扒项目,找到 “动态面板”元件,如下图:

拖动元件到工作区,按照图指示的任意一个地方给动态面板命名:测试面板

双击动态面板元件,出现状态state1,双击进入到state1的编辑:

拖放一个图像元件到state1内,双击并找到准备的图片(红旗),这样第一个状态就编辑好了。

下面编辑乱陆第二个状态,注意看图,在右下方的 “概要”栏目内 找到state1右键“复制状态”,这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例,将状态分别命名为:红旗、蓝旗巧陪昌。
然后点击蓝旗状态,将图片替换。

以上步骤完成后,开始编辑交互用例。双击红旗图片,出现如下图所示的交互用例,找到:鼠标单击时,并双击出现用例编辑面板。

选择 元件-->设置面板状态 ,然后按照图示选中 “测试面板”,并为其设置选择状态为:蓝旗。同时设定动画效果。

红旗状态编辑完成后,点击确定,按照下图所示在 case1下邮件复制用例,并粘贴到蓝旗状态下。然后按上一步的操作,将蓝旗点击是的选择状态设置为:红旗。

最后F5预览,并点击图像测试效果

⑺ Axure实现两个下拉框的嵌套

要求:需要设计两个下拉框,第一个显示省份的名称,第二个根据键御选择的省份显示某省的城市。

如第一个中有浙江省、江苏省、福建省;第二个中有杭州市和宁波市、南京市和苏州市、福州市和厦门市;若选择江苏省,则第二个下拉框只能选择南京市和苏州市。

首先创建省份的下拉框,并设置三个省份

然后利用动态面板,设置三个state,分别对应这三个省份。

state1-浙江省;state2-江苏省;state3-福建省

然后在每个state中放入下拉框:

添加完成后,回到主页面,在省份的那个下拉框上稿知岩设置交互:选项改变时的交互

点击 新增条件,这里需要先表示选择下拉框中选中浙江省,才能设置动态面板的状态为state1

同样处理状猛塌态2和3