JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP 질문&답변DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP기타 TIP
JSP 팁
JSP 팁
JSP 팁 게시판 입니다
글쓰기 후 사용할 protoload
고고싱
이미지 슬라이더 보기
<script type=text/javascript> // <script type=text/javascript> //
<script language=javascript type=text/javascript> //

사용자 삽입 이미지
Protoload
Andreas Kalsch가 만든 Prototype Framework를 기반으로 한 Ajax 로딩 인디케이터를 사용하게 해주는 라이브러리이다. Ajax 로딩 인디케이터란 Ajax 통신을 시작할 때 데이터가 로딩중임을 사용자에게 알려주는 역할을 하는 것으로 보통은 GIF이미지가 사용되고 어떤 인디케이터를 사용할 지는 만드는 사람 맘이긴 하지만 보통 우측의 이미지가 Ajax 로딩 인디케이터의 대표적이다.

Prototype Framework를 기반으로 하기 때문에 당연히 프로토타입을 인클루드 해주어야 한다.

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/protoload.js"></script>


Prototype Framework를 먼저 인클루드 하고 Protoload사이트에서 다운받은 protoload.js파일도 인클루드 하면 사용해 대한 준비는 완료된다. 버전이 0.1이기는 하지만 몇번 다뤄본 경험으로는 사용상에 큰 문제점은 없는 것 같다. 일단 인디케이터라는게 아주 복잡하진 않기 때문에...

Ajax로딩을 사용자에게 알려주는 것은 아주 중요한 일이지만 따로 구현할려면 꽤나 난감하게 생각되는데(따로 구현해 본적은 없다.) protoload는 아주 쉽게 로딩 인디케이터를 사용할 수 있게 해준다.

여기서 제공하는 것은 아주 간단하면서도 편리한데 원하는 엘리먼트에 인디케이터를 표시할 수 있는 점이 아주 좋다. 예를 들어 "ajaxWait"라는 id를 가진 엘리먼트에 인디케이터를 표시하고자 한다면

$("ajaxWait").startWaiting('bigWaiting');
$("ajaxWait").stopWaiting();


위와같이 써주면 된다. 인디케이터를 표시할 엘리먼트는 어떤 것이든지 상관없다. div도 되고 button, select, input등 원하는대로 표시할 수 있고 전체 페이지에 표시하려면 엘리먼트의 id대신에 document.body를 넘겨주면 된다. 파라미터르 넘겨준 bigWaiting는 protoload에서 제공한 css에 들어있는 클래스 이름이다. 즉 지정한 CSS 클래스를 사용하겠다는 의미이고 css에 정의되어 있다면 다른 클래스 이름을 선택해도 무방하다. 페이지에 맞게 스타일을 정한다음 지정만 해주면 된다.

prototype.js의 Ajax를 사용할 때는 startWaiting은 onLoading에서 stopWaiting은 onComplete에서 지정해 주면 된다.(구동되는 것은 protoload 사이트 에 나와있으니 사이트를 참고하기 바란다.)

protoload.js 사용하기 (Language : javascript)
  1. new Ajax.Request("ajax.jsp",
  2.     {
  3.         method:'get',
  4.         parameters : { par:Code },
  5.         onLoading  : function() {
  6.             $("ajaxWait").startWaiting('bigWaiting');
  7.         },
  8.         onSuccess  : function(returnValue)
  9.         {
  10.             var returnValue = returnValue.responseText;
  11.         },
  12.         onFailure  : function() {
  13.         },
  14.         onComplete : function() {
  15.             $("ajaxWait").stopWaiting();
  16.         }
  17.     });


일반적인 사이트에서는 사용상에 문제가 없지만 탭을 쓴다던지 자바스크립트를 이용해서 DOM구성을 만져놓은 곳에서는 원하는 위치에 Ajax 로딩 인디케이터가 나오지 않는 경우가 있다. 이럴때는 10년차초보개발자님이 패치한 내용 을 참고해서 protoload를 사용하면 아주 잘 돌아간다.(10년차초보개발자님 감사~~)




참고로 Ajaxload사이트 를 이용하면 다양한 Ajax 로딩 인디케이터를 원하는 모양과 색으로 쉽게 제작할 수 있다. 페이지에 어울리는 인디케이터를 가져다가 쓰면 될 듯 싶다.

 

출처: http://blog.outsider.ne.kr/trackback/133

 

사이트 돌아다니다가 괜찮은게 있어서 올립니다 ..

2008-05-13 09:51:56
211.63.57.***

좋은하루되세요 ..

0점 (0명)
덧글 1개 | 태그 1개 | 관련글보기
태그입력
쉽표(,)구분으로 한번에 여러 태그를 입력할수 있습니다
span (1)
GoodBug
(0) (0)

좋은정보 감사합니다 ^^

 

211.189.124.*** 2008-05-13 09:51:56
이름 비밀번호
JSP 팁
JSP 팁 게시판 입니다
! 번호 제목 글쓴이 일자 조회
114 STS Spring MVC on STS 2.8, 2.9 버전에서 프로젝트 생성시 에러발생 할 경우 1 GoodBug 2012-03-08 8,041
113 dbcp DBCP 사용시 DB정보 암호화 1 GoodBug 2012-02-08 5,555
112 스트럿츠 action alert 메시지 출력 후 페이지 이동 & 뒤로가기 예방 행복한광대 2009-01-14 11,605
111 spring spring 자동묶기 1 kaiser 2007-03-12 11,816
110 spring Spring 빈묶기- 생성자를 통한 의존성 주입 2 1 kaiser 2007-02-21 21,576
109 spring Spring 빈묶기-세터메소드를 통한 의존성 주입 1 kaiser 2007-02-21 11,879
108 spring Spring - xml로 묶기 1 kaiser 2007-02-07 12,367
107 spring Spring 빈묶기-기본묶기 1 kaiser 2007-02-05 8,784
106 spring spring 빈묶기-2 1 kaiser 2007-01-29 9,645
105 spring Spring 빈묶기-1 1 kaiser 2007-01-29 9,718
104 spring Spring 1차 요약 1 kaiser 2007-01-23 10,788
103 spring spring 시작하기-2 1 1 kaiser 2007-01-22 9,942
102 spring Spring 시작하기-1 4 1 kaiser 2007-01-22 11,649
101 spring Spring 서론 - spring 설치 1 1 kaiser 2007-01-19 13,326
100 clob 사용하기 kaiser 2008-08-21 7,645
span 글쓰기 후 사용할 protoload 1 1 고고싱 2008-05-09 7,138
98 log4sql log4sql 1 1 Aki 2008-04-30 8,371
97 숫자 세자리마다 콤마 찍기 1 곱슬대마왕 2008-03-21 8,475
96 iBatis iBatis 에서 SQL 로깅시 이뿌게 보이기 6 1 GoodBug 2007-10-26 22,577
95 log4sql요즘 많이 쓰는것 같던데.... 영이남푠 2008-10-17 8,095
copyright 2005-2018 by Unicorn