'UI'에 해당되는 글 2건

  1. 2007.06.06 UI 자바스크립트 라이브러리 Ext JS (yui-ext)
  2. 2007.04.11 자바스크립트 이미지 크로퍼
2007.06.06 02:04

UI 자바스크립트 라이브러리 Ext JS (yui-ext)

Jack Slocum란 분이 야후의 yui((Yahoo! UI library)를 확장하여 만든 자바스크립트 라이브러리인데 자주 사용되는 기능들 거의 다 있고 아주 막강합니다. 1.0부터는 이름을 Ext JS로 바꾸고 yui에 의존하지 않고 개발을 진행할 예정인것 같습니다.

단, 아직 개발중이라 변경이 많아서 실무에 적용하기 좀 어려운것 같습니다. 그러나 자바스크립트로 웹UI개발을 하는 개발자분이시면 예제만 보셔도 개발에 많은 도움이 될것 같아서 이렇게 올립니다.

개발자 블로그: http://www.jackslocum.com/

문서와 예제: http://www.yui-ext.com/deploy/yui-ext/docs/

공식 사이트: http://www.extjs.com/ (첫페지만 달랑, 현재 공사중인것 같습니다.^^)

1.0 Alpha 3 - Rev 2 다운로드: http://www.yui-ext.com/deploy/ext-1.0-alpha3.zip

1.0 Alpha 3 - Rev 2 문서: http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
Trackback 1 Comment 0
2007.04.11 08:38

자바스크립트 이미지 크로퍼

Dave Spurr씨는 Prototype.jsScriptaculous기반의 자바스크립트 이미지 크로퍼 UI(유저 인터페이스) 라이브러리를 만들었습니다. 이미지의 특정한 영역을 드래그하여 선택된 영역의 크기와 좌표 값를 반환해 줍니다. 영역을 선택하는데 필요한 모든 UI(잡아끌기, 8방향 늘리고 줄이기)를 제공하며, 최소크기, 비율고정 등의 규칙을 부여하고, 미리보기(Preview) 창을 열수도 있습니다. 데모 페이지에서 직접 사용해 보세요.


ImageMagick 또는 GD library와 연동하여 프로파일 이미지 크롭, 블로그 포토 크롭 등을 Ajax로 구현할 수 있겠습니다. 참고로 , 이 라이브러리는 올라로그의 프로파일 이미지 크롭에 실제로 사용되고 있는 라이브러리이기도 합니다.

예제 :
    function onEndCrop( coords, dimensions ) {
      $( 'x1' ).value = coords.x1;
      $( 'y1' ).value = coords.y1;
      $( 'x2' ).value = coords.x2;
      $( 'y2' ).value = coords.y2;
      $( 'width' ).value = dimensions.width;
      $( 'height' ).value = dimensions.height;
   }

   new Cropper.Img('testImage', { onEndCrop: onEndCrop });
Trackback 0 Comment 0