이전
목록
다음
컴

레이어를 이용한 셀렉트 박스

잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2014-05-09 (금) 19:20:40 · 4851
아래 소스는 제가 퍼블리싱 하면서 만들었던 레이어 셀렉트 박스 소스인데요.

제이쿼리를 이용해서 아주 간단하게 만든것이에요.

기능적으로 조금만 더 추가하면 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);
    //////////////////////////////////////////////////////////////////////////////////////////////
});
#개발자팁 #개발자 #팁자료실 #javascript
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
16-06-11 조회 2,927
16-02-15 조회 3,233
16-02-02 조회 2,893
16-01-25 조회 2,512
16-01-18 조회 2,598
16-01-08 조회 2,545
16-01-07 조회 2,567
16-01-05 조회 2,586
16-01-05 조회 2,887
16-01-05 조회 2,704
16-01-05 조회 2,745
16-01-04 조회 2,601
16-01-04 조회 2,612
16-01-04 조회 2,563
16-01-04 조회 2,481
15-12-30 조회 2,818
15-12-24 조회 2,630
15-12-24 조회 2,642
15-12-24 조회 2,663
15-12-24 조회 2,624
15-12-23 조회 2,600
15-12-16 조회 2,689
15-12-15 조회 2,763
15-12-11 조회 2,866
15-12-10 조회 2,752
15-11-09 조회 2,737
15-11-09 조회 2,970
15-10-06 조회 3,295
15-10-02 조회 3,086
15-05-29 조회 4,417
15-02-02 조회 4,384
15-01-18 조회 4,341
14-10-25 조회 8,304
14-10-25 조회 5,076
14-10-22 조회 7,090
14-10-22 조회 4,803
14-10-22 조회 4,747
14-10-18 조회 5,625
14-10-17 조회 5,992
14-10-17 조회 5,368
14-10-17 조회 8,814
14-10-17 조회 6,381
14-10-13 조회 4,300
14-10-13 조회 4,397
14-10-07 조회 6,091
14-09-24 조회 3,858
14-09-23 조회 3,935
14-09-22 조회 4,821
14-09-22 조회 6,046
14-09-22 조회 4,019
14-09-22 조회 3,693
14-09-21 조회 4,260
14-09-21 조회 3,747
14-09-20 조회 3,748
14-09-20 조회 3,657
14-09-20 조회 3,839
14-09-19 조회 3,789
14-09-19 조회 3,931
14-09-19 조회 3,823
14-09-19 조회 4,076
14-09-19 조회 3,840
14-09-19 조회 3,753
14-09-19 조회 4,043
14-09-19 조회 3,800
14-09-19 조회 3,844
14-09-19 조회 3,811
14-09-18 조회 3,887
14-09-18 조회 3,851
14-09-18 조회 4,127
14-09-18 조회 4,087
14-09-18 조회 4,103
14-09-18 조회 4,809
14-09-18 조회 5,354
14-09-18 조회 5,261
14-09-18 조회 4,065
14-09-18 조회 4,553
14-09-18 조회 4,193
14-08-30 조회 5,308
14-08-06 조회 5,928
14-08-06 조회 5,532
14-08-03 조회 5,191
14-06-12 조회 5,456
14-05-11 조회 3,649
14-05-11 조회 4,416
14-05-11 조회 4,512
14-05-09 조회 1.3만
14-05-01 조회 4,995
14-03-30 조회 4,343
14-03-23 조회 7,950
14-02-12 조회 3,844
13-10-29 조회 7,802
13-10-28 조회 8,626
13-09-29 조회 6,589
13-09-29 조회 4,215
13-07-23 조회 5,064
13-07-23 조회 1.2만
13-07-14 조회 4,646
13-07-14 조회 5,022
13-07-14 조회 5,962
13-07-14 조회 5,268
글쓰기