案例4. 图片:自定义复选框(1)
案例来源:
唯品会-注册界面
案例效果:
- 未选中时:(图1-16)
- 鼠标进入时:(图1-17)
- 被选中时:(图1-18)
案例描述:
案例中的复选框在未选中时、鼠标进入时以及选中时,呈现不同的样式。
元件准备:
- 页面中:(图1-19)
思路分析:
- 使用图片作为复选框,与“案例3”相似,在元件的鼠标移入和选中时指定不同的图片;(操作步骤1)
- 鼠标点击复选框时,要切换元件的选中状态。(操作步骤2)
操作步骤:
1、设置元件属性中【鼠标悬停】和【选中】的交互样式为不同的图片,可参考基础23;(图1-20)
2、为图片的【鼠标点击时】事件添加“用例1”,动作为【切换选中状态】“当前元件”。
- 事件交互设置:(图1-21)
- 用例动作设置:(图1-22)
补充说明:
单选按钮的制作也可以参考本案例。不同的是,需要给单选按钮在元件属性中{设置选项组名称}。