关于Axure中动态面板的使用很是频繁、今天来说说在动态面板中再次添加相关热区进行页面或者模块跳转的方法。
首先看一下具体的实现需求:
在一张页面中有两个按钮分别为按钮1和按钮2、这两个按钮的点击事件都是在页面居中弹出新的内容弹框、弹框中又有新的按钮点击可以使得当前的弹框消失。
接下来我们开始实现功能
第一步:在index页面拖两个按钮显示成上图样式、再在页面中心拖出一个动态面板来
第二步:双击动态面板、显示动态面板状态弹框、这里可以将面板进行命名、方便之后寻找使用、然后点击确定
第三步:设定面板状态
在Azure的右侧栏可以找到如图所示的内容
在这里我们双击State1就可以打开State1的具体面板内容设置页面、如下图示:
然后我们在这个动态面板中拖入一个Box代表弹框整体、再添加一个关闭按钮、
并在右侧属性栏对这两个控件命名
到此我们的面板1的状态就已经布局完毕了
接下来我们需要设置内容的隐藏、先在右侧属性栏中将每个控件的隐藏按钮进行勾选
然后再回到index页面、选中当前的动态面板同样设置隐藏、就会看到如下图所示的样式
第四步:制作按钮2的动态面板
这里其实就很简单了、我们只需要再重新拖出来一个动态面板、然后重复执行我们的第二步和第三步就好了、这里我们注意命名的时候和之前的内容进行区分
第五步:添加点击效果
一:选中按钮1、在右侧点击Add case、如图所示
然后出现添加案例的弹框:
然后打开左侧的“设置显示/隐藏”这一项、点击显示、出现下图样式
接着在右侧的控件列表中选择按钮1对应的动态面板1及其内容、如下图示:
然后点击确定按钮、页面关闭
二:从页面右侧下方的页面模块中选中我们的动态面板1中的State1、打开、选择按钮、设置case
三:回到index页面中选中按钮2、重复第五步一和二的操作内容
到此、我们的需求就已经实现了
接下来我们点击预览按钮在浏览器中打开页面、就可以去操作两个按钮体验一下我们的功能了
Tips:
1.在整个操作过程中我们需要注意到必须给每一个动态面板本身设置属性为隐藏
2.在创建好控件后最好给每个控件给出相应的命名、这样可以方便我们在Add case的时候能够快速准确的找到需要的控件
好了、以上就是今天要给大家分享的内容了、希望可以对大家有所帮助
如果觉得我的文章还算清楚明白、可以点击关注或者文章下方的喜欢按钮来支持我的继续创作哟、谢谢大家!