from Busy.js: Loading indicators with Canvas on Ajaxian

사용자 삽입 이미지

나날이 Canvas에 대한 예제들이 늘어갑니다. 아마도 MS가 Canvas 진영에 참가하는 일이 생긴다면, 엄청나게 불붙을 것 같다고 추측해봅니다. VML을 조금만 다듬으면 금새 Canvas 가 될 것 같은데 말입니다.
_______________
Christian Effenberger 씨가 조금 더 캔버스다운 물건을 들고 돌아왔습니다. Busy.js를 릴리스했지요. Build.js는웹페이지의 HTML 엘리먼트에 로딩 이미지를 추가/제거할 수 있는 라이브러리입니다(오버레이 색상 & 투명효과 포함). 여러분의 코드를 깔끔하게 유지하기 위해 겸손한 JavaScript를 사용했습니다. 플러그인이나 확장기능도 필요없고 다른 외부 리소스도 필요없습니다.

사용법
[code:js]
var ctrl = getBusyOverlay(document.getElementById('box'));
ctrl.remove();

기능

  • Canvas와 VML 지원 (동일하게 보임)
  • 쉽고 빠른 구현 (Ajax 프로그램에 완전 적합)
  • gif 애니메이션 제작을 위한 이미지 에디터 사용에 시간을 들일 필요가 없음
  • 개별 스타일을 위한 다양한 파라미터로 매우 유연함
  • 부모 엘리먼트 스타일에 관계없이 적절한 로딩 이미지 제공
  • 다음 블럭 레벨 부모 엘리먼트를 찾기 위해 DOM 트리 상위로 이동
  • 부모 객체를 시각적(오버레이), 기술적(마우스 이벤트)으로 정지
  • 심지어 (moz/webkit)-border-radius이 활성화되어있는 HTML 엘리먼트와도 동작
  • 구식 브라우저에서는, 단순한 사각형 모양 표시
  • HTML 엘리먼트에 로딩 이미지를 추가하거나 삭제하는게 죽여주게 쉬움

Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요