소 예 공 방

머리와 몸체로 구성되는 프리뷰 상자 만들기 - 2/3

길위의행복 2010. 1. 16. 17:36

제목: 머리와 몸체로 구성되는 프리뷰 상자 만들기 (2/3)


2010.01.16 자바


1. 들어가는 말


앞서 시나리오에서 설명한 바대로 동작하는 프리뷰 상자를 테스트하기 위하여 간단한 페이지를 작성합니다.


2. 프리뷰 상자를 테스트하기 위한 페이지 만들기


2.1 스타일쉬트 및 자바스크립트 파일 포함하기


프리뷰 박스를 위한 스타일쉬트와 자바스크립트를 별도의 파일로 작성하였으며, 각각의 파일 이름은 preview_box.css와 preview_box.js입니다. 이 두 파일을 테스트 페이지의 헤드 영역에 아래와 같이 선언하여 테스트 페이지에서 사용할 수 있도록 합니다.


    <link rel="stylesheet" type="text/css" href="css/preview_box.css"/>
    <link rel="stylesheet" type="text/css" href="css/test_preview_box.css"/>
   
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/preview_box.js"></script>
    <script type="text/javascript" src="js/test_preview_box.js"></script>


2.2 문서의 뼈대 만들기


시간테이블을 그려서 붙일 영역(timeTableDiv)과 프리뷰 상자를 클릭했을 때 해당 항목의 세부 사항을 표시할 영역(timeDetailDiv)을 아래와 같이 작성합니다. 그리고 프리뷰 상자를 표시할 영역(previewBoxDiv)도 작성합니다. 프리뷰 상자를 표시하는 영역의 위치는 마우스의 움직임에 따라 결정될 것입니다.


    <div id="timeTableDiv" class="cTimeTableDiv"></div>
    <div id="timeDetailDiv" class="cTimeDetailDiv"></div>
   
    <!-- Overlay divisions -->
    <div id="previewBoxDiv"></div>


2.3 문서가 로드되면 테이블 만들기


테스트 페이지의 헤드에 아래와 같은 자바스크립트를 정의합니다. 브라우져가 페이지를 로드하면 $(document).ready()에 의해 정의된 함수가 자동으로 실행될 것입니다. 아래의 drawTimeTable()함수는 timeTableDiv 영역에 시간테이블을 동적으로 그려서 붙일 것입니다.


    <script type="text/javascript">
        $(document).ready(function() {
            drawTimeTable('timeTableDiv');
        });
    </script>


3. 프리뷰 상자를 띄우기 위한 마우스 이벤트 다루기


drawTimeTable() 함수 내에서 시간테이블을 그릴 때 각각의 셀 위에 마우스를 올리면 onMouseOverTimeCell() 함수를 호출하도록 지정합니다.


    var cellAction = 'onmouseover=onMouseOverTimeCell('+slotId+', \''+cellId+'\')"';


onMouseOverTimeCell() 함수 내에서는 현재 마우스가 위치한 셀의 위치와 크기 정보, 프리뷰 상자의 헤드와 몸체에 표시할 문자열, 그리고 프리뷰 상자를 클릭하면 호출할 함수에 대한 정보를 인자로 하여 showPreviewBox() 함수를 호출합니다.


    function onMouseOverTimeCell(timeSlotId, cellId) {
        var cellRect = new Rect(0, 0, 0, 0);
        cellRect.left   = $('#'+cellId).offset().left;
        cellRect.top    = $('#'+cellId).offset().top;
        cellRect.width  = $('#'+cellId).width();
        cellRect.height = $('#'+cellId).height();
   
        var clickAction = 'onClickPreviewBox('+timeSlotId+')';
   
        var headStr = 'ID:'+timeSlotId;
        var bodyStr = 'CELL:'+cellId;
   
        showPreviewBox('previewBoxDiv', 'previewBox', cellRect, clickAction, headStr, bodyStr);
    }


showPreviewBox() 함수는 인자로 전달된 정보들을 사용하여 프리뷰 박스를 그릴 것입니다. 첫번째 인자 'previewBoxDiv'는 프리뷰상자를 그리고 표시할 영역의 ID입니다. 그리고 두번째 인자 'previewBox"는 프리뷰 박스의 내부 구조라고 할 수 있는 머리와 몸체 부분의 ID를 정할 때 접두어로 사용할 것입니다.


4. 맺는 말


이번 글에서는 프리뷰 박스를 그리는 함수를 사용하는 방법에 대해서 소개하였습니다. 이어지는 글에서는 프리뷰 상자를 어떻게 구현하고 있는지 자세히 살펴 보고자 합니다.


(끝)