Axure中动态面板再次添加热区

关于Axure中动态面板的使用很是频繁、今天来说说在动态面板中再次添加相关热区进行页面或者模块跳转的方法。

首先看一下具体的实现需求：
在一张页面中有两个按钮分别为按钮1和按钮2、这两个按钮的点击事件都是在页面居中弹出新的内容弹框、弹框中又有新的按钮点击可以使得当前的弹框消失。

需求样板

接下来我们开始实现功能
第一步：在index页面拖两个按钮显示成上图样式、再在页面中心拖出一个动态面板来

按钮和动态面板选择

初始样式

第二步：双击动态面板、显示动态面板状态弹框、这里可以将面板进行命名、方便之后寻找使用、然后点击确定

屏幕快照 2017-06-17 下午3.06.53.png

第三步：设定面板状态
在Azure的右侧栏可以找到如图所示的内容

屏幕快照 2017-06-17 下午3.08.42.png

在这里我们双击State1就可以打开State1的具体面板内容设置页面、如下图示：

屏幕快照 2017-06-17 下午3.11.15.png

然后我们在这个动态面板中拖入一个Box代表弹框整体、再添加一个关闭按钮、
并在右侧属性栏对这两个控件命名

具体的State1页面内容

到此我们的面板1的状态就已经布局完毕了

接下来我们需要设置内容的隐藏、先在右侧属性栏中将每个控件的隐藏按钮进行勾选

隐藏后的样子

然后再回到index页面、选中当前的动态面板同样设置隐藏、就会看到如下图所示的样式

屏幕快照 2017-06-17 下午3.20.00.png

第四步：制作按钮2的动态面板
这里其实就很简单了、我们只需要再重新拖出来一个动态面板、然后重复执行我们的第二步和第三步就好了、这里我们注意命名的时候和之前的内容进行区分

第五步：添加点击效果
一：选中按钮1、在右侧点击Add case、如图所示

屏幕快照 2017-06-17 下午3.26.45.png

然后出现添加案例的弹框：

初始的添加页面

然后打开左侧的“设置显示／隐藏”这一项、点击显示、出现下图样式

点击显示

接着在右侧的控件列表中选择按钮1对应的动态面板1及其内容、如下图示：

屏幕快照 2017-06-17 下午3.30.22.png

然后点击确定按钮、页面关闭

二：从页面右侧下方的页面模块中选中我们的动态面板1中的State1、打开、选择按钮、设置case

屏幕快照 2017-06-17 下午3.35.37.png

三：回到index页面中选中按钮2、重复第五步一和二的操作内容

到此、我们的需求就已经实现了
接下来我们点击预览按钮在浏览器中打开页面、就可以去操作两个按钮体验一下我们的功能了

动态效果图

Tips：
1.在整个操作过程中我们需要注意到必须给每一个动态面板本身设置属性为隐藏
2.在创建好控件后最好给每个控件给出相应的命名、这样可以方便我们在Add case的时候能够快速准确的找到需要的控件

好了、以上就是今天要给大家分享的内容了、希望可以对大家有所帮助
如果觉得我的文章还算清楚明白、可以点击关注或者文章下方的喜欢按钮来支持我的继续创作哟、谢谢大家！