Axure使用教程（二）、动态面板

动态面板可以设置多个状态，可以通过设置动态面板在不同状态间切换来实现复杂功能。比如弹出框、下拉菜单、轮播等。

一、如何创建、编辑、取消动态面板

1、从左侧部件库中拖进一个动态面板来。

2、双击动态面板，可以编辑动态面板。
如下图，出现动态面板弹出框，可以命名动态面板名称。另外选中State，点击可修改状态名称，双击可进入State编辑状态。
如果需要新增状态，点击下图中的加号。

3、如果想取消动态面板，怎么操作？ Axure7.0之后的版本支持取消功能。只要选中面板右键选择Break Away First State，这样就能成功脱离动态面板

二、动态面板实现弹出框、下拉菜单

弹出框和下拉菜单实现类似。只是弹出框需要遮罩层效果，下拉菜单不需要。
这里我还有个没有实现的点：点击遮罩层可以隐藏弹出框，或点击空白处可以隐藏下拉菜单。（有处理方法的欢迎评论留言）

1. 输入好需要点击按钮后跳出弹窗的页面；

2、添加好弹出框内容，右键选择“转换为动态面板”。并将动态面板命名为“确认删除框”

3、将动态面板放置到合适位置。在工具栏上，将弹出框向后堆叠（点击Back），这样不会遮挡页面其他内容。另外，勾选隐藏或右键点击隐藏。

4、点击添加交互用例，鼠标单击时显示动态面板“确认删除框”。然后勾选“Bring to Front”，这样弹出框出现时能堆叠在最前面。

如果希望弹出框出现时，有遮罩层的效果，选择选项“treat as lightbox”。

最终效果如下图：

三、动态面板如何设置滚动条

选中动态面板，右键选择Scrollbars，选择你需要的滚动形式。

另外右键菜单中Fit to Content是勾选状态，记得去掉。勾选表示动态面板宽高是由内容决定的，因此即使设置Scrollbar也不会出现滚动条

四、如何实现图片轮播等定时事件
使用场景：图片轮播事件
步骤：
1）添加动态面板，并添加两个状态，分别命名为“插花”和“自然花景”。
2）点击“插花”状态，进入编辑。从元件库拖入图片到“插花”状态，拖入后点击图片元件，将图片替换为实际图片。还可以设置图片大小

3）“自然花景“状态编辑和上一个步骤类似
4）点击页面空白区，点击添加OnPageLoad事件。设置Set Panel Sate为Next。并勾选Wrap from to Last，这样可以重复播放。并可以设置状态切换间隔时间。

五、如何制作折叠菜单
比如后台管理模块需要包含：日志（系统日志、用户日志）、系统（系统设置、系统版本与升级）、用户管理（用户维护、用户权限管理）
1、基础准备
1）拖进一个矩形，宽度设置为 250 px，高度为 45px。并将背景色设置为#545c64，字体颜色设置为#ffffff。并拖入Label，并设置文本“日志”。另外添加一个展开图标。选中文本、矩形、图标，右键组合，并命名为“一级菜单_日志”。
2）拖进一个矩形，同样宽度为 250 px ，高度为 40 px 。背景色为 #ffffff，字体颜色设置为#333333.。并拖入Label，并设置文本“系统日志”。同样将文本和矩形组合，并命名为“二级菜单_系统日志”。
复制“二级菜单_系统日志” ，分别叫“二级菜单_用户日志 ” 。
2、设置交互样式
1）选中一级菜单，点击交互区-->点击Properties ，选择鼠标悬停 – 填充颜色 – 色值为 #ffd04b、然后再选选中 – 填充颜色 – 色值 #ffd04b。

2）二级菜单设置类似。选中所有二级菜单，点击交互区-->点击Properties ，选择鼠标悬停 – 填充颜色 – 色值为 #409eff、然后再选选中 – 填充颜色 – 色值 #409eff。
3、设置交互用例
1）选中所有二级菜单，右键选择Convert to Dynamic Panel，命名为“二级菜单动态面板_日志”，并隐藏该动态面板。
2）选中“二级菜单_系统日志”，添加点击交互事件。设置选中“一级菜单_日志”为选中状态，并将当前二级菜单二级菜单设置为true。
（注意这里要注意事件的顺序。如果调换顺序，最终效果将无法高亮一级菜单。猜测是跟后面将所有的一级菜单组合成到同一Selection Group有关。同一Selection Group的元件是互斥的，但为什么会导致无法高亮还没想明白）

其他二级菜单和“二级菜单_系统日志”的事件一样，只要将事件复制黏贴就行了。
3）实现选中互斥
现在二级菜单选中高亮已经实现了。但是逐个点击二级菜单，发现被点击过的二级菜单都是高亮状态。我们希望实现互斥选中，只有一个菜单是高亮状态。
选中所有二级菜单，右键选择Assign Selection Group，并设置Group名称。这样就能实现选中互斥，即二级导航只能同时选中一个。

4）实现点击一级菜单时，二级菜单显示在一级菜单下方
点击“一级菜单_日志”。设置鼠标单击时 – 设置面板状态 – 可见性，将可见性设置为显示。勾选上Bring to Front，将面板置于顶层；在More Options下选择向下推动面板

5）制作多个菜单项
选中所有元件，右键组合成菜单项。复制两份，黏贴并按顺序排放。修改下文本内容。
另外，一级菜单也要实现互斥选中。逐个找到每个菜单项下的一级菜单，右键选择Selection Group，保存到名称为“一级菜单”的选项组中。

4、菜单加上页面链接

上面的菜单还不能实现页面跳转，现在要加上这个功能。
1）加链接
先给所有二级菜单加上页面链接。选中“二级菜单_系统日志”，增加事件用例：

其他二级菜单也同样加上链接。但是发现加上链接后，选中没有高亮效果了。因为页面会重新加载。
2）设置页面跳转后菜单高亮，并展开选中的一级菜单
进入到具体的页面，比如用户日志页面，添加onPageLoad事件，在页面加载后给菜单设置高亮，并展开选中菜单。添加了三个操作：

• 将“一级菜单_日志”设置为选中状态；
• 将“二级菜单_用户日志”设置为选中状态；
• 显示“二级菜单动态面板_日志”，动态面板向下推动显示，并置于顶层。

点击用户日志，会跳转到用户日志页面，呈现效果如下：

 

六、参考文章
1、Axure 动态面板如何添加为弹出框：https://www.jianshu.com/p/389b762380e1
2、Axure 教程：制作折叠菜单：http://www.woshipm.com/rp/1088033.html