【转】AxureRP8实战手册-案例18（形状：自定义复选框③）
AxureRP8实战手册-案例18（形状：自定义复选框③）
案例18. 形状：自定义复选框（3）
案例来源:
美丽说-宝贝搜索
案例效果：
- 鼠标移入方框或文本时：（图1-147）
- 鼠标点击方框或文本时：（图1-148）
- 鼠标再次点击方框或文本时：（图1-149）
案例描述：
鼠标进入复选框或者选项文本时，复选框呈现另一种颜色，离开时恢复原色；鼠标点击复选框或者选项文本时，复选框在切换选中样式。
元件准备：
- 复选框的制作：（图1-150）
包含命名：
- 矩形（用于复选框）：BelowShape
- 矩形（用于鼠标移入效果）：AboveShape
思路分析：
- 使用图标字体“√”做成未选中状态的复选框“BelowShape”；然后，设置元件选中时的交互样式；这样在元件“BelowShape”选中状态切换时即可显示不同的样式；（操作步骤1）
- 在鼠标移入选项文本和元件“BelowShape”时，都要显示元件“AboveShape”；（操作步骤2~3）
- 实际上，可以点击的元件只有“AboveShape”和选项文本，所以，在这两个元件被鼠标点击时，切换元件“BelowShape”的选中状态。（操作步骤4~5）
- 将做好的元件内容复制多个，变成不同的选项；（操作步骤6）
- 效果图片中的“11新款狂欢节”不是文本，而是图片；将上面做好的元件复制一份，然后将文本换成图片。（操作步骤7）
操作步骤：
1、在元件“BelowShape”属性中添加【选中】的交互样式，可参考元件准备（图1-150）中元件“AboveShape”的默认样式；（图1-151）
2、为元件“BelowShape”的【鼠标移入时】事件添加“用例1”，设置动作为【显示】“AboveShape”， {更多选项}选择【弹出效果】；“弹出效果”可以让鼠标离开显示的元件时，该元件自动恢复隐藏；
- 用例动作设置：（图1-152）
3、参考上一步为选项文本添加同样的交互；
4、为元件“AboveShape”的【鼠标单击时】事件添加“用例1”，设置动作为【切换选中动态】“BelowShape”；
- 用例动作设置：（图1-153）
5、参考上一步为选项文本添加同样的交互；
6、完成上述交互后，将做好的内容复制多份，并修改选项文字；（图1-154）
7、在第一个选项的文字部分（文本标签）上点击<鼠标右键>，在菜单中选择【转换为图片】，然后双击转换后的图片导入素材中的图片，将图片设置为宽136*高22，并调整好位置。（图1-155）
补充说明：
- 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置；（参考案例1的补充说明）
- 本案例操作步骤6中，因为复制会导致多个元件重名，如有需要可以为元件重新命名；比如，“BelowShape01”~“BelowShape06”和“AboveShape01”~“AboveShape06”。
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
转载请注明：Axure原创教程网 » AxureRP8实战手册-案例18（形状：自定义复选框③）
总结：
BelowShape：鼠标移入触发AboveShape的显示；
AboveShape：点击AboveShape时，选中BelowShape并将其显示。
