用javascript和css模拟select的脚本

发布于 2016-12-10 12:37:01 | 126 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个select达到想要的效果就很容易了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>模拟 美化 select_phperz</title> 
<script type="text/javascript"> 
var zQuery=function(ele,tagName,className){ //核心对象 
    if ( window == this ) return new zQuery(ele,tagName,className); 
    if(!arr){var arr=new Array;} 
    if(ele){ 
        if(ele.constructor!=zQuery){ 
            var elem=typeof(ele)=="object"?ele:document.getElementById(ele); 
            if(!tagName){ 
                arr.push(elem); 
            }else{ 
                var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); 
                if(!className){ 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        arr.push(tags[i]); 
                    } 
                }else{ 
                    var reClassName=RegExp("(^|\\s+)"+className+"($|\\s+)"); 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        if(reClassName.test(tags[i].className)){ 
                            arr.push(tags[i]); 
                        } 
                    } 
                } 
            } 
        }else{ 
            for(var i=0, l=ele.length; i<l; i++){ 
                arr=arr.concat(Array.prototype.slice.call(zQuery(ele[i],tagName,className))); 
            } 
        } 
    } 
    return this.setArray(arr); //借鉴jQuery方法，这里返回zQuery对象原型（一个DOM集合对象），不再是返回单纯的DOM数组对象 
} 
zQuery.prototype.setArray = function( arr ) { 
    this.length = 0; 
    Array.prototype.push.apply( this, arr ); //这里的概念非常重要，zQuery方法对象执行了Array原型的push()方法 
    return this; 
} 
zQuery.fn=zQuery.prototype; 
var $=zQuery;

//取select的绝对位置、高、宽 
function Offset(obj){ 
    var t = obj.offsetTop; 
    var l = obj.offsetLeft; 
    var w = obj.offsetWidth; 
    var h = obj.offsetHeight-2; 
    //var h=obj.style.height; 
    while(obj=obj.offsetParent) 
    { 
        t+=obj.offsetTop; 
        l+=obj.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l, 
        width : w, 
        height : h 
    } 
} 
//模拟select 
function instSelect(obj){ 
    var offSet=Offset(obj); 
    obj.style.display="none"; 
    var sDiv=document.createElement("div"); 
    sDiv.id="div"+obj.name; 
    sDiv.className="divSlt"; 
    sDiv.style.width=offSet.width+"px"; 
    //sDiv.style.height=offSet.height+"px"; 
    sDiv.style.left=offSet.left+"px"; 
    sDiv.style.top=offSet.top+"px"; 
    document.body.appendChild(sDiv); 
    var sSpan=document.createElement("span"); 
    var spanId=obj.options[obj.selectedIndex].value; 
    var spanText=obj.options[obj.selectedIndex].text; 
    sSpan.id=spanId; 
    sSpan.style.lineHeight=offSet.height+"px"; 
    sTxt=document.createTextNode(spanText); 
    sSpan.appendChild(sTxt); 
    sDiv.appendChild(sSpan); 
    sSpan.onclick=function(){ 
        if($("div"+obj.name,"ul").length==0){ 
            var sUl=document.createElement("ul"); 
            sDiv.appendChild(sUl); 
            var optLen=obj.options.length; 
            var tmp=document.createDocumentFragment(); 
            for(var j=0;j<optLen;j++){ 
                var sltVal=obj.options[j].value; 
                var sltTxt=obj.options[j].text; 
                var sLi=document.createElement("li"); 
                sLi.id=sltVal; 
                sLi.appendChild(document.createTextNode(sltTxt)); 
                sLi.onmouseover=function(){ 
                    this.style.background="#cccccc"; 
                    this.style.color="white"; 
                } 
                sLi.onmouseout=function(){ 
                    this.style.background="white"; 
                    this.style.color="black"; 
                } 
                sLi.onclick=function(){ 
                    sSpan.innerHTML=this.innerHTML; 
                    obj.value=this.id; 
                    sUl.style.display="none"; 
                } 
                tmp.appendChild(sLi); 
            } 
            sUl.appendChild(tmp); 
            if(optLen>3){ 
                sUl.style.overflowY="scroll"; 
                sUl.style.height="100px"; 
            } 
        } 
        else{ 
            if($("div"+obj.name,"ul")[0].style.display=="none") $("div"+obj.name,"ul")[0].style.display="block"; 
            else $("div"+obj.name,"ul")[0].style.display="none"; 
        } 
    } 
} 
//取得slect的个数，并且对每个select执行函数 
function initSelect(){ 
    var slt=$(document,"select"); 
    var sltLen=slt.length; 
    for(var i=0;i<sltLen;i++){ 
        instSelect(slt[i]); 
    } 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用javascript和css模拟select的脚本

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他