AxureRP8实战手册

实战手册"/>

AxureRP8实战手册

 案例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的补充说明）