【Axure原型图】—— 6. 手风琴效果控制（according control）

在手风琴中，每一个header在点击的时候，会扩展出自己的子内容，用于展示更多信息。有些设计是可以在点击手风琴控制器的一个header的时候，自动关闭其他部分

Step0: 下载练习文件

在这里下载AxureTraining.rp文件，并用Axure RP打开

---

Step1: GETTING STARTED

1. 打开"Accordion control"页面
2. 页面包含了三组小部件，每一组部件包含了一个header和一个四个“body”组件， 这四个body会在开始的时候隐藏，只有当对应的“header”被点击的时候才会显示
3. 点击“Accordion 1”Group选中，然后再次点击编辑Group内部
4. 选中所有的四个“Body 1”组件，右击选择“Convert to Dynamic panel”， 将这个Dynamicpanel命名为Body1, 并将其标记为“Hidden”状态
5. 对body2,3,4重复步骤4

6. 然后将Header1, header2, header3依次摆放整齐
   

Step2: Accordion Interaction(手风琴交互)

1. 点击“Accordion 1”Group选中，然后再次点击编辑Group内部， 选中内部的“Header1”， 在Properties标签中，双击“Onclick”, 添加一个Onclick case
2. 在左列，选择“ToggleVisibility”
3. 在右边列，选中“Body 1”dynamic panel
4. 在右边列的底下，确保选中“Toggle” , 然后点击“Push/Pull widgets”复选框， Direction选择“Below”
5. 点击"OK", 关闭case编辑器
6. 给Header2和Header3分别选择对应"Body2"和"Body3"dynamicpanel， 这个时候就可以先预览一下效果了

---

Step3: Collapse other sections when one section is opened（选择一个部分的时候，讲其他部分关闭）

1. 选择“Header 1”，双击“Case1”, 打开再次编辑
2. 左侧点击“hide”
3. 右侧选择"Body2" dynamic panel
4. 点击“pull widgets”复选框, 确保Direction 选项选择"Below"
5. 下一步选择"Body3"dynamic panel
6. 点击"Pull widgets"复选框，确保Direction选项选择"Below"
7. 点击OK， 关闭Case编辑器
8. 然后给Header2和Header3重复这个步骤，在自己的case内，hiding其他的两个Body
   

   ---

注: 本人Axure系列的翻译blog仅供个人记录学习，侵删.

转载于:https://blog.51cto.com/gumpping/2361537