zoukankan      html  css  js  c++  java
  • 模拟(美化)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();    
                }
                }
            )
        
        }) 

  • 相关阅读:
    第2次实践作业
    第1次实践作业
    软工实践个人总结
    2019 SDN大作业
    第08组 Beta版本演示
    第八章学习小结
    第七章学习小结
    第六章学习小结
    第五章学习小结
    第4章学习小结
  • 原文地址:https://www.cnblogs.com/trance/p/1586734.html
Copyright © 2011-2022 走看看