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();    
                }
                }
            )
        
        }) 

  • 相关阅读:
    WPF 使用 Direct2D1 画图 绘制基本图形
    WPF 使用 Direct2D1 画图 绘制基本图形
    dot net core 使用 IPC 进程通信
    dot net core 使用 IPC 进程通信
    win2d 图片水印
    win2d 图片水印
    Java实现 LeetCode 240 搜索二维矩阵 II(二)
    PHP closedir() 函数
    PHP chroot() 函数
    PHP chdir() 函数
  • 原文地址:https://www.cnblogs.com/trance/p/1586734.html
Copyright © 2011-2022 走看看