【转】AxureRP8实战手册-案例11（动态面板：登录面板切换）
AxureRP8实战手册-案例11（动态面板：登录面板切换）
案例11. 动态面板：登录面板切换
案例来源:
淘宝-用户登录
案例效果：
- 快速登录：（图1-70）
- 账户密码登录：（图1-71）
案例描述：
点击“快速登录”与“账户密码登录”按钮时，在两个登录面板间切换。
元件准备：
- 页面中：（图1-72）
- 动态面板“LoginPanel”各个状态中：（图1-73）
包含命名：
- 动态面板（用于制作登录面板）：LoginPanel
- 动态面板状态（用于包含快速登录内容）：State1
- 动态面板状态（用于包含账户密码登录内容）：State2
思路分析：
- 动态面板可以添加多个状态；（操作步骤1）
- 每个状态中可以添加不同的内容；（操作步骤2~4）
- 设置两个登录按钮的样式切换；（操作步骤6）
- 点击不同的登录按钮切换不同的状态。（操作步骤7~9）
操作步骤：
1、拖放一个动态面板元件到页面中，双击动态面板，打开面板状态管理；将动态面板命名为“LoginPanel” ，然后，点击【+】添加一个状态；然后，双击状态名称“State1”进入这个状态的编辑界面；（图1-74）
2、为“State1”添加元件，组成相应的内容；完成后，关闭“State1”的标签回到页面中；（图1-75）
3、参照“操作步骤1”双击动态面板，打开面板状态管理界面，双击状态名称“State2”，进入进入状态“State2”的编辑界面；
4、为状态“State2” 添加元件，组成相应的内容；完成后，关闭“State2”的标签回到页面中；（图1-76）
5、此时页面中动态面板只显示了一部分“State1”中的内容，点中动态面板，在属性中勾选【自动调整为内容尺寸】；或者，在动态面板上点击<鼠标右键>，在菜单中选择【自动调整为内容尺寸】；（图1-77）
6、拖入2个矩形到画布，作为登录按钮，摆放在动态面板的上层；设置默认样式（灰色字体与灰色边框）以及【选中】的交互样式（黑色字体与橙色边框）；勾选“快速登录”属性中的【选中】，让其在页面打开时即为选中后的状态；在元件样式中设置这2个矩形的只保留底部边框（参考“基础7”）；最后，为这2个矩形{设置选项组名称}为“LoginButton”；（图1-78）
7、为“快速登录”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【选中】“当前元件”；
- 用例动作设置：（图1-79）
8、继续上一步，添加动作【设置面板状态】“LoginPanel”为“State1”。
- 用例动作设置：（图1-80）
9、参照操作步骤8与操作步骤9，为“账户密码登录”按钮设置【鼠标单击时】事件添加“用例1”，设置第1个动作为【选中】“当前元件”；第2个动作为【设置面板状态】“LoginPanel”为“State2”。
- 事件交互设置：（图1-81）
补充说明：
- 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
