Axure RP（七）基本元件（动态面板）

一：简介

动态面板就像一打纸，每张纸都有内容，但是只能看到最上面一张纸的内容。如果把动态面板比作一张纸，那么每张纸就是动态面板中的每个状态。

矩形是使用最多的元件，而动态面板则是功能最丰富的元件。

二：选项卡示例

1. 拖入3个按钮和一个动态面板。
   
2. 双击动态面板，复制2份状态。
3. 分别编辑每个状态的内容。
   
   
4. 分别给三个按钮添加鼠标点击事件。

5. 效果，切换每个按钮显示不同的内容，想要更美观的可以当选中每一个按钮可以设置填充色和字体颜色（这里没实现）。

动态面板之间的状态切换可以通过事件手动触发。

三：轮播图

1. 拖拽一个动态面板，修改动态面板的宽度和高度，修改成和轮播图片宽高保持一致，给动态面板元件起个名字。
2. 双击动态面板，选中State1然后再复制两份（注意是复制不是新增），状态数量和轮播图的数量一致。
3. 双击State1，然后将图片拖进工作区，然后将图片放到蓝色框内。
4. 选中State2,然后双击状态2，然后将另一张轮播图拖进到来，并放到蓝色框内。
5. 选中State3,然后双击状态3，然后将另一张轮播图拖进到来，并放到蓝色框内。
6. 切换到index页面，然后点击页面空白部分，然后在检视面板属性中添加”页面载入时“事件。
   页面载入时动态面板的状态切换为下一个状态，每隔1秒状态切换一次。
   
7. 最终轮播图效果
   

动态面板之间的状态也可以自动切换。

四：微信左右滑动效果

1. 拖动一个动态面板设置宽为750高为1334，然后缩小一下工作区，并命名为手机屏幕。
2. 双击动态面板进入状态1，在状态1中添加一个矩形作为消息列表，
   
3. 制作消息列表内容。
4. 使用矩形制作标记未读、删除按钮。
5. 选中状态1中的所有元件，转为动态面板，并为动态面板命名为”消息列表“。
   注意：动态面板状态中超出动态面板的是不显示的。如State1中标记未读、删除两个矩形是不显示的。
6. 为消息列表添加”向左拖动结束时“事件，在添加事件之前要先看一下要移动的坐标值，拖动消息列表查看坐标值。
   
7. 添加”向右拖动结束时“事件。
   
   

动态面板超出范围的内容会被自动隐藏。动态面板支持鼠标拖动事件。

五：滚动到元件位置

很多网站最上面都有导航栏，当滚动页面的时候导航栏始终在最顶部位置而不会滚动没。

1. 制作一个导航栏将其转为动态面板。
   
2. 右键固定到浏览器。
   
   设置固定到浏览器的位置：水平位置和垂直位置。固定之后在上下滚动页面内容内容会一直保持在某个位置不会被滑动出去。
   

很多网站都会在屏幕右侧中间或者右侧底部等有个客服、咨询、反馈、回到顶部之类的按钮。这些功能都可以通过滚动到元件位置来实现。
今日头条：

csdn：

六：作为容器

动态面板也可以将多个元件封装到一个整体，作为容器的作用。

1. 制作一个列表，并选择所有元件转为动态面板。
   
2. 制作一个课程详情的视图，并选择所有元件转为动态面板。
   
3. 将立刻学习视图放到课程上面并置于底层并隐藏。
   
4. 设置课程鼠标移入事件，当鼠标悬浮时显示立即学习，当鼠标移出时隐藏立即学习。
   
   
5. 示例效果

此示例演示了动态面板可以将多个元件封装成一个整体。

七：100%宽度

1. 拖拽一个矩形，填充黑色，并转为动态面板命名为导航栏，并在状态1中添加一个文本。
2. 在导航栏动态面板右侧添加一个消息和一个头像。
3. 制作一个我的面板并转为动态面板（目的是封装成一个整体）并命名为“我的”。
4. 为头像添加鼠标单击时事件，单击时显示内容。
5. 为“我的”内容动态面板添加鼠标移出事件，当鼠标移出时隐藏我的内容。
6. 默认将我的动态面板内容设置为隐藏。
7. 具体效果
8. 上述效果最大的缺点是导航栏的宽度没有完全和浏览器的宽度一样。
9. 演示一个矩形宽度和浏览器宽度一致的示例：拖拽一个灰色矩形修改一下高度，并转为动态面板，然后取消“自动调整为内容尺寸”。
   10.双击动态面板进入状态1，把矩形从动态面板State1中拖拽出来，然后删除。
   
   
10. 为动态面板State1填充原来的灰色。
11. 设置动态面板State1中的100%宽度<仅限浏览器中有效>。
12. 预览效果
13. 我们知道如何设置100%宽度了，我们就为导航栏设置宽度。
14. 我们看到上面步骤导航栏宽度已经和浏览器宽度一致了，但是导航栏的图标并没有靠右展示。我们需要将右边的图标和我的内容通过封装成一个动态面板整体，然后在页面加载时移动这个动态面板的x。
15. 预览效果，看导航栏有没有交互，如果没有交互纪要设置动态面板中的“允许触发鼠标交互”。
16. 在左侧添加一个菜单栏导航，并设置左对齐，这样菜单导航就会靠左显示。

动态面板用于100%浏览器宽度。

八：100%高度

1. 将上述示例的菜单栏转为动态面板，并命名“菜单列表”，然后取消动态面板的“自动调整为内容尺寸”。
2. 双击动态面板进入State1，把黑色矩形元件拉出来然后给删除。
3. 使用黑色填充菜单。
4. 页面载入时添加设置尺寸动作，修改菜单列表动态面板的高度。window.height用于获取浏览器窗口的高度。
5. 最终效果。
6. 如果改变浏览器的大小顶部导航栏右侧的按钮不会移动。所以需要添加“窗口尺寸改变时”事件。
   

九：自适应内容

如果设置了自动调整为内存尺寸，那么动态面板中的每个状态下的内存尺寸宽高都可以不一样，而且每个状态中也没有蓝色的框了。

十：推动或拉动元件

在上个示例的基础上在动态面板右边增加一个矩形元件。
预览效果，可以看到白色矩形元件遮挡住了动态面板的内容。

设置动态面板

预览效果：可以看到动态面板会将旁边的矩形推走给动态面板腾出位置来显示内容，当动态面板内容区域发生变化缩小时也会将其它元件拉回来。

如果动态面板要显示的那个状态中没有内容具有隐藏元件的效果。动态面板自适应内容尺寸时可以有推动拉动效果。
Axure RP（二十九）动画（推动和拉动元件）

十一：滚动条

固定表头示例：多出的内容使用滚动条显示而不是将多出的内容隐藏掉。

1. 拖拽一个表格，一行一列，然后再拖拽一个动态面板放在表格右侧。
   
2. 在动态面板状态1中拖入一个表格,列的宽度要超出动态面板的宽度。
3. 设置显示滚动条
   
4. 效果
   

十二：定时器

动态面板具有定时器功能，请参考发送验证码示例

十三：动态面板的应用场景

通过轮播图示例我们就能明白动态面板究竟是个什么东西： 动态面板有多种状态，可以循环、定时的切换每个状态。当同一个元件有多种状态时我们就要选择动态面板元件。

通过动态面板示例我们认识到：当需要将多个元件转为一个整体时也是可以使用动态面板的(此时动态面板只有一个状态)。

动态面板会自动隐藏超区动态面板区域的内容。如果内容有超出元件范围时也可以使用动态面板。例如鼠标移入图片将图片放大，我们就可以使用动态面板将放大后四边多余的部分隐藏掉。

动态面板支持更多的鼠标事件例如，拖动时、拖动开始时、拖动结束时、向左拖动结束时、向右拖动结束时。如果需要使用到这些事件就需要将元件转为动态面板。

动态面板可以让元件固定要浏览器的某个位置。

动态面板也可以与其它元件再次组合为动态面板。