jQuery 기반 Library 들 소개
자바스크립트/jQuery 2009. 10. 19. 11:14jQuery 기반 UI Library
이 Library가 기대가 많이 됩니다. Wiki 쪽에 보면 여러 Widget들이 개발중인 걸 보실 수 있습니다.
jQuery Grid는 말 그대로 Grid 기능입니다. Grid가 가져야할 기본 기능 외에도 Tree Grid 기능도 있고, Subgrid 기능도 갖추고 있습니다. Tree Grid 는 한 칼럼만 사용하면 그냥 간단한 Tree 처럼 사용할 수도 있습니다.
이 Grid는 여기서 소개하기에는 너무 많은 기능을 자랑합니다. Grid 자체에서 새 항목을 등록하거나 수정하는 기능을 칼럼에 대한 설정만으로도 가능하게 되어 있습니다. 데모나 문서를 참조해서 보세요.
jQuery Tools는 jQuery UI에서 지원해 주지 못하는 있었으면 하는 Widget들을 지원해 줍니다. Tab은 UI 쪽에 있긴 하지만요.
이건 백문이 불여일견입니다. 한 번 데모(http://flowplayer.org/tools/demos/index.html)를 보세요.
jQuery Form은 Form 값을 Ajax로 처리하는 걸 간편하게 해 주는 Library입니다. 처리의 간편함을 위해 사용했습니다. 아쉬운 건 JavaScript Object의 값을 Form의 각 요소에 세팅해 주는 게 있었으면 했는데 없어서 직접 구현했네요.
jquery keyfilter는 Input 필드나 TextArea에서 Key 입력을 제한해 주는 Library입니다. 보통 keydown 이벤트에 keyCode 값을 읽어 true / false를 돌려 주는 식으로 구현을 많이 하는데 역시 이걸 사용하면 간편해집니다.
jquery numberformatter 는 숫자 포매팅해 주는 Library 입니다. Locale 을 적용해서 포매팅 해 주는 게 특징이구요. 패턴을 직접 지정해 줄 수도 있습니다.
UI.Layout 은 BorderLayout을 구현한 건데요. Java에서 AWT, Swing 프로그램이나 델파이 같은 RAD 툴을 써 보신 분은 아실 겁니다. 화면의 영역은 east, west, south, north, center 5가지 영역으로 나누어 놓고, 전체 화면의 크기가 변경될 때 east, west는 지정한 폭을, south, north 는 지정한 높이를 유지시켜 주는 역할을 합니다. 물론 그렇기 때문에 center 영역은 나머지 4개 영역을 제외한 영역으로 꽉 차게 유지가 되는 거죠.
여기에 동서남북 4개 영역과 center 사이의 경계를 드래그로 조절하게 한다든지 4개 영역을 닫았다 열었다 한다든지 하는 기능들이 들어 있습니다. 웹 프로그램이 Thin Client 역할로 사용되면서 이런 기능들이 요구되고 있는 상황인 거죠.
이 Layout 이 아쉬운 부분이 jQuery Grid와 연동이 자동으로 안 되고 onresize 이벤트 핸들러를 만들어 처리해 주어야 하는 점이었습니다. 하지만 복합한 코딩을 요구하는 건 아니니까요. 간단히 작성하실 수 있을 겁니다.
그리고 마지막 뽀너스입니다. ^^
이번 프로젝트에서 써 보지는 않았는데요. 설마 이런 게 JavaScript로 가능하리라고는 생각지 않아서 검색조차 안 해 봤는데 있더라구요. MaskEdit 가 있었습니다.
- jQuery Core v1.3.2 : http://www.jquery.com/
- jQuery UI v1.7.2 : http://ui.jquery.com/
- jQuery Grid v3.5 : http://www.trirand.com/blog/
- jQuery Tools v1.0.2 : http://flowplayer.org/tools/index.html
- jQuery Form v2.28 : http://malsup.com/jquery/form/
- jquery keyfilter v1.7: http://code.google.com/p/jquery-keyfilter/
- jquery numberformatter v1.2 : http://code.google.com/p/jquery-numberformatter/
- UI.Layout v1.2.0 : http://layout.jquery-dev.net/
jQuery UI는 jQuery 에서 공식적으로 진행하고 있는 UI Library입니다. 현재는 기반이 되는 기능과 특수효과, 그리고, 가장 많이 사용할 것으로 여겨지는 Widget 들을 제공하고 있습니다.
이 Library가 기대가 많이 됩니다. Wiki 쪽에 보면 여러 Widget들이 개발중인 걸 보실 수 있습니다.
jQuery Grid는 말 그대로 Grid 기능입니다. Grid가 가져야할 기본 기능 외에도 Tree Grid 기능도 있고, Subgrid 기능도 갖추고 있습니다. Tree Grid 는 한 칼럼만 사용하면 그냥 간단한 Tree 처럼 사용할 수도 있습니다.
이 Grid는 여기서 소개하기에는 너무 많은 기능을 자랑합니다. Grid 자체에서 새 항목을 등록하거나 수정하는 기능을 칼럼에 대한 설정만으로도 가능하게 되어 있습니다. 데모나 문서를 참조해서 보세요.
jQuery Tools는 jQuery UI에서 지원해 주지 못하는 있었으면 하는 Widget들을 지원해 줍니다. Tab은 UI 쪽에 있긴 하지만요.
이건 백문이 불여일견입니다. 한 번 데모(http://flowplayer.org/tools/demos/index.html)를 보세요.
jQuery Form은 Form 값을 Ajax로 처리하는 걸 간편하게 해 주는 Library입니다. 처리의 간편함을 위해 사용했습니다. 아쉬운 건 JavaScript Object의 값을 Form의 각 요소에 세팅해 주는 게 있었으면 했는데 없어서 직접 구현했네요.
jquery keyfilter는 Input 필드나 TextArea에서 Key 입력을 제한해 주는 Library입니다. 보통 keydown 이벤트에 keyCode 값을 읽어 true / false를 돌려 주는 식으로 구현을 많이 하는데 역시 이걸 사용하면 간편해집니다.
jquery numberformatter 는 숫자 포매팅해 주는 Library 입니다. Locale 을 적용해서 포매팅 해 주는 게 특징이구요. 패턴을 직접 지정해 줄 수도 있습니다.
UI.Layout 은 BorderLayout을 구현한 건데요. Java에서 AWT, Swing 프로그램이나 델파이 같은 RAD 툴을 써 보신 분은 아실 겁니다. 화면의 영역은 east, west, south, north, center 5가지 영역으로 나누어 놓고, 전체 화면의 크기가 변경될 때 east, west는 지정한 폭을, south, north 는 지정한 높이를 유지시켜 주는 역할을 합니다. 물론 그렇기 때문에 center 영역은 나머지 4개 영역을 제외한 영역으로 꽉 차게 유지가 되는 거죠.
여기에 동서남북 4개 영역과 center 사이의 경계를 드래그로 조절하게 한다든지 4개 영역을 닫았다 열었다 한다든지 하는 기능들이 들어 있습니다. 웹 프로그램이 Thin Client 역할로 사용되면서 이런 기능들이 요구되고 있는 상황인 거죠.
이 Layout 이 아쉬운 부분이 jQuery Grid와 연동이 자동으로 안 되고 onresize 이벤트 핸들러를 만들어 처리해 주어야 하는 점이었습니다. 하지만 복합한 코딩을 요구하는 건 아니니까요. 간단히 작성하실 수 있을 겁니다.
그리고 마지막 뽀너스입니다. ^^
이번 프로젝트에서 써 보지는 않았는데요. 설마 이런 게 JavaScript로 가능하리라고는 생각지 않아서 검색조차 안 해 봤는데 있더라구요. MaskEdit 가 있었습니다.
- Masked Input v1.2.2 : http://digitalbush.com/projects/masked-input-plugin/