gesipan
현강재

작성자
작성일 2008-09-16 (화) 15:18
ㆍ조회: 352  
IP: 118.xxx.118
iwindow
 
iwindow(인라인 아이템 창) 추가 , 수정


   iwindow(인라인 아이템 창) 란 ?
        우측 그림과 같은 형태의 응용 레이어 창을 의미한다.
        이것이 필요한 이유는 극소 부분의 내용 변화를 위해
        홈페이지 전체를 리로딩 하는 불편한 구조를 피하기 위한 것이다.
        이를 이용하면 현재 페이지의 출력을 그대로 유지한 상태에서
        필요한 내용만을 상위에 표출 시킴으로서 컨텐츠의 일체감 유지와
        페이지 구성상의 공간 활용도를 높이는 동시만족을 얻을 수 있다.
        또한 독특한 형태의 디자인을 개발하여 홈페이지 개성을 높일 수 있다.
        기본스킨에는 30개 이상의 iwindow 아이템이 포함되어 있고,
        개수 제한 없이 새로 추가할 수 있다.
        여러 iwindow 는 각각의 php 파일에 의해 실행되는 구조이므로
        단순 내용출력 이상의 특별한 기능을 프로그램 하는 것이 가능하다.

   기본 내장된 iwindow 는 ?
     보드 - 글목록
          회원로그인폼, 현재접속자, 정렬, 카테고리, 통계, 포인트안내, 확장검색 등...
     보드 - 본문
          작성자정보, 글수정/삭제, 추천, 댓글입력폼, 쪽글입력폼 등...
     보드 - 글쓰기
           투표설정(관리자전용), 도움말, 미리보기, sms설정, 비공개 예외설정 등...

   iwindow 실행구조
       자바스크립트 함수 iwindow_OPEN('실행파일명','창이름','쿼리옵션','출력옵션') 로 실행된다.   즉,
       <a  onclick="iwindow_OPEN('kakaka','aaa','var1=3&var2=abcd','width=100,height=250,left=0,top=0,btn_help=n,btn_grow=n,btn_close=y,autoclose=y,titlebar=y,new_iwin=y,css_style=')">클릭해요</a>
       와 같은 태그로 작성할 수 있으며 '창이름','쿼리옵션','출력옵션' 부분은 생략하거나 추가할 수 있다.

            위와 같은 링크를 클릭했을때의 동작 과정은 다음과 같다.
             1, 가로100, 세로250 사이즈의 iwindow 창 aaa 가 생성된다.
             2, 활성화된 iwindow 창 aaa 안에서 ./skin_board/스킨명/iwindow/kakaka.php 가 실행된다.
             3, ...../kakaka.php 에는 변수 $var1=3; $var1='abcd'; 가 전달된다.

         ▨ [실행파일명] 에 들어갈 수 있는 형식(필수지정).
              ㆍ위의 예 처럼 php 파일명(확장자를 제외한)을 넣으면 ./skin_board/스킨명/iwindow/파일명.php 가 실행된다.
              ㆍ또한 출력코자 하는 외부 페이지의 url 주소(http://...)를 직접 넣으면 해당 페이지가 출력된다.

         ▨ [창이름] 에 들어갈 수 있는 형식(옵션지정).
              ㆍ영문이나 숫자을 사용해 공백이 포함되지 않게 단어를 작성해 넣으면 된다.
              ㆍ창 이름을 지정하지 않은 경우 창틀이 공유되어 'a' 창이 활성화 되어 있는 상태에서 'b' 창을 열면 'a' 창은 사라지게 된다.
              ㆍ창 이름을 지정하면 같은 이름의 창 끼리만 창틀을 공유하고 다른 이름의 창은 별도의 창으로 열린다.

         ▨ [쿼리옵션] 에 들어갈 수 있는 형식(옵션지정).
              ㆍ'실행파일명' 에 전달할 값을 'key1=value1&key2=value2&key3=value3...' 식으로 필요한 만큼 넣을 수 있다.

         ▨ [출력옵션] 에 들어갈 수 있는 형식(옵션지정). 미지정한 경우 기본값이 자동 적용된다.
              width  :  가로크기 - 픽셀수치로 지정 (기본값: 250)
              height  :  세로크기 - 픽셀수치로 지정 (기본값: 250)

              left  :  전체화면 기준 위치지정 - 전체화면 좌측과의 거리. 픽셀수치 혹은 % 비율로 지정 (기본값: 마우스 클릭한 위치+8)
              top  :  전체화면 기준 위치지정 - 전체화면 상단과의 거리. 픽셀수치 혹은 % 비율로 지정 (기본값: 마우스 클릭한 위치+8)

              move_left :  마우스 클릭지점 기준 위치지정 - 마우스클릭한 지점과의 가로거리. 픽셀수치 (기본값: 마우스 클릭한 위치+8)
              move_top :  마우스 클릭지점 기준 위치지정 - 마우스클릭한 지점과의 세로거리. 픽셀수치 (기본값: 마우스 클릭한 위치+8)

                             아래 설정옵션들은 y/n 대신 yes/no 또는 1/0 또는 true/false 형식으로 지정해도 된다.
              btn_help  :  iwindow 우측상단에 도움말 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:n)
              btn_grow  :  iwindow 우측상단에 창확대 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:n)
              btn_close  :  iwindow 우측상단에 창 닫기 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:y)
              autoclose  :  바탕화면 클릭시 iwindow 가 자동으로 닫히게 할 것인지를 y/n 로 지정(기본값:y)
              titlebar  :   iwindow 창 상단에 타이틀바를 보여지게 할 것인지를  y/n 로 지정(기본값:y)
              new_iwin  :  창이름과 상관없이 무조건 새창을 추가 생성-출력시킬 것인지를 y/n 로 지정(기본값:n)

              css_style  :  iwindow 에 스타일 시트를 지정할 수 있다.(지정예: css_style=zoom:150%; border:1px solid #ff0000; )
              function   :  스크립트 함수를 지정한다. '실행파일명' 으로 연결하지 않고, 대신 자체 내장된 자바스크립트 함수를 실행시킨다.
                                (지정예: function=iview_setimg  는 자체내장된 function iview_setimg(){ .... } 함수를 실행한다.
                                iwindow 에 출력될 내용도 지정한 함수내에서 처리해 줘야 한다. 기본 스킨에서는 '회원사진' 팝업출력 형식이
                                모두 이것으로 되어 있고 서버에 재접속 없이 바로 팝업으로 회원사진 출력 되도록 되어 있다)

   기본 내장된 iwindow 를 수정하려면 ?
        iwindow 창 틀:  ./skin_board/스킨명/iwindow/create_iwindow.js
        이미지:     ./skin_board/스킨명/iwindow/immg/*.gif
        출력내용:  ./skin_board/스킨명/iwindow/*.php

   새로운 iwindow 추가 하는 방법은 ?
      위 "iwindow 실행구조" 에서 설명한대로 태그를 작성해서 스킨소스에 넣어 주고
      실행될 파일은 ./skin_board/스킨명/iwindow/실행파일.php 로 넣어 주면 된다.
      기본적으로 들어 있는 iwondow 들도 모두 같은 구조이니 그것을 참고하면 추가작성이 한결 쉬울 것이다.

    무작정 따라해 보기
      기본적으로 들어 있는 ./skin_board/스킨명/iwindow/iwindow_exp1.php 를 iwindow 로 출력 하는 예이다.
       1, 종합관리 페이지에서 보드(게시판)를 생성한다.
       2, 생성된 보드의  [보드설정]→[4-19, 글목록 테이블 출력셀 구성] 에서 '확장셀18' 을 출력토록 '18' 을 추가 지정한다.
       3, 게시판에 임의로 글 몇개를 등록하고 글목록에서 '확장셀18' 에 해당되는 셀을 클릭하면 iwindow 가 출력된다.
       4, 글목록 출력 소스인 ./skin_board/스킨명/2_index.php 에서 function INDEX_cell_18() 함수를 찾아 링크태그를 확인한다.
       5, ./skin_board/스킨명/iwindow/iwindow_exp1.php 소스를 열고 iwindow 출력내용 구성을 확인한다.

   기 타
       'iwindow  닫기' 로 사용할 수 있는 스크립트 함수는?
       메인페이지에서는 <a  onclick="iwindow_CLOSE()">닫기</a>
       iwindow 창 내부에서는  <a  onclick="parent.iwindow_CLOSE()">닫기</a>





메시지(쪽지) 알림이 삽입
    새 쪽지 도착 즉시 이를 알리는 '알림이' 가 자동 출력되게 하려면
    유틸 파일중 util_iframe_msgcheck.php 를 활용하면 된다.
    쪽지 도착 즉시 벨소리와 함께 화면 우측하단에 '알림이' 박스가 솟아 오른다.

      1,  util_iframe_msgcheck.php 소스를 편집기로 열고 설정항목을 지정한다.
      2,  '알림이' 레이어가 출력되고자 하는 웹페이지의 html 소스에
           <iframe src="./util_iframe_msgcheck.php" style="display:none;"></iframe>

           위와 같이 태그를 넣으면 넣는다.
           위 태그에서 src=".."'  에는 util_iframe_msgcheck.php 파일에 대한 정확한 주소를 넣어 줘야 한다.

       ㆍ홈페이지 메인화면이나 게시판 스킨이나 ... 기타 어떠한 페이지(html, php, asp, cgi ...)에 넣어도 상관 없다.
       ㆍ한 페이지내에 중복 삽입되면 안된다.
       ㆍ테크노트와 전혀 회원로그인 연동되지 않은 일반 html 페이지에도 위 태그를 넣으면 적용 된다.
       ㆍ'알림이' 박스모양(위 그림)을 바꾸려면 ./img/member/balloon.gif 파일을 수정하면 된다.


 

   
  0
3500