Node.js 사용자 정의 맞춤형 드롭다운 선택 상자 example_javascript 기술

코드 복사 코드는 다음과 같습니다. statistics test .dropdiv{ width: 177px; height: 16px; overflow: hidden; float: left; font-size: 13px; font-family: "微软雅黑"; position: relative; padding: 5px; } .drpdown{ width: 214px; height: 24px; font-size: 13px; font-family:"微软雅黑"; position: relative; border:none; padding-top:4px; background:url(../images/dropdown.png) repeat-x; } .drpdown:active{ width: 214px; height: 24px; font-size: 13px; font-family:"微软雅黑"; position: relative; border:none; padding-top:4px; background:url(../images/dropdown.png) repeat-x; } .droparrow{ width:27px; height:27px; background:url(../images/droparrow.png) no-repeat; float:right; } .droparrow:hover{ width:25px; height:25px; background:url(../images/droparrow.png) no-repeat; float:right; border:#F00 1px solid; } .dropmiandiv{ margin-left:40px; width:214px; border: 2px solid #aaaaaa; background:url(../images/dropdown.png) repeat-x; height: 26px; } .chooseItems{ border:#666 2px solid; } .chooseItems .chooseItem{ font-size: 13px; font-family: "微软雅黑"; padding: 5px; } .chooseItems .chooseItem:hover{ background:#09F; } 请选择 独立注册译员 供应商译员 供应商 代理商 请选择 独立注册译员 供应商译员 供应商 代理商 $(".droparrow").click(function(e){ varquest = $(this).parent(); varquestwidth =parseInt(quest.width()); varquestheight=quest.height(); var left=quest.offset().left; var top=parseInt(quest.offset().top)parseInt(questheight) 4; attrs = Quest.attr("quest"); var selectsd = $('.chooseItems[answer=' attrs ']') var selectsdHeight = selectsd.height(); top selectsdHeight)>$(window).height()){ top = top - selectsdHeight -questheight-7 } if($(selectsd).is(":visible")) { $(selectsd).hide(); }else{ $(selectsd).css({"left":left "px","top":top "px","width ":questwidth "px"}).show(); } }); $(".dropdiv").click(function(e){ varquest = $(this).parent(); varquestwidth =parseInt(quest.width()); varquestheight=quest.height(); var left=quest.offset().left; var top=parseInt(quest.offset().top)parseInt(questheight) 4; attrs = Quest.attr("quest"); var selectsd = $('.chooseItems[answer=' attrs ']') var selectsdHeight = selectsd.height(); top selectsdHeight)>$(window).height()){ top = top - selectsdHeight -questheight-7 } if($(selectsd).is(":visible")) { $(selectsd).hide(); }else{ $(selectsd).css({"left":left "px","top":top "px","width ":questwidth "px"}).show(); } }); $(".chooseItem").click(function(e){ var divhtml = $(this); var displayMember,valueMember; displayMember = divhtml.attr("displayMember") ; valueMember = divhtml.attr("valueMember"); var attrs =$(this).parent().attr("answer") var parent = $("#" attrs) ; var olddisplayMember,oldvalueMember; olddisplayMember = parent.attr("displayMember"); oldvalueMember = parent.attr("valueMember") if(olddisplayMember !=displayMember) >parent.attr("displayMember",displayMember); parent.attr("valueMember",valueMember); parent.html(valueMember) parent.change()} $(this).parent().hide() }); $(".dropdiv").change(function(e){ alert($(this).attr("valueMember")); }); $(".dropmiandiv").mouseleave(function(e){ var Quest = $(this).attr("quest"); $('.chooseItems[answer='quest ' ]').hide() }); $(".chooseItems").mouseenter(function(e){ $(this).show(); }); $(".chooseItems").mouseleave(function(e){ $(this).hide(); });

Node.js 사용자 정의 맞춤형 드롭다운 선택 상자 example_javascript 기술

관련 기사