zoukankan      html  css  js  c++  java
  • 【javascript】js 美化单选,多选和下拉框

    这是以前收藏的用 js 实现美化单选,多选和下拉框的效果。

    先上效果图:

    Html代码:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>checkbox and radio and select</title>
        <style type="text/css">
        body{font:0.8em arial,sans-serif;}
        .checkbox,.radio{width:19px;height:25px;padding-right:5px;background:url(checkbox.gif) no-repeat;float:left;}
        .radio{background:url(radio.gif) no-repeat;}
        .select{position:absolute;width:158px;height:21px;padding:0 24px 0 8px;color:white;font:12px/21px arial,sans-serif;background:url(select.gif) no-repeat;overflow:hidden;}
        </style>
    </head>
    <body>
        <h1>Checkbox</h1>
        <p><input type="checkbox" name="checked" id="checked" class="styled"/><label for="checked">Checked</label></p>
        <h1>Radio</h1>
        <p><input type="radio" name="radio" id="yes" class="styled"/><label for="yes">Yes</label></p>
        <p><input type="radio" name="radio" id="no" class="styled"/><label for="no">No</label></p>
        <h1>Select</h1>
        <select class="styled" name="who">
            <option selected="selected">Who</option>
            <option>What</option>
            <option>When</option>
            <option>Where</option>
            <option>How</option>
        </select>
    </body>
    </html>
    <script type="text/javascript" src="custom-form-elements.js"></script>

    custom-form-elements.js代码:

    View Code
    /*
    CUSTOM FORM ELEMENTS
    
    Created by Ryan Fait
    www.ryanfait.com
    
    The only things you may need to change in this file are the following
    variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
    
    The numbers you set for checkboxHeight and radioHeight should be one quarter
    of the total height of the image want to use for checkboxes and radio
    buttons. Both images should contain the four stages of both inputs stacked
    on top of each other in this order: unchecked, unchecked-clicked, checked,
    checked-clicked.
    
    You may need to adjust your images a bit if there is a slight vertical
    movement during the different stages of the button activation.
    
    The value of selectWidth should be the width of your select list image.
    
    Visit http://ryanfait.com/ for more information.
    */
    
    var checkboxHeight = "25";
    var radioHeight = "25";
    var selectWidth = "190";
    
    /* No need to change anything after this */
    
    document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative;  ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
    
    var Custom = {
        init: function() {
            var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
            for(a = 0; a < inputs.length; a++) {
                if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                    span[a] = document.createElement("span");
                    span[a].className = inputs[a].type;
    
                    if(inputs[a].checked == true) {
                        if(inputs[a].type == "checkbox") {
                            position = "0 -" + (checkboxHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        } else {
                            position = "0 -" + (radioHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        }
                    }
                    inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                    inputs[a].onchange = Custom.clear;
                    if(!inputs[a].getAttribute("disabled")) {
                        span[a].onmousedown = Custom.pushed;
                        span[a].onmouseup = Custom.check;
                    } else {
                        span[a].className = span[a].className += " disabled";
                    }
                }
            }
            inputs = document.getElementsByTagName("select");
            for(a = 0; a < inputs.length; a++) {
                if(inputs[a].className == "styled") {
                    option = inputs[a].getElementsByTagName("option");
                    active = option[0].childNodes[0].nodeValue;
                    textnode = document.createTextNode(active);
                    for(b = 0; b < option.length; b++) {
                        if(option[b].selected == true) {
                            textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                        }
                    }
                    span[a] = document.createElement("span");
                    span[a].className = "select";
                    span[a].id = "select" + inputs[a].name;
                    span[a].appendChild(textnode);
                    inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                    if(!inputs[a].getAttribute("disabled")) {
                        inputs[a].onchange = Custom.choose;
                    } else {
                        inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                    }
                }
            }
            document.onmouseup = Custom.clear;
        },
        pushed: function() {
            element = this.nextSibling;
            if(element.checked == true && element.type == "checkbox") {
                this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
            } else if(element.checked == true && element.type == "radio") {
                this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
            } else if(element.checked != true && element.type == "checkbox") {
                this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
            } else {
                this.style.backgroundPosition = "0 -" + radioHeight + "px";
            }
        },
        check: function() {
            element = this.nextSibling;
            if(element.checked == true && element.type == "checkbox") {
                this.style.backgroundPosition = "0 0";
                element.checked = false;
            } else {
                if(element.type == "checkbox") {
                    this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
                } else {
                    this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                    group = this.nextSibling.name;
                    inputs = document.getElementsByTagName("input");
                    for(a = 0; a < inputs.length; a++) {
                        if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                            inputs[a].previousSibling.style.backgroundPosition = "0 0";
                        }
                    }
                }
                element.checked = true;
            }
        },
        clear: function() {
            inputs = document.getElementsByTagName("input");
            for(var b = 0; b < inputs.length; b++) {
                if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
                    inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
                } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
                    inputs[b].previousSibling.style.backgroundPosition = "0 0";
                } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
                    inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
                    inputs[b].previousSibling.style.backgroundPosition = "0 0";
                }
            }
        },
        choose: function() {
            option = this.getElementsByTagName("option");
            for(d = 0; d < option.length; d++) {
                if(option[d].selected == true) {
                    document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
                }
            }
        }
    }
    window.onload = Custom.init;

    PS:下拉框的效果在 ie6 下不兼容。附上下载地址。

  • 相关阅读:
    PHP+MYSQL不错的环境架设软件
    ASV2011(Action Script Viewer)免费升级
    Win2003证书服务配置/客户端(服务端)证书申请/IIS站点SSL设置
    Entity FrameWork 4 PoCo使用
    使用Forms Authentication实现用户注册、登录
    验证数字的正则表达式集
    web.config/app.config敏感数据加/解密的二种方法
    如何创建一个标准的Windows服务
    抛弃WebService 在.NET4中用jQuery调用WCF
    EF 中调用带输出参数的存储过程
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2805441.html
Copyright © 2011-2022 走看看