레이피엘의 블로그

 웹 개발을 진행하다 보면 유저 인터페이스 구성을 위해 마우스 휠에 의한 스크롤을 막아야 할 경우가 생긴다. 이럴경우 자바스크립트의 jquery를 이용하여 간단하게 제어할 수 있다. 아래의 소스 코드를 확인해보자.(※버튼을 이용해 직접 테스트 해볼 수 있다.)

<script type="text/javascript">
    $(document).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) {
        e.preventDefault();
        return;
    });
    $(document).on("keydown.disableScroll", function(e) {
        var eventKeyArray = [32, 33, 34, 35, 36, 37, 38, 39, 40];
        for (var i = 0; i < eventKeyArray.length; i++) {
            if (e.keyCode === eventKeyArray [i]) {
                e.preventDefault();
                return;
            }
        }
    });
</script>

<script type="text/javascript">
     $(document).off(".disableScroll");
</script>

 상기에서 확인한 바와같이 jquery의 on/off 펑션을 이용하여 mousewheel, DOMMouseScroll, touchmove 이벤트 활성/비활성화 시키고 있다. jquery의 on/off 펑션에 대해서는 jquery의 api를 참고하면 될 듯 하다. 간단하게 설명하자면 .on(이벤트, 핸들러)의 형태로 호출하며 이벤트 파라메터의 경우 단일 혹은 공백문자 구분으로 복수지정이 가능하며 이벤트명 또는 이벤트명과 네임스페이스의 결합형태 로 지정할 수 있다. 위의 소스에서는 mousewheel이라는 이벤트명에 disableScroll이라는 네이스페이가 결합된 형태이다. 네임스페이스는 도트문자[.]로 구분하며 여러계층으로 지정이 가능하다. 해제 펑션의 경우 .off(이벤트)의 형태로 호출하며 이벤트 파라메터는 on과 마찬가지로 지정하면 된다. 제거시에는 위의 소스에서처럼 네임스페이스로 호출하게 되면 해당 네임스페이스 포함 하위 네임스페이스를 제거가 가능하므로 호출별로 별도로 이벤트 컨트롤이 가능하다.

 예제에서 DOMMouseScroll이벤트는 파이어폭스 계열에서는 mousewheel이벤트가 작동하지 않으므로 해당 이벤트로 DOMMouseScroll를 추가해 주어야 하며 touchmove는 태블릿 피시에서의 터치 이벤트에 관여한다. 별도로 호출하고 있는 keydown의 경우는 pageup등의 페이지를 스크롤할 수 있는 키의 이벤트에 관여하여 이벤트를 핸들링한다.

 위의 코드를 참고하면 페이지 스크롤을 일시적으로 블럭 시켰다가 다시 해제할 수 있으므로 UI구성시에 도움이 될듯 하다.

※IE7에서 동작하지 않는 케이스가 있어 http://www.quirksmode.org/dom/events/scroll.html 참고하여  이벤트 핸들링 을  window에서 document로 변경하였습니다.

 웹페이지 작성시 체크박스[input type=checkbox]로 표현된 요소로 라디오[input type=radio]처럼 단일 선택만 허용 시켜야 하는 경우가 있다. 이 경우 간단하게 생각할 수 있는 ui구성은 2가지 정도가 있을 것같다. 라디오와 동일하게 선택시 기 선택된 요소의 체크를 해제하는 방법과 특정 요소를 선택한 상태에서 다른 요소를 선택 했을 시 알럿과 같은 경고를 보여주고 선택이 안되도록 하는 방법이 있을 것 같습니다.

 각 ui별로 장단점이 있을 것 같습니다. radio처럼 동작 시켰을 경우는 별다른 메시지가 없으므로 입력 자체는 편리하게 사용 됩니다만 사용자가 경험에 의해서 복수 선택이 가능하다고 생각할 수 있습니다. 이경우 의식 없이 복수개 선택후 한개만 선택되었다고 오인해 버릴 가능성이 있습니다. 반면 경고를 보여주는 방식을 선택했을 경우에는 유저가 명확하게 인지한 상태에서 입력을 시킬 수 있는 반면 경고 메시지를 보고 닫고 하는 것들이 단일 선택이라는 것을 인지하고 있는 유저에 있어서는 기 체크된 사항을 해제하고 입력해야 하므로 불편함을 느낄 수 있습니다. 입력 받을 항목의 중요도에 따라서 판단해서 선택하는 것이 좋을 것으로 생각합니다. 그럼 jquery를 이용하여 간단하게 구현된 소스를 보도록 할까요?

라디오 요소처럼 동작 소스

동작 데모

복수 선택시 경고

동작 데모

※위의 소스 코드는 jquery 1.7.2에서 작성되고 테스트 되었습니다.

웹 프로그래밍을 진행하다 보면 DOM의 요소를 이동해야 하는 경우가 생긴다.

    
Element 1
    
Element 2
    
Element 3
    
Element 3
    
Element 4

 예를 들어 위와 같이 작성된 요소중 id가element3인 요소의 위치를 위아래로 이동하고 싶은 경우 단순히 pure JavaScript를 이용하는 경우 복잡한 코드 작성으로 인한 가독성 저하 및 유지보수에도 문제가 생기된다. 이럴 경우 jQuery와 같은 라이브러리를 이용 구현을 간단하게 할수 있다.

 아래의 스크립트를 참조해 응용한다면 다양한 경우에 적용할 수 있을 것으로 생각된다.

function moveup() {
    $('#element3').after($('#element3').prev());
}
function movedown() {
    $('#element3').before($('#element3').next());
}

 각각의 펑션은 지정된 id의 요소를 위와 아래로 이동시키도록 되어있다.

위의 jQuery의 펑션을 간단히 소개해 보도록 하겠습니다.

선택된 요소의 직전에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

선택된 요소의 직후에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

직전 요소를 가져온다. 셀렉터 파라메터에의해 필터링도 가능하다.(sibling 노드)

직후 요소를 가져온다. 셀렉터 파라메터에의한 필터링도 가능하다.(sibling 노드)

※API참조 : http://api.jquery.com