이전
목록
다음
컴

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

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

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

기능적으로 조금만 더 추가하면 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,497
15-12-13 조회 2,908
15-12-11 조회 2,556
15-12-11 조회 2,519
15-12-11 조회 2,524
15-12-10 조회 2,478
15-12-10 조회 2,547
15-12-10 조회 2,520
15-12-03 조회 3,162
15-12-03 조회 2,681
15-11-25 조회 2,756
15-11-09 조회 3,004
15-11-04 조회 2,922
15-06-09 조회 4,037
15-05-06 조회 5,041
15-03-28 조회 4,501
14-12-05 조회 4,956
14-10-25 조회 4,968
14-10-13 조회 4,225
14-10-03 조회 6,090
14-09-19 조회 4,907
14-09-18 조회 3,994
14-09-13 조회 4,565
14-09-03 조회 5,541
14-08-26 조회 4,156
14-08-26 조회 3,938
14-08-26 조회 3,931
14-08-11 조회 6,355
14-08-06 조회 4,077
14-08-06 조회 3,670
14-08-06 조회 3,852
14-08-01 조회 6,195
14-08-01 조회 3,779
14-07-30 조회 4,375
14-06-28 조회 5,120
14-06-28 조회 4,402
14-05-11 조회 4,530
14-05-09 조회 4,895
14-05-09 조회 7,655
14-04-30 조회 4,211
14-04-27 조회 4,133
14-04-25 조회 4,856
14-04-21 조회 3,827
14-04-21 조회 4,952
14-04-10 조회 4,557
14-04-01 조회 6,120
14-03-03 조회 3,495
14-02-25 조회 5,882
14-02-14 조회 5,161
14-02-13 조회 4,917
14-01-03 조회 4,394
13-12-06 조회 3,735
13-11-22 조회 5,491
13-11-18 조회 3,985
13-10-02 조회 4,391
13-10-02 조회 3,655
13-10-02 조회 3,916
13-10-02 조회 3,778
13-10-02 조회 4,148
13-09-16 조회 7,996
13-09-16 조회 5,353
13-08-18 조회 5,352
13-07-11 조회 3,999
13-07-10 조회 4,631
13-07-09 조회 4,678
13-07-09 조회 4,932
13-07-04 조회 4,401
13-07-04 조회 4,065
13-07-04 조회 4,184
13-07-01 조회 4,678
13-07-01 조회 4,494
13-07-01 조회 6,722
13-06-23 조회 4,335
13-06-05 조회 3,594
13-05-29 조회 4,824
13-05-10 조회 4,233
13-04-05 조회 4,838
13-04-05 조회 6,531
13-04-05 조회 1.1만
13-04-05 조회 7,134
13-04-05 조회 6,527
13-03-31 조회 5,798
13-03-31 조회 4,113
13-03-28 조회 4,482
13-03-28 조회 6,625
13-03-28 조회 9,162
13-03-28 조회 4,295
13-03-24 조회 3,901
13-03-21 조회 4,573
13-03-21 조회 1.7만
13-03-14 조회 3,885
13-03-10 조회 4,692
13-03-10 조회 4,432
13-03-10 조회 4,145
13-03-08 조회 5,224
13-03-08 조회 4,332
13-03-03 조회 4,977
13-03-03 조회 7,426
13-03-03 조회 4,186
13-03-03 조회 1.1만
글쓰기