改善交互体验-巧用底图+JS做搜索框动态效果

    本文关键字:搜索框 js改变文字 代码与效果分离

    做前台的亲们也许经常用到这个东西,即使您不是做前台的同学,想必在浏览网页的时候也经常碰到某些网站有诸如此类的搜索框.

我们点击它,提示性文字消失,然后离开它,文字再现.或者当我们没有输入任何内容的时候,依然返回提示性文字.

    诸如此类的需求,可以说已经非常古老,网上案例也是一搜一大堆.但尽管如此,我们也能从中发现,这些所谓的实现可谓非常简单,就是利用JS判断输入框然后决定是否将文字替换.

例如:

<script>
$("#tbxKeyword").focus(function(){
     if($("#tbxKeyword").val() == "请输入关键字"){
 
　　    $("#tbxKeyword").val("");
 
    }
});
 
$("#tbxKeyword").blur(function(){
    if($("#tbxKeyword").val() == ""){
 
　　    $("#tbxKeyword").val("请输入关键字");
 
    }
});
</script>

     这确实能直观地解决基本的问题,但更多的问题有待解决:

    1.当提示性文字要求更换颜色,或者干脆用艺术字体,区别于客户输入的文字样式.

    2.某次变更界面时,需要将文字改变内容,例如换成"请输入您的关键字",而作为美工而言,对编译好的JS没有任何操作权限.即便可以更改,因为界面少量内容的改动,牵扯到JS的修改也是非常费时费力.

    3.您的网站有不止一个这样的搜索框,它们的内容大致有"请输入关键字","关键字","搜索内容"......如果再去更改JS,将非常可能导致出错.

我也是曾经深陷这个怪圈很久,某一天突然看到这个不起眼的放大镜底图,让我眼前顿时一亮,能否将这个底图发扬一下光辉,也好让页面JS程序和界面彻底分离一下?

css样式中有关backgroud-position的章节对此UI们应该不会陌生.我的思路是放大镜图片稍微扩大一下,然后根据用户行为去改变它的position就可以了.

更改之后的放大镜底图如下:

从此它有两种状态了,在JS中根据用户行为去改变它的position.

主要代码如下:

<script type="text/javascript">
function chkCss(){  
    $("input[rel='search']").each(function(){
                                              setCss($(this));
                                              $(this).focus(function(){
                                                  clearCss($(this));
                                              });
                                              $(this).blur(function(){
                                                  setCss($(this));
                                              });
    }); 
}
  
function setCss(obj){
            if(obj.val() != "") clearCss(obj);
            else fillCss(obj);
} 
function clearCss(obj){
        obj.css("background-position","0px -35px");
}
function fillCss(obj){
        obj.css("background-position","0px -5px");
}
setTimeout(function(){chkCss();},100);
</script>

     用了这样的方式之后,以上的诸多问题都能很好地解决.

    1.我们可以让美工尽情更改底图中文字的颜色.内容.更改时直观,独立,绝不影响其它的内容.

    2.我们可以把所有搜索框的提示性内容全部放在一张图中,然后为不同的搜索框定制不同的样式效果.

    3.下次更改时,不用到处去找文字.也不用害怕会出错,因为图片又不大,一眼就知道该动哪里.前提是美工要有基本的像素概念,如果认为一两个像素不对齐也不要紧的那种人,我建议还是不能承担这种重任.

....其它的更多妙用,只有用过的人才知道!

当然,本示例中用到了jquery组件,您可根据需求进行取舍.另外说明:代码中最后一行是为了保证某些浏览器的搜索记忆功能.

完整Demo在此下载:

 http://files.cnblogs.com/CoreCaiNiao/searchDemo.rar

转载请说明出处.

 http://www.cnblogs.com/CoreCaiNiao/archive/2013/02/17/2914285.html