模拟（美化）SELECT 控件

SELECT 是常用的网页控件，对它进行模拟美化也是常做的效果，方法也多种多样。

分析其主要功能有如下几点：

1.点击出现下拉选框
2.点击选项隐藏下拉选框 并设置相应的值
3.鼠标离开后延迟收回（或者失去焦点时收回）
就这几个功能，做了一个简单的SELECT 模拟的效果 点击查看DEMO；
为了减少与其他模块冲突的机会，使用命名空间，只为全局增加一个变量 var fakeslt;
具体代码如下，也可查看DEMO 代码：

$( function (){
         // fake select
     var  fakeslt;
     if ( ! fakeslt) fakeslt = {};  // 创建命名空间
    fakeslt = {
        show: false ,  // 默认显示状态
        range: "" ,  // 搜索范围
        timer: false ,  // 延迟收回
        fsdiv:$( " #floatip " ), 
        fspan:$( " #fakeslt span " ),
        sliup: function (){  // 收回函数 清空定时
            fakeslt.fsdiv.slideUp();
            fakeslt.show = false ;
            },
        slidw: function (){  // 展开选项
            $( " #floatip " ).slideDown();
            fakeslt.show = true ;
            },    
        setrange: function (val){  // 设置搜索范围
            fakeslt.range = val;
            },
        setvalue: function (val){  // 设置选框的值
            fakeslt.fspan.html(val);
            },
        autoback: function (){  // 延时自动收回
             if ( ! fakeslt.timer)    fakeslt.timer = setTimeout(fakeslt.sliup, 1000 );
            },
        clearauto: function (){  // 清除计时
             if (fakeslt.timer){ clearTimeout(fakeslt.timer);fakeslt.timer = false ; };
            }    
        }
    fakeslt.fspan.click( function (){
         if ( ! fakeslt.show){
            fakeslt.slidw();        
            $( " #fakeslt " )
            .mouseout( function (){
                fakeslt.autoback();    
            })
            .mouseover( function (){
                fakeslt.clearauto();
            })
            fakeslt.fsdiv.find( " a " ).click( function (e){
                    fakeslt.sliup();
                    fakeslt.clearauto();
                     var  tmp = $(e.target).html();
                    fakeslt.setrange(tmp);
                    fakeslt.setvalue(tmp);
                    })
                }
                 else {
                fakeslt.sliup();
                fakeslt.clearauto();    
            }
            }
        )
    

    }) 

 

转载于:https://www.cnblogs.com/trance/archive/2009/10/20/1586734.html