美观下拉框实例

最新推荐文章于 2023-05-14 11:06:07 发布

iteye_6233

最新推荐文章于 2023-05-14 11:06:07 发布

阅读量97

点赞数

文章标签： xhtml javascript ViewUI

<!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的样式也漂亮起来</title>
<style type="text/css">
<!--
.select * {
 margin: 0;
 padding: 0;
}
.select {
 border:1px solid #cccccc;
 float: left;
 display: inline;
 }
.select div {
 border:1px solid #f9f9f9;
 float: left;
}
/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
 width:120px;
 height: 17px;
 overflow:hidden;
 }
 
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
 display:block;
 float: left;
 margin: -2px;
}
.select div>select {
 display:block;
 width:124px;
 float:none;
 margin: -2px;
 padding: 0px;
}
.select:hover {
 border:1px solid #666666; //鼠标移上的效果
}
.select select>option {
 text-indent: 2px; //option在FF等非IE浏览器缩进2px
}
-->
</style>
</head>
<body><div class="select">
 <div>
 <select>
 <option>看见效果了吧</option>
 <option>看见效果了吧</option>
 <option>看见效果了吧</option>
 </select>
 </div>
</div>

  </body>
</html>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>Select Demo</TITLE> 
<style> 
body, input 
{ 
    font-family: verdana; 
    font-size: 9pt; 
} 
h1 
{ 
    font-family: tahoma; 
    font-size: 22pt; 
    text-align: left; 
} 
pre 
{ 
    font-size: 9pt; 
    font-family: verdana; 
    border: 1px solid #006600; 
    width: 400px; 
    padding: 10px; 
    background: #ffffff; 
    color: #006600; 
} 
.CtlSelect 
{ 
    border: 1px solid #006600; 
    font-family: verdana; 
    height: 20px; 
    color: #006600; 
    background: #ffffff; 
} 
.selected 
{ 
    background: #006600; 
    color: #ffffff; 
    height: 20px; 
} 
.unselected 
{ 
    height: 20px; 
    color: #006600; 
    line-height: 120%; 
    border-bottom: 1px solid #006600; 
} 
.CtlSelect1 
{ 
    border: 1px solid #003399; 
    font-family: verdana; 
    height: 20px; 
    color: #003399; 
    background: #ffffff; 
} 
.selected1 
{ 
    background: #003399; 
    color: #ffffff; 
    height: 20px; 
} 
.unselected1 
{ 
    height: 20px; 
    color: #003399; 
    line-height: 120%; 
    border-bottom: 1px solid #003399; 
} 
.CtlSelect2 
{ 
    border: 1px solid #990000; 
    font-family: verdana; 
    height: 20px; 
    color: #990000; 
    background: #ffffff; 
} 
.selected2 
{ 
    background: #990000; 
    color: #ffffff; 
    height: 20px; 
} 
.unselected2 
{ 
    height: 20px; 
    color: #990000; 
    line-height: 120%; 
    border-bottom: 1px solid #990000; 
} 
.copyright 
{ 
    margin-top: 10px; 
    font-size: 9pt; 
    text-align: center; 
    color: #333; 
    font-weight: bold; 
} 
</style> 
</HEAD> 

<BODY> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function $(objID) 
{ 
    return document.getElementById(objID); 
}; 
function Offset(e) 
{ 
    var t = e.offsetTop; 
    var l = e.offsetLeft; 
    var w = e.offsetWidth; 
    var h = e.offsetHeight-2; 
    while(e=e.offsetParent) 
    { 
        t+=e.offsetTop; 
        l+=e.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l, 
        width : w, 
        height : h 
    } 
} 
function simulateSelect() { with(this) 
{ 
    this.IDs = []; 
    this.name = this; 
    this.readonly = true; 
    this.height = 20; 
    this.width = null; 
    this.ctlStyle = "CtlSelect"; 
    this.selStyle = "selected"; 
    this.unselStyle = "unselected"; 
    this.elementPrefix = "e__"; 
    this.inputPrefix = "i__"; 
    this.containerPrefix = "c__"; 
    this.buttonPrefix = "b__"; 
    return this; 
}}; 
simulateSelect.prototype.init = function(ctlSelIDs) { with(this) 
{ 
    eval(name).append(ctlSelIDs); 
    eval(name).simulates(); 
}}; 

simulateSelect.prototype.style = function() { with(this) 
{ 
    ctlStyle = arguments[0]; 
    selStyle = arguments[1]; 
    unselStyle = arguments[2]; 

}}; 
simulateSelect.prototype.append = function(ctlSelIDs) { with(this) 
{ 
    if( ctlSelIDs.indexOf(",")>0 ) 
    { 
        var arrCtlSel = ctlSelIDs.split(","); 
        for(var i=0; i<arrCtlSel.length; i++) 
        { 
            eval(name).IDs.push(arrCtlSel[i]); 
        } 
    } 
    else 
    { 
        eval(name).IDs.push(ctlSelIDs); 
    } 
}}; 
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this) 
{ 
    var el = e ? e.srcElement : e.target; 
    if( el.id.indexOf(elementPrefix)>-1 ||  
    el.id.indexOf(inputPrefix)>-1 ||  
    el.id.indexOf(containerPrefix)>-1 ||  
    el.id.indexOf(buttonPrefix)>-1 ) 
    { 
        return; 
    } 
    else 
    { 
        for(var i=0; i<eval(name).IDs.length; i++) 
        if( $(containerPrefix + IDs[i]) ) 
        $(containerPrefix + eval(name).IDs[i]).style.display = "none"; 
    } 

}}; 
simulateSelect.prototype.simulates = function() { with(this) 
{ 
    for(var i=0; i<IDs.length; i++) 
    eval(name).simulate(IDs[i]); 
}}; 
simulateSelect.prototype.simulate = function(ctlSelID) { with (this) 
{ 
    var input; 
    var button; 
    var object; 
    var offset; 

    object = $(ctlSelID); 
    offset = Offset(object); 
    input = document.createElement("INPUT"); 
    button = document.createElement("BUTTON"); 
    button.setAttribute("id", buttonPrefix + ctlSelID); 
    //button.value = "⊿"; 
    button.value = "6"; 
    button.style.fontFamily = "Webdings, Marlett"; 
    button.style.background = ""; 
    button.onclick = input.onclick = function() 
    { 
        this.blur(); 
        eval(name).expand(ctlSelID, offset); 
    } 
    input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; }; 
    input.setAttribute("id", inputPrefix + ctlSelID); 
    input.title = button.title = "click expand options"; 
    input.style.cursor = button.style.cursor = "default"; 
    input.className = button.className = ctlStyle; 
    input.style.width = (width>0 ? width : object.offsetWidth); 
    height ? input.style.height=button.style.height=height : ""; 
    input.value = object[0].text; 
    if( readonly==true ) input.readOnly=true; 
    object.insertAdjacentElement("afterEnd",button); 
    object.insertAdjacentElement("afterEnd",input); 
    object.style.display = 'none'; 
}}; 
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this) 
{ 
    var div, btn_off; 
    var object = $(ctlSelID); 

    if( !$(containerPrefix + ctlSelID) ) 
    { 
        div = document.createElement("DIV"); 
        div.style.position = "absolute"; 
        div.style.display = "block"; 
        div.setAttribute("id", containerPrefix + ctlSelID); 
        div.className = ctlStyle; 
        div.style.left = offset.left; 
        div.style.top = offset.top + offset.height; 
        div.style.width = (width ? width : offset.width) + 20; 
        div.style.height = offset.height; 
        document.body.appendChild(div); 

        for(var i=0; i<object.length; i++) 
        { 
            div = document.createElement("DIV"); 
            div.setAttribute("id", div.id = elementPrefix + ctlSelID + i); 
            div.style.cursor = "default"; 

            if( object[i].text==$(inputPrefix + ctlSelID).value ) 
            div.className = selStyle; 
            else 
            div.className = unselStyle; 

            div.innerText = div.title = object[i].text; 
            div.style.height = height; 
            div.setAttribute("value", object[i].value); 

            div.onmouseover = function() 
            { 
                for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++) 
                { 
                    if($(containerPrefix + ctlSelID).childNodes[j]==this) 
                    $(containerPrefix + ctlSelID).childNodes[j].className = selStyle; 
                    else 
                    $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle; 
                }                         
            }; 
            div.onclick = function() 
            { 
                $(inputPrefix + ctlSelID).value = this.innerText; 
                $(containerPrefix + ctlSelID).style.display = "none"; 
            }; 
            $(containerPrefix + ctlSelID).appendChild(div); 
        } 
        return; 
    } 

    if( $(containerPrefix + ctlSelID).style.display=="none" ) 
    { 
        for(var i=0; i<object.length; i++) 
        { 
            if( object[i].text==$(inputPrefix + ctlSelID).value ) 
            $(elementPrefix + ctlSelID + i).className = selStyle; 
            else 
            $(elementPrefix + ctlSelID + i).className = unselStyle; 
        } 
        $(containerPrefix + ctlSelID).style.display="block"; 
        return; 
    } 

    if( $(containerPrefix + ctlSelID).style.display=="block" ) 
    { 
        $(containerPrefix + ctlSelID).style.display="none"; 
        return; 
    } 
}}; 
simulateSelect.prototype.getValue = function(ctlSelID) { with(this) 
{ 
    if( $(inputPrefix + ctlSelID) ) 
    return $(inputPrefix + ctlSelID).value; 
    else 
    return null; 
}}; 
simulateSelect.prototype.addEvent = function(w, h) { with(this) 
{ 
}}; 

document.attachEvent("onmousedown", function() { 
                        a.checkupOnMouseDown(event); 
                        b.checkupOnMouseDown(event); 
                        c.checkupOnMouseDown(event) 
                        } 
                    ); 
//--> 
</SCRIPT> 
<select id="s0"> 
<option value="- please select your options -"> - please select your options -</option> 
<option value="1">option1</option> 
<option value="2">option2</option> 
<option value="3">option3</option> 
</select> 
</p> 

<p> 
<select id="s1"> 
<option value="- please select your options -"> - please select your options -</option> 
<option value="1">1option1</option> 
<option value="2">1option2</option> 
<option value="3">1option3</option> 
</select> 
</p> 

<p> 
<select id="s2"> 
<option value="- please select your options -"> - please select your options -</option> 
<option value="1">2option1</option> 
<option value="2">2option2</option> 
<option value="3">2option3</option>
</select> 
</p> 

<p> 
<select id="s3"> 
<option value="- please select your options -"> - please select your options -</option> 
<option value="1">3option1</option> 
<option value="2">3option2</option> 
<option value="3">3option3</option> 
</select> 
</p> 
<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
    var a = new simulateSelect(); 
    a.style("CtlSelect", "selected", "unselected"); 
    a.init("s1"); 
    var b = new simulateSelect(); 
    b.style("CtlSelect1", "selected1", "unselected1"); 
    b.width = 300; 
    b.init("s2"); 
    var c = new simulateSelect(); 
    c.style("CtlSelect2", "selected2", "unselected2"); 
    c.width = 320; 
    c.init("s3"); 
//--> 
</SCRIPT> 
</BODY> 
</HTML>