from Busy.js: Loading indicators with Canvas on Ajaxian
나날이 Canvas에 대한 예제들이 늘어갑니다. 아마도 MS가 Canvas 진영에 참가하는 일이 생긴다면, 엄청나게 불붙을 것 같다고 추측해봅니다. VML을 조금만 다듬으면 금새 Canvas 가 될 것 같은데 말입니다.
_______________
Christian Effenberger 씨가 조금 더 캔버스다운 물건을 들고 돌아왔습니다. Busy.js를 릴리스했지요. Build.js는웹페이지의 HTML 엘리먼트에 로딩 이미지를 추가/제거할 수 있는 라이브러리입니다(오버레이 색상 & 투명효과 포함). 여러분의 코드를 깔끔하게 유지하기 위해 겸손한 JavaScript를 사용했습니다. 플러그인이나 확장기능도 필요없고 다른 외부 리소스도 필요없습니다.
사용법
나날이 Canvas에 대한 예제들이 늘어갑니다. 아마도 MS가 Canvas 진영에 참가하는 일이 생긴다면, 엄청나게 불붙을 것 같다고 추측해봅니다. VML을 조금만 다듬으면 금새 Canvas 가 될 것 같은데 말입니다.
_______________
Christian Effenberger 씨가 조금 더 캔버스다운 물건을 들고 돌아왔습니다. Busy.js를 릴리스했지요. Build.js는웹페이지의 HTML 엘리먼트에 로딩 이미지를 추가/제거할 수 있는 라이브러리입니다(오버레이 색상 & 투명효과 포함). 여러분의 코드를 깔끔하게 유지하기 위해 겸손한 JavaScript를 사용했습니다. 플러그인이나 확장기능도 필요없고 다른 외부 리소스도 필요없습니다.
사용법
[code:js]
var ctrl = getBusyOverlay(document.getElementById('box'));
ctrl.remove();
var ctrl = getBusyOverlay(document.getElementById('box'));
ctrl.remove();
기능
- Canvas와 VML 지원 (동일하게 보임)
- 쉽고 빠른 구현 (Ajax 프로그램에 완전 적합)
- gif 애니메이션 제작을 위한 이미지 에디터 사용에 시간을 들일 필요가 없음
- 개별 스타일을 위한 다양한 파라미터로 매우 유연함
- 부모 엘리먼트 스타일에 관계없이 적절한 로딩 이미지 제공
- 다음 블럭 레벨 부모 엘리먼트를 찾기 위해 DOM 트리 상위로 이동
- 부모 객체를 시각적(오버레이), 기술적(마우스 이벤트)으로 정지
- 심지어 (moz/webkit)-border-radius이 활성화되어있는 HTML 엘리먼트와도 동작
- 구식 브라우저에서는, 단순한 사각형 모양 표시
- HTML 엘리먼트에 로딩 이미지를 추가하거나 삭제하는게 죽여주게 쉬움
'[IT] Web Tech' 카테고리의 다른 글
| Mad Mimi: WYSIWYG Email 마케팅 (0) | 2008.04.18 |
|---|---|
| 세가지 유용한 JavaScript 라이브러리 (0) | 2008.04.18 |
| W3C XMLHttpRequest 최종 초안 (0) | 2008.04.17 |
| DOH, 내 코드를 테스트해줘! (0) | 2008.04.17 |
| Busy.js: Canvas로 읽는 로딩 이미지 (0) | 2008.04.17 |
| JavaScript : The Good Parts (0) | 2008.04.17 |
| Dojo XHR 플러그인; 오늘은 XHR을 어떻게 할까요? (0) | 2008.04.17 |
| Ajax 모자이크 이미지 생성기 (0) | 2008.04.16 |
| jQuery와 Prototype 벤치마크 (0) | 2008.04.16 |