오픈소스모음

업무 시스템이라고하면 그리드 테이블이 요구됩니다. 처음에는 HTML로 쉽게 만들지만, 곧 추가 기능이 요구됩니다. 정렬, 필터링, 머리글과 왼쪽 열을 고정 해 주었으면 한다고도 요청합니다. 그런 귀찮은 요구를 스크래치로 지원하는 것은 매우 시간이 소요됩니다. 그럴 때는 꼭 handsontable을 시도해 봅시다. handsontable 사용법 handsontable에 많은 기능을 제공합니다. 우선 페이지네이션 비밀번호를 숨길 수 있습니다. 새 행을 만들 때 placeholder를 표시합니다. 포커스가있는 셀을 강조. 셀을 세세하게 커스터마이즈. 이미지를 포함할 수 있습니다. 정렬도 물론 있습니다. 입력 검증도 가능합니다. 머리글과 왼쪽의 열을 고정. 아래 오른쪽 방향 카피가능. 셀 병합. handsont..

Web상에서 SVG가 많이 사용되기 시작했습니다. SVG의 장점 중 하나로 꼽히는 것이 벡터이므로 확대해도 깨끗한 것입니다. 확대 나 축소한다는 것은 정보의 입도를 스스로 변경하고 싶은 경우에 유용합니다. 그래서 소개하고 싶은 것이 SVG panzoom입니다. 그 이름과 같이, SVG의 확대 / 축소를 실현하기위한 라이브러리입니다. SVG panzoom 사용 샘플입니다. 많은 정보가 아로 새겨 져 있습니다. 확대했습니다. 마우스로 할 수 있습니다 반대로 빵했습니다. 그래도 깨끗한 선으로 그려지는 SVG의 장점 네요. 실제 움직임입니다. 실제 사용 예입니다. 도서끼리의 관련성을 시각화하고 있습니다. SVG는 JavaScript와 함께 대화 형 콘텐츠를 만드는 데 적합합니다. 또한 벡터이므로 경량이며, 그러..

SVG 콘텐츠는 재미있어, Flash와 같은 애니메이션도 지원하고 있습니다. 콘텐츠를 서서히 그려 나갈 수 있도록 하기만 하면 됩니다. 수작업으로 실현하는 것은 무리가 있을 것입니다. 그래서 사용해보고 싶은 것이 Yarrow입니다. HTML 프리젠 테이션 등과 결합하면 효과적 일 수 있습니다. Yarrow 사용법 실제로 움직이고있는 곳입니다. 나중에 선이 당겨지는 것을 알 수 있습니다. 선에 문자를 올릴 수 있습니다 소스가되는 곳에서 선이 시작한다는 연출도 가능합니다. 섹션의 상자를 향해 뻗어나가는 애니메이션도 가능합니다. 그래프의 포인트를 향해 당겨지는 데모. 이것은 효과가있을 것입니다. D3와 함께합니다. 그래프가 그림에서 단순히 화살표가 그려져있는 것만으로 시선을 끌기 쉽지 않습니다. 그래서 애니메..