淘宝首页顶部带标签搜索框效果

u_think · 发表于 2010-9-7 19:01:13

这个原型磨了很久才达到了淘宝原本效果的80%，还有些差强人意之处。（比如动态文字提示处）
新手上路，请各位轻拍，有更好的实现办法，欢迎多多交流！

包含效果：1、轮换效果标签
2、输入框文字提示（不同标签下文字内容不同）
3、输入框内有图片空余空间（尚未完全实现效果，如果输入内容后按backspace将出错）

尹广磊 · 发表于 2010-9-7 21:35:50

关于提示语部分做得不足，不是用动态面板做，而用条件判断+设置组件值的变化来做。
现在你在输入框中输入一些内容，然后切换上边的页签看看，会有问题。

可以是经过我修改后的效果：

2010-9-8 15-10-29.gif

若用户没有输入内容，输入框失去焦点时会显示对应的提示语。
若用户有自己输入的内容，不要清除掉用户输入的内容。

效果演示地址：http://share.axure.com/55XKRA/

rp源文件下载：http://www.hiaxure.com/thread-1564-1-1.html

u_think · 发表于 2010-9-8 10:13:03

问题就是出在：如果对输入框设置条件判断时，无法实现空余出前面“放大镜”图片的位置，当鼠标移到输入框时，自动消除提示文字后，停到“放大镜”的后面，影响输入显示的效果，一直搞不定这个效果，只能想到用动态面板来代替。

尹哥指教啊~

雷剑 · 发表于 2011-8-10 17:09:10

笨办法，把放大镜做下人动态，放在输入框上层，在条件设置时输入框的内容前面空几个格，刚好和挪天放大镜即可。

train95007 · 发表于 2011-8-17 12:59:47

改进后的搜索框
附带联想搜索（仅搜索宝贝时联想其他方式不支持）

zpybj · 发表于 2011-8-24 02:48:36

谢谢楼主的分享，学习中，希望以后也能有还的样例分享给大家！