본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

javascript 탭 내비게이션 bind 함수

탭으로 내비게이션을 할 수 있도록 웹사이트를 구성하는 게 좋다. 마우스를 사용하지 못하는 경우가 있기 때문이다.

일단 기본적으로는 HTML 순서와 보이는 순서를 같게 해야 한다. 그러면 js를 사용할 필요 없이 그냥 자연스럽게 탭으로 왔다갔다 할 수 있다.

js가 개입해서 요소가 보였다 안 보였다 하는 부분은 탭 내비게이션으로 잡아 주면 되는데, 그조차도 a 태그에 hover와 focus 이벤트로 걸어 뒀다면 훨씬 편해 진다.

구성을 잘 하면 콘텐츠 영역의 첫 a에서 Shift+Tab을 눌렀을 때 메가메뉴의 마지막 서브메뉴를 보이게 하는 정도의 처리만 하면 될 것이다.

그런데 HTML을 자신이 짜지 않은 상황에서 유지보수를 해야 하는 일이 생길 수 있다. HTML을 새로 짜면 좋겠지만, 그만큼은 시간이 없다면, 어쩔 수 없이 js를 써야 하는 것이다. 아래 함수는 그런 일이 생겨서 만든 것이다. 권장하는 함수는 아니다. 여튼 불가피할 땐 써야지 뭐.

함수 사용법은 주석을 보면 된다.

/**
* ex)
* bind_tab_navigation({
*     target: ".family-site__a",
*     prev: '.brand-page-last',
*     prev_pre_event: function(){
*         $('.brand-page-content').show();
*     },
*     next: '.family-site-first',
*     next_pre_event: function(){
*         $('.family-site-content-wrap').show();
*     }
* });
* @param obj
*/
function bind_tab_navigation(obj){
    var default_obj = {
        target: null,
        prev: null,
        prev_pre_event: null,
        prev_post_event: null,
        next: null,
        next_pre_event: null,
        next_post_event: null
    };

    var opt = $.extend(default_obj, obj);

    $(opt.target).keydown(function(e){

        // shift + tab
        if(opt.prev_pre_event && e.shiftKey && e.keyCode == 9){
          opt.prev_pre_event();
        }
        if(opt.prev && e.shiftKey && e.keyCode == 9){
            e.preventDefault();
            $(opt.prev).focus();
        }
        if(opt.prev_post_event && e.shiftKey && e.keyCode == 9){
           opt.prev_post_event();
        }

        // tab
        if(opt.next_pre_event && ! e.shiftKey && e.keyCode == 9){
            opt.next_pre_event();
        }
        if(opt.next && ! e.shiftKey && e.keyCode == 9){
            e.preventDefault();
            $(opt.next).focus();
        }
        if(opt.next_post_event && ! e.shiftKey && e.keyCode == 9){
            opt.next_post_event();
        }
    });
}

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *