태그 : PrototypeWindow

2007/10/02   Ajax. 내부 윈도우 라이브러러리 Prototype Window
PrototypeWindow 태그와 관련된 다른 이글루의 글 보기

 

2007년 10월 02일

Ajax. 내부 윈도우 라이브러러리 Prototype Window

Prototype Window는 prototype과 부가적으로 script.aculo.us의 effects.js를 이용하여 내부 창을 구현및 효과를 주는 라이브러리이다.
Prototype Window를 사용하기 위해서는 라이브러리 설치 후 다음과 같이 선언 하면 된다.

<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/window.js"> </script>

<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"/>
<!--  Add this to have a specific theme-->
<link href="themes/mac_os_x.css" rel="stylesheet" type="text/css"/> 

그냥 prototype을 불러들이고 window.js를 불러들인다.
부가적으로 윈도우 효과를 쓸것이면 effects.js와 window_effects.js를 불러들인다.

function ShowWindow(){
    var win = new Window({className: "dialog",  width:350, height:400, zIndex: 100, resizable: true, title: "Sample window", hideEffect: Effect.SwitchOff, draggable:true, wiredDrag: true})
    win.getContent().innerHTML= "<h1>Test Text</h1>";
    win.setStatusBar("Status bar info");
    win.showCenter();  
}

그리고 윈도우를 부르는 함수를 위와 같이 정의하면 된다. 위는 effect를 사용하므로 effect관련 js도 불러들여야 한다.
기존에 script.aculo.us를 사용중이였다면 Stack Overflow문제가 발생 할 수 있다.
이럴때는 effect.js를 직접 넣지 말고 script.aculo.us를 include 할때 다음과 같이 옵션을 주고 필요한것만 로드시키면 해결 된다.

<script src="scriptaculous.js?load=effects,dragdrop" type=...></script>

이 라이브러리는 기본적으로 InnerHTML 외에 다른 HTML을 include 가능하며 몇몇 효과나 CSS스킨 크기조절 최소화 등 다양한 기능을 지원한다. 멋지구리구리하다 -_-;
이것과 비슷한 성격의 라이브러리(내부에 컨덴츠를 띄우는 것)로는 Lightbox 라는 것이 있는데, 사이트에 방문하여 예제를 보면 아 이거! 라고 할만큼 유명한 라이브러리이다.

여담이지만 최근에는 Prototype보다 jQuery가 상승곡선이 가파른 것 같고, 서핑을 하며 보는것들 중에서도 jQuery를 이용한 플러그인들이 더 구미가 당기는것들도 많고 해서 마음이 흔들리고 있다. =_=


, 

by 엘로이드 | 2007/10/02 22:37 | 웹/IT/얼리어답터 관련 이야기 | 트랙백

 

◀ 이전 페이지다음 페이지 ▶