AxureRP8实战手册案例6（形状：自定义复选框②）

 案例6.   形状&＃xff1a;自定义复选框&＃xff08;2&＃xff09;

案例来源:

多米音乐-用户注册

案例效果&＃xff1a;

• 选中前&＃xff1a;&＃xff08;图1-28&＃xff09;

• 选中后&＃xff1a;&＃xff08;图1-29&＃xff09;

案例描述&＃xff1a;

案例中的复选框在未选中时和选中时&＃xff0c;呈现不同的样式。

元件准备&＃xff1a;

• 页面中&＃xff1a;&＃xff08;图1-30&＃xff09;

包含命名&＃xff1a;

• 矩形&＃xff08;用于制作复选框&＃xff09;&＃xff1a;CheckBox

思路分析&＃xff1a;

• 复选框中的“√”可以使用特殊符号输入到矩形的元件文字中&＃xff1b;
• 当矩形中没有文字时&＃xff0c;设置元件文字为“√”&＃xff1b;&＃xff08;操作步骤1~3&＃xff09;
• 否则&＃xff0c;设置矩形的元件文字为空白的。&＃xff08;操作步骤4~5&＃xff09;

操作步骤&＃xff1a;

1、为元件“CheckBox”的【鼠标单击时】添加“用例1”&＃xff1b;

2、为“用例1”添加条件判断&＃xff0c;判断元件“CheckBox”的【元件文字】【&＃61;&＃61;】“”&＃xff08;空值&＃xff09;&＃xff1b;

• 条件设置截图&＃xff1a;&＃xff08;图1-31&＃xff09;

3、为“用例1”添加满足条件时的动作&＃xff0c;【设置文本】到元件“CheckBox” 为【值】“√”&＃xff1b;

• 用例动作设置&＃xff1a;&＃xff08;图1-32&＃xff09;

4、继续为元件“CheckBox”的【鼠标单击时】添加“用例2”&＃xff1b;

5、设置不满足“用例1”的条件时执行的动作&＃xff0c;【设置文本】到元件“CheckBox” 为【值】“”。

• 用例动作设置&＃xff1a;&＃xff08;图1-33&＃xff09;

6、完成以上操作&＃xff0c;即实现了整体效果。

• 事件交互设置&＃xff1a;&＃xff08;图1-34&＃xff09;

补充说明&＃xff1a;

本案例中矩形元件“CheckBox”的字体为隶书&＃xff0c;与实际网站效果略有差别。