码迷,mamicode.com
首页 > 其他好文 > 详细

模拟下拉框

时间:2014-10-08 17:02:35      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:android   style   color   io   os   ar   java   sp   div   

//模拟下拉框
$(".Js_dropMod").each(function(){
        var _this=$(this)
            //_this.find(".Js_hiddenVal").val("")
            var curObj=_this.find(".Js_curVal");
            if(curObj.find("input:text").length<=0){
                var curText=curObj.text();
                curObj.html("");
                curObj.append("<input type=‘text‘ value=‘"+curText+"‘ />")
            }
        //_this.find(".Js_hiddenVal").val("")
        _this.find(".Js_hiddenVal").attr("normal",_this.find(".Js_curVal").find("input:text").val())
        _this.hover(function(){
            _this.find(".Js_hiddenVal").attr("normal",_this.find(".Js_curVal").find("input:text").val())
            //添加zIndex的值是为了兼容IE8以下浏览器层级
            _this.css("zIndex","999")
            _this.parents(".pop-conlists").css("z-index","2")
            if(_this.find(".select-list").find("li").length<=0) return;
            _this.find(".select-list").show().find("li").show();
            if(_this.parents(".search-mod").length>0){
                _this.parents(".search-mod").eq(0).css("z-index",5)
            }
        },function(){
            _this.css("zIndex","999")
            _this.find(".select-list").hide().find("li").removeClass("hover");
            if(_this.parents(".search-mod").length>0){
                _this.parents(".search-mod").eq(0).css("z-index",1)
            }
        })
    //添加hover方法
    _this.find("ul li").each(function(){
        $(this).hover(function(){
            $(this).addClass("hover").siblings("li").removeClass("hover")
        },function(){
            $(this).removeClass("hover")
        }).click(function(e){
            var that=$(this).find("a")
            _this.find(".Js_hiddenVal").attr("normal",that.text());
            if(that.parents("ul").siblings(".Js_curVal").find("input:text").length<=0){
                that.parents("ul").siblings(".Js_curVal").text(that.text()).css("color","#5A5A5A")
            }
            else
            {
                that.parents("ul").siblings(".Js_curVal").find("input:text").val(that.text()).css("color","#5A5A5A")
            }
            that.parents("ul").siblings(".Js_hiddenVal").val(that.attr("rel"))
            that.parents("ul").siblings("label.error").remove();
            that.parents("ul.select-list").hide()
            //e.preventDefault();
            //e.stopImmediatePropagation()
        })
    })    
})        



                <!-- <div class="shortcut">
                    <span class="left-t">应用插件:</span><div class="Js_dropMod select-box inline-select select-200 ">
                        <input type="hidden" class="Js_hiddenVal" id="deleteflag" name="deleteflag" value="1"/>
                        <span class="Js_curVal">请选择</span>
                        <ul class="select-list">
                            <li class="select-item" onclick="loadDeleteflag(‘1‘)" ><a href="javascript:void(null)" rel="1">企业通讯录android版企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘2‘)" ><a href="javascript:void(null)" rel="2">企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘3‘)" ><a href="javascript:void(null)" rel="3">企业通讯录android版</a></li>
                        </ul>
                    </div>
                    <span class="left-t">应用:</span><div class="Js_dropMod select-box inline-select select-200 ">
                        <input type="hidden" class="Js_hiddenVal" id="deleteflag" name="deleteflag" value="1"/>
                        <span class="Js_curVal">请选择</span>
                        <ul class="select-list">
                            <li class="select-item" onclick="loadDeleteflag(‘1‘)" ><a href="javascript:void(null)" rel="1">企业通讯录android版企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘2‘)" ><a href="javascript:void(null)" rel="2">企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘3‘)" ><a href="javascript:void(null)" rel="3">企业通讯录android版</a></li>
                        </ul>
                    </div>
                </div>     -->


/*表单模拟select*/
.select-box{ position:relative;float:left; width:80px;padding: 0 26px 0 12px;border:1px solid #BFBFC0; height:22px;line-height:22px; background:url(../images/icon/icon_down.png) no-repeat right center #fff;  text-align:left;}
.select-box .Js_curVal input,.Js_curVal input[type=text]{ width:100%; height:24px; border:none;}
input:focus{outline:none;}
.select-box.w90{width:90px}
.select-list{ background:#F0F0F0}
.select-box.w90 .select-list{ width:128px;border-color:#ddd}
.w30{width:30px}
.w30 .select-list{ width:68px;border-color:#ddd}
.select-box.w80{width:80px}
.select-box.w80 .select-list{ width:118px;border-color:#ddd}
.select-box span{display:inline-block;*display:inline;*zoom:1;height:22px;line-height:22px;overflow:hidden; width:100%;font-size:12px;}
.select-list{ display:none; position:absolute; z-index:5;left:-1px;top:22px; border:1px solid #ddd; white-space:nowrap; overflow:auto; max-height:300px;}
.select-list .select-item{ *zoom:1; padding:0px 10px 0px 12px;}
.select-list .select-item.indent{text-indent:5px;}
.select-list .select-item.bold{font-weight:700;font-style: oblique;}
.select-list .hover{/*background-color:#6BADEA;*/ color:#6888B9; cursor:pointer;}
.select-item a:link,.select-item a:visited{padding:0px; word-break: break-all;word-wrap: break-word;display:inline-block;*display:inline;*zoom:1;font-size:12px;}
.select-item a.snode{font-style:none;float:left; text-decoration:none;}
.select-item a:hover,.select-item a:active{  color:#fff;}
.select-item s{ text-decoration:none;}

.select-list .hover{*zoom:1;}
.select-list .hover a:link,.select-list .hover a:visited{display:inline-block;*display:inline;*zoom:1;/*background-color:#6BADEA;*/color:#6888B9;}
.main-hd .select-list .hover a:link,.main-hd .select-list .hover a:visited{display:block;}
.select-box label.error{ margin-top:2px;}
.Js_coverDropMod{cursor:pointer;}

模拟下拉框

标签:android   style   color   io   os   ar   java   sp   div   

原文地址:http://www.cnblogs.com/miumiu/p/4011220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!