案例来源:百度-搜索界面
案例效果:点击搜索框后搜索框边线变蓝,下方显示最近搜索记录,如图
案例描述:
在搜索界面中,包含顶部菜单栏、搜索栏和底部网站备案信息等。当焦点进入搜索框时,搜索框边框变为蓝色,同时下方显示出最近搜索记录;失去焦点时,恢复灰色,下方最近搜索记录收起。
元件准备:
包含命名:
文本框(用于输入文字):文本框
矩形(搜索按钮):百度一下,按钮
思路分析:
输入框的样式在两种不同状态下切换,可以通过交互样式来实现;
文本框获取焦点时,呈现选中的样式;
文本框失去焦点时,呈现未选中的样式。
操作步骤:
2、设置搜索文本框【获取焦点时】,【选中】元件“搜索输入框”;
事件交互设置:获取焦点——元件——设置选中——选中——配置动作(选择搜索输入框)——设置状态值为true——确定
事件交互设置:失去焦点——元件——设置选中——取消选中——配置动作(选择搜索输入框)——设置状态值为false——确定
至此,点击搜索输入框边线变蓝已经实现,接下来我们看如何让下方显示搜索历史。
思路分析:
点击搜索框下方显示出最近搜索历史,可以通过动态面板+交互来实现;
鼠标单击时,显示动态面板;
鼠标移开时,隐藏动态面板。
操作步骤:
1、设置动态面板信息
拖进一个动态面板,调整大小
双击动态面板,弹出动态面板管理,设置名称,双击命名好的“列表”,进入动态面板页面
设置动态面板列表信息
勾选隐藏动态面板
2、设置文本框单击时交互事件,触发显示动态面板