prototype.js 기반의 Context menu

Context menu

Context menu란, 마우스 우클릭 등의 특정 동작을 행하였을 때 등장하는 GUI(Graphical User Interface) 메뉴를 일컫습니다,[주:다른 명칭으로는 단축(Shortcut) 메뉴, 팝업(Popup) 메뉴가 있습니다.]

여기서 소개해드릴 것은 수많은 Context menu 스크립트 중 하나로, 현재 제 블로그에 적용시켜 둔 prototype.js 기반의 Context menu입니다.

prototype.js 기반의 Context menu

먼저 이 Context menu의 기반이 되는 prototype.js 는 Prototype에서 개발한 다이나믹 웹 어플리케이션 지향의자바스크립트 프레임워크인데요, 이를 기반으로 외국의 kangax라는 분께서 Context menu 스크립트를 제작하셨습니다.

이 스크립트는 MIT 라이선스[주:수정 및 배포에 제한이 없으며, 업무용으로도 사용 가능합니다. 한마디로 Freeware와 비슷하다고 생각하시면 됩니다. 단, 여기서 발생되는 모든 일에 대해 법적인 책임은 따르지 않습니다.]를 따르고 있으며, 현재 0.6 까지 판올림이 되어 있습니다.

만약 이 스크립트가 어떤 것인지 바로 확인해 보시려면 제 블로그의 아무 곳에서 마우스 우측 버튼을 클릭해 보시기 바랍니다.(단, Opera 에서는 Ctrl + 좌측 버튼 클릭을 해 주셔야 합니다.)

제가 개인적으로 작동의 유무를 테스트 해본 결과, IE 8에서는 호환성 모드를 작동시켜야 제 기능을 발하는 것으로 확인되었으며, 그 외의 IE 6 및 7, Chrome 3, Firefox 3.5, Opera 10, Safari 4 의 주요 브라우저에서 아무런 문제 없이 작동하는 것을 확인하였습니다.

스크립트의 특징

이 스크립트의 특징은 다음과 같습니다.

• 스크립트의 용량이 3Kb 대로 가볍습니다.
• 다양한 브라우저의 크로스 브라우징을 지원합니다.
• 스타일 시트를 이용하여 간단하게 메뉴의 모양에 변화를 줄 수 있습니다.
• 페이지 로딩시에 메뉴의 구성이 완료되어있기 때문에 사용시 로딩이 빠릅니다.

보다 자세한 내용은 이곳을 참조해 주시기 바랍니다.

* 이 스크립트의 작동에는 prototype.js가 반드시 필요합니다.

적용방법

적용하기에 앞서...

• prototype.js 를 http://www.prototypejs.org/download 에서 받으시기 바랍니다.
• proto.menu.0.6.js, proto.menu.0.6.css를 http://yura.thinkweb2.com/.../contextMenu/ 에서 받으시기 바랍니다.

파일의 링크를 걸어두기는 하였습니다만, 부디 사이트를 직접 방문하셔서 최신 버전을 확인하시기 바랍니다.

세개의 파일을 모두 받으셨다면 계정에 업로드 하신 후, 경로에 맞추어 다음의 코드를 수정하여 </head>보다 위쪽에 넣도록 합니다.

<!-- 스크립트 실행에 반드시 필요한 부분 -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="proto.menu.0.6.js"></script>

<!-- Context menu의 디자인을 구성하는 스타일 시트 파일 -->
<link rel="stylesheet" href="proto.menu.0.6.css" type="text/css" media="screen">

<script language="javascript" type="text/javascript">
<!--
// Context menu의 Item을 구성하는 부분
document.observe('dom:loaded', function(){
    var myMenuItems = [
    { // 첫번째
        name: '뒤로',
        className: 'back',
        callback: function() {
            history.back();
        }
    },{ // 두번째
        name: '첫페이지',
        className: 'home',
        callback: function() {
            location.href='http://blog.shar.kr/';
        }
    },{ // 세번째
        name: '새로고침',
        className: 'refresh',
        callback: function() {
            location.reload(true);
        }
    },{ // 네번째
        name: '앞으로',
        className: 'forward',
        callback: function() {
            history.forward();
        }
    },{ // 다섯째
        separator: true // 구분선입니다.
    }
    ]

// Context menu 객체를 생성
    new Proto.Menu({
        // Context menu가 출력될 div의 id, 반드시 id 앞에 #을 붙여야 합니다.
        selector: '#menu',
        // Context menu의 디자인입니다. 스타일 시트로 꾸밀 시 .menu.ff 식으로 접근하시면 됩니다.
        className: 'menu ff',
        menuItems: myMenuItems // 위에서 구성해 둔 Item을 추가합니다.
    })
})
//-->
</script>

Menu Item을 추가하실 경우에는 위의 예시를 참고하셔서 추가하시거나 이미 추가되어 있는 것들을 복사 + 붙여넣기 하셔서 수정하시면 편리합니다.

다만 className의 경우 스타일 시트에서 a.(각 Item의 className) 로 접근하여 스타일을 적용시킬 수도 있습니다.

* 스타일 시트의 경우 위의 사이트에서 제공하는 것을 바탕으로 원하시는대로 수정하시면 됩니다.

예제 다운로드

예제의 다운로드는 다음 링크를 이용해 주시기 부탁드립니다.

contextmenu.zip

마치며

prototype.js 는 이 메뉴 외에도 다양한 스크립트를 제공합니다.
물론 이 메뉴만을 적용하기에는 다소 큰 용량이긴 합니다만, packer와 같은 것으로 스크립트를 압축하여 적용시켜두면 여러가지를 같이 사용할 수 있으므로 다양한 효과를 원하시는 분께서는 적용시켜두시면 유용하리라 생각합니다.