Axure RP中Dynamic Panel 演示Tab标签也切换.docx

《Axure RP中Dynamic Panel 演示Tab标签也切换.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、DynamicPanel（动态面板）实现Tab（标签）的切换步骤一下第一步：在Widgets区把DynamicPanel拖到工作区，DynamicPanel在工作区的大小取决你要显示的Tab区域的大小。如图1图1.第二步：双击图1的蓝色区域（DynamicPanel），跳出动态面板状态管理窗口（图2），给DynamicPanel命名为‘标签切换Demo’（任意命名好记就行）。我们需要演示三个标签页之间的切换，所以我们在动态面板状态管理窗口中‘+’号添加三个标签‘实例’，分别命名为tab1，tab2，tab3.如图2图2.第三步：在DynamicPanelManager（

2、动态面板管理区）双击tab1，跳转到tab1的绘制页面。绘制图形只能在蓝色虚线区域内，否则不显示。绘制成图3图3.在Widgets区把3个Parallerlogram（根据喜欢，可以选择圆角矩形或其他）控件拖置tab1工作区，表示标签。分别命名为tab1，tab2，tab3.把tab1的背景颜色改为黄色，表示当前选中tab1标签。第四步：实现标签页的交互动作。在这里使用鼠标滑过（OnMouseEnter）标签来实现标签的切换.也可以设置别的交互方式如点击（OnClick）。单击tab1标签（Parallerlogram），在Widgets交互面板双击OnMouseEnt

3、er.在用例窗口中Step2中选中SetPanelstate(s)toState(s),然后在Step4中勾选Set标签切换Demo(DynamicPanel)statetotab1.如图4图4.第五步：同理按第四步分别给tab2.tab3添加鼠标滑过（OnMouseEnter）动作。完成如图5图5.第六步：在tab1页面ctrl+A复制tab1所有绘制的。然后在DynamicPanelManager（动态面板管理区）选中tab2，在tab2蓝色虚线框内ctrl+V，把tab1标签背景颜色换回灰色，tab2背景颜色换为黄色，显示内容也改掉。如图6图6.同理实现tab3页

4、面绘制。第七步：任务完成，F5生成原型在浏览器中打开。