레이어를 이용한 셀렉트 박스
아래 소스는 제가 퍼블리싱 하면서 만들었던 레이어 셀렉트 박스 소스인데요.
제이쿼리를 이용해서 아주 간단하게 만든것이에요.
기능적으로 조금만 더 추가하면 select tag와 동일하게 사용할 수 있을 거라
생각해요.
제이쿼리와 css를 좀 아시면 금방 해석 가능할 것에요.
$(document).ready(function() {
////////////////////////////////////////////////////////////////////////////////////
//javascript:location.href='#' <==== # 부분에 url을 넣는다.
////////////////////////////////////////////////////////////////////////////////////
var selecttag = "\
<div id='choicevalue'><img src=\"/images/engicon.png\" alt=\"ENG\" /></div>\
<dl>\
<dd onClick=\"javascript:location.href='#'\"><img src=\"/images/engicon.png\" alt=\"ENG\" width=80 height=20/></dd>\
<dd onClick=\"javascript:location.href='#'\"><img src=\"/images/koricon.png\" alt=\"KOR\" width=80 height=20 /></dd>\
</dl>\
";
// GNB
$(".gnb").append($("<li class=\"end\" id=\"selectmenu\">"+selecttag+"</li>")); //<=== 이부분에 셀렉트박스 추가
//////////////////////////////////////////////////////////////////////////////////////////////
//레이어 셀렉트박스
//////////////////////////////////////////////////////////////////////////////////////////////
var defaultheight = 24;
var defaultwidth = 80;
var maxheight = defaultheight;
var top = defaultheight + 4;
$('#selectmenu').css({'padding':'2px 0','cursor':'pointer','height':defaultheight+'px','width':defaultwidth+'px','color':'#d7d7d7','position':'relative','z-index':'1000'});
function ShowSelect(){
$('#choicevalue').css({'clear':'both','padding':'2px 0','height':defaultheight+'px','width':defaultwidth+'px'});
var ddcnt = $('#selectmenu').children("dl").children("dd").length;
maxheight = defaultheight * ddcnt;
$('#selectmenu').children("dl").css({"clear":"both","position":"absolute","left":"0px","top":top+"px","z-index":"10000","height":maxheight+"px","width":defaultwidth+"px",'border':'1px solid #fff','background':'#6d656a'});
$('#selectmenu').children("dl").children("dd").css({"clear":"both","height":defaultheight+"px","width":defaultwidth+"px"},{'padding':'2px 0px'});
$('#selectmenu').css({"height":(maxheight+defaultheight+10)+"px"});
}
function HideSelect(){
$('#selectmenu').animate({'height':defaultheight+'px'});
}
$('#selectmenu').mouseenter(function(){
ShowSelect();
});
$("#selectmenu").children("dl").children("dd").click(function(){
$('#choicevalue').html($(this).html());
HideSelect();
});
$('#selectmenu').mouseleave(function(){
HideSelect();
});
ShowSelect();
setTimeout(function(){
HideSelect();
},2000);
//////////////////////////////////////////////////////////////////////////////////////////////
});
제이쿼리를 이용해서 아주 간단하게 만든것이에요.
기능적으로 조금만 더 추가하면 select tag와 동일하게 사용할 수 있을 거라
생각해요.
제이쿼리와 css를 좀 아시면 금방 해석 가능할 것에요.
$(document).ready(function() {
////////////////////////////////////////////////////////////////////////////////////
//javascript:location.href='#' <==== # 부분에 url을 넣는다.
////////////////////////////////////////////////////////////////////////////////////
var selecttag = "\
<div id='choicevalue'><img src=\"/images/engicon.png\" alt=\"ENG\" /></div>\
<dl>\
<dd onClick=\"javascript:location.href='#'\"><img src=\"/images/engicon.png\" alt=\"ENG\" width=80 height=20/></dd>\
<dd onClick=\"javascript:location.href='#'\"><img src=\"/images/koricon.png\" alt=\"KOR\" width=80 height=20 /></dd>\
</dl>\
";
// GNB
$(".gnb").append($("<li class=\"end\" id=\"selectmenu\">"+selecttag+"</li>")); //<=== 이부분에 셀렉트박스 추가
//////////////////////////////////////////////////////////////////////////////////////////////
//레이어 셀렉트박스
//////////////////////////////////////////////////////////////////////////////////////////////
var defaultheight = 24;
var defaultwidth = 80;
var maxheight = defaultheight;
var top = defaultheight + 4;
$('#selectmenu').css({'padding':'2px 0','cursor':'pointer','height':defaultheight+'px','width':defaultwidth+'px','color':'#d7d7d7','position':'relative','z-index':'1000'});
function ShowSelect(){
$('#choicevalue').css({'clear':'both','padding':'2px 0','height':defaultheight+'px','width':defaultwidth+'px'});
var ddcnt = $('#selectmenu').children("dl").children("dd").length;
maxheight = defaultheight * ddcnt;
$('#selectmenu').children("dl").css({"clear":"both","position":"absolute","left":"0px","top":top+"px","z-index":"10000","height":maxheight+"px","width":defaultwidth+"px",'border':'1px solid #fff','background':'#6d656a'});
$('#selectmenu').children("dl").children("dd").css({"clear":"both","height":defaultheight+"px","width":defaultwidth+"px"},{'padding':'2px 0px'});
$('#selectmenu').css({"height":(maxheight+defaultheight+10)+"px"});
}
function HideSelect(){
$('#selectmenu').animate({'height':defaultheight+'px'});
}
$('#selectmenu').mouseenter(function(){
ShowSelect();
});
$("#selectmenu").children("dl").children("dd").click(function(){
$('#choicevalue').html($(this).html());
HideSelect();
});
$('#selectmenu').mouseleave(function(){
HideSelect();
});
ShowSelect();
setTimeout(function(){
HideSelect();
},2000);
//////////////////////////////////////////////////////////////////////////////////////////////
});
댓글을 작성하시려면 로그인이 필요합니다.