找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发javascript模拟select框

2019-01-03 分类：JavaScript 阅读(694) 评论(0)
网站前端开发技术毕业论文
网站后台开发和前端的区别
前端开发有哪些网站

兼容各主流浏览器除ie8以下
代码片段 1

<!DOCTYPE html>
    <head>
        <title>模拟select</title>
        <meta charset=”utf-8″ />
        <meta name=”author” content=”lut000″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            a {
                text-decoration: none;
            }
            body {
                background-color: #dadada;
            }
            li {
                list-style: none;
            }
            .select_div {
                position: relative;
                width: 250px;
                margin: 50px auto;
                border: 1px solid #d2d2d2;
                background-color: #fff;
                -webkit-user-select: none; /* Chrome all / Safari all */
                -moz-user-select: none; /* Firefox all */
                -ms-user-select: none; /* IE 10+ */
                -o-user-select: none; /* opera */
                user-select: none;
            }
            .select_spn {
                display: block;
                padding: 10px;
                padding-right: 20%;
                background: url(images/icon1.png) no-repeat;
                background-position: 95% center;
                background-size: 0.8em;
                cursor: pointer;
            }
            .option_list {
                position: absolute;
                left: 0;
                bottom: -97px;
                width: 100%;
                background-color: #fff;
                bottom: 1px solid #d2d2d2;
                display: none;
            }
            .option_list > li {
                padding: 5px 10px;
            }
            .option_list > li:hover {
                background-color: #23d;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <!–[if lt IE 9]>
            <div
                id=”warning_info”
                style=”padding: 10px;background: #fff;color: #a89;”
            >
                <strong>你正在使用低版本浏览器，</strong>
                无法完整的显示页面效果。 建议升级到
                <a
                    href=”http://windows.microsoft.com/en-us/internet-explorer/download-ie”
                    target=”_blank”
                    title=”下载高版本的浏览器”
                >
                    Internet Explorer 9+</a
                >
                或使用谷歌浏览器：<a
                    href=”http://www.google.cn/intl/zh-CN/chrome/”
                    target=”_blank”
                    title=”谷歌浏览器”
                    >Chrome</a
                >
                <a
                    href=”javascript:;”
                    titke=”关闭”
                    style=”display: inline-block;background: #a89;color: #fff”
                    >×</a
                >
            </div>
            <script type=”text/javascript”>
                var oDiv = document.getElementById(‘warning_info’)
                var oBtn = oDiv.getElementsByTagName(‘a’)[2]
                oBtn.onclick = function() {
                    document.body.removeChild(oDiv)
                }
            </script>
        <![endif]–>
        <div class=”select_div” id=”div1″>
            <span class=”select_spn” value=”value”>我是选中项</span>
            <ul class=”option_list”>
                <li value=”上海”>上海</li>
                <li value=”广东”>广东</li>
                <li value=”南京”>南京</li>
            </ul>
        </div>
        <div class=”select_div” id=”div2″>
            <span class=”select_spn” value=”value”>我是选中项</span>
            <ul class=”option_list”>
                <li value=”上海”>上海</li>
                <li value=”广东”>广东</li>
                <li value=”南京”>南京</li>
            </ul>
        </div>
        <script type=”text/javascript”>
            window.onload = function() {
                // 自执行
                ;(function() {
                    // 获取元素 支持ie8+
                    var aBtn1 = $(‘.select_spn’)
                    var aBox = $(‘.option_list’)
                    var aLi = null
                    // 循环绑定事件
                    for (var i = 0, len = aBtn1.length; i < len; i++) {
                        // 开关
                        aBtn1[i].isShow = true
                        // 绑定打开框子
                        aBtn1[i].onclick = function(e) {
                            for (var j = 0; j < len; j++) {
                                aBtn1[j].parentNode.style.zIndex = 1
                            }
                            this.parentNode.style.zIndex = 100
                            var list_obj = getNextEle(this)
                            // 先关闭所有的框子
                            list_obj.style.display = ‘none’
                            if (this.isShow) {
                                this.isShow = false
                                list_obj.style.display = ‘block’
                            } else {
                                this.isShow = true
                                list_obj.style.display = ‘none’
                            }
                            // 取消事件冒泡
                            stopBubble(e)
                        }
                    }
                    // 点击任意一处关闭框子
                    document.onclick = function(e) {
                        for (var i = 0, len = aBox.length; i < len; i++) {
                            aBox[i].style.display = ‘none’
                            aBtn1[i].isShow = true
                        }
                        // 取消事件冒泡
                        stopBubble(e)
                    }
                    // 选中项目
                    for (var i = 0, len = aBox.length; i < len; i++) {
                        var aLi = $(‘li’, aBox[i])
                        for (var j = 0, li_len = aLi.length; j < li_len; j++) {
                            aLi[j].point_ele = i
                            aLi[j].onclick = function() {
                                var txt = this.getAttribute(‘value’)
                                    ? this.getAttribute(‘value’)
                                    : ”
                                aBtn1[this.point_ele].innerHTML = txt
                                aBtn1[this.point_ele].setAttribute(‘value’, txt)
                            }
                        }
                    }
                })()
            }
            // 获取元素
            function $(str, oPar) {
                var a = oPar
                    ? oPar.querySelectorAll(str)
                    : document.querySelectorAll(str)
                if (str.indexOf(‘#’) != -1) {
                    a[0].index = 0
                    return a[0]
                } else {
                    for (var i = 0, len = a.length; i < len; i++) {
                        a[i].index = i
                    }
                    return a
                }
            }
            // 绑定事件
            // function addEleEvent(obj,func){
            // for(var i=0,len=obj.length;i<len;i++){
            // obj[0].onclick=func;
            // }
            // }
            // 获取下一个兄弟元素
            function getNextEle(obj) {
                if (obj.nextSibling != ‘undefined’) {
                    if (obj.nextSibling.nodeType == 1) {
                        return obj.nextSibling
                    } else {
                        return arguments.callee(obj.nextSibling)
                    }
                } else {
                    return null
                }
            }
            // 阻止事件冒泡
            function stopBubble(e) {
                if (e && e.stopPropagation) {
                    e.stopPropagation()
                } else {
                    window.event.cancelBubble = true
                }
                return false
            }
        </script>
    </body>
</html>
前端网站开发实例视频
php网站前端开发
网站运营和前端开发
赞(0)
前端开发者 » 前端开发javascript模拟select框
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论