模拟(美化)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/p/1586734.html