51CTO下载-Axure部件详解 Dynamic panel 动态面板.docxVIP

2014年5月1日 [Axure rp7.0 部件详解 PAGE \* MERGEFORMAT 1 QQ交流群①QQ交流群①网址: 原型库网站原创作品，保留所有权利 原型库网站—讲师金乌原创发布，可自由转载，请注明出处！ 《AxureRP7.0部件详解》 动态面板 Dynamic Panel 动态面板概述? ?? ? 动态面板(Dynamic panel)动态面板是一个可以在层或状态中装有其他部件的容器. 你可以将动态面板比喻成相册，相册的每个夹层中又可以装进其他部件，并且每个夹层和里面的部件可以隐藏、显示和移动，并且可以动态设置当前夹层的可见状态. 这些特性允许你在原型中演示自定义提示、灯箱、标签控制和拖拽等效果.实际工作中你会发现，动态面板是你在原型设计中使用最多的工具.动态面板状态 Dynamic panel states一个动态面板可以包含一个或多个状态，并且每个状态中可以包含多个部件.一个动态面板状态只能在同一时间看到一次.使用交互你可以隐藏/显示动态面板及设置当前动态面板状态的可见性.添加和调整动态面板大小最好的方法就是“转换为动态面板”.选择你想要放入动态面板状态的部件，右键点击 → 选择转换为动态面板.这个动作将自动创建一个新的动态面板并将你选择的部件放入动态面板的第一个状态中.或者你也可以拖拽动态面板部件到作业区并使用部件上下左右的提示来调整大小.作业区中动态面板的大小决定了其状态中包含部件的边界大小. 编辑动态面板状态 动态面板区域 编辑动态面板时，你会注意到一个蓝色虚线轮廓，这表示你在动态面板中只能看到蓝色虚线轮廓范围内的内容. 编辑动态面板状态中的部件，就像你平时拖拽部件的操作是一样的.见右 调整动态面板大小以适合内容 如果你添加的部件大小超过了动态面板轮廓范围，那么你可能需要使用添加滚动栏或调整动态面板大小以适合内容了. 见右图 添加动态面板状态 Adding Dynamic? Panel States 动态面板默认样式 默认状态下，动态面板状态是空的，所以你需要添加内容（部件）到动态面板中，做这一步，在作业区中双击动态面板， 或者在 HYPERLINK /doc-view-54.html \t _blank 部件管理器 Widget Manager中双击动态面板状态. 在弹出的对话框中，你可以添加、删除、重命名、复制或打开编辑动态面板状态.第一个状态是这个动态面板的默认状态. 双击一个状态可以打开此状态进入编辑. 动态面板交互 INTERACTING WITH DYNAMIC PANELS当你在作业区拖入一个动态面板部件后，你就可以像平时操作那样在事件列表中选择事件并添加用例来给动态面板添加交互效果了.动态面板可用的动作包括：设置面板状态 和 设置面板尺寸. 在这里，金乌老师给大家准备了动态面板高级讲解，和大家讨论 HYPERLINK /doc-view-56.html \t _blank 动态面板事件 Dynamic Panel Events. 设置动态面板状态 Set Dynamic Panel State 多状态的动态面板 创建一个多状态的动态面板，并使用设置面板状态动作设置动态面板到指定状态. 在 HYPERLINK /doc-view-57.html \t _blank 用例编辑器中Case Editor选择动作并在页面列表中选择状态. 在这一个动作中，你可以同时设置多个动态面板的状态选择. 这个动作可以用于切换标签状态、更改按钮上的内容或者下拉列表中的选择. 显示或隐藏一组部件 Hide/show? groups of widgets 隐藏/显示动态面板 使用 隐藏/显示 动作来显示或隐藏动态面板当前状态的内容. 在用例编辑器Case Editor对话框中，在左侧的动作列表中选择动作.在作业区中，将所有的部件命名是一种良好的习惯，这有助于你顺利找到想操作的部件.你可以在一个动作中选择多个面板设置隐藏/显示.提示： 使用 切换（Toggle） 动作可以让面板在显示/隐藏之间切换. 动态面板状态设置 SETTING DYNAMIC PANEL STATES 动态面板选项 设置动态面板属性 进入/退出 动画 Animate In/Out: 替换动态面板状态时的过渡效果 (例如：淡入淡出、向上滑动等.) 显示面板（如果隐藏）Show if hidden: 如果指定的动态面板是隐藏的，勾选这个选项会在执行动态面板状态设置的同时显示动态面板. 展开/收起部件 Push/Pull: 勾选此项，会是动态面板下面或右侧的部件自动移动. 这个主要是用于展开和折叠内容. 上一个/下一个状态 Next/Previou