웹솔루션개발 25년 노하우! 해피CGI의 모든것

현재 4.4.1 버전으로 지속적으로 업데이트 되고 있는 차트 JS 입니다. https://www.chartjs.org/docs/latest/getting-started/ 위 링크의 스타트 설명을 따라 하다보면 쉽게 적용이 가능합니다. 다양한 차트와 여러 애니메이션 효과도 줄 수 있으니 차트가 필요하시다면 사용을 추천 드립니다.

Line, Area, Bar 등의 다양한 차트를 지원하는 차트를 손쉽게 구현 할 수 있는 TOAST UI Chart 입니다. https://ui.toast.com/tui-chart 지원되는 차트는 아래 이미지를 참고 하시면 되겠습니다. 한국어 메뉴얼은 아래 페이지를 통해 접속 하시면 되고, 각 차트별로 메뉴얼을 볼 수 있습니다. https://github.com/nhn/tui.chart/blob/main/docs/ko/README.md 최신버전 및 버전별 소스 다운로드는 https://github.com/nhn/tui.chart/releases 페이지에서 제공 됩니다.

kslider는 이미지를 우아한 방식으로 표현하기 위해 만들어진 초소형, 완전 반응형, 사용하기 쉬운 jQuery 기반 슬라이더입니다. 화면 크기에 따라 높이/너비를 자동으로 조정합니다. 호버링 시 탐색 화살표를 자동으로 표시하거나 숨깁니다. Auto는 img의 속성에서 이미지 캡션을 만듭니다.alt 특정 속도로 이미지 간에 자동 전환됩니다. 회전목마와 같은 무한 루프. 와 같은 기능이 있습니다. 사용방법은 아래와 같습니다.

color-picker.js 는 웹 페이지에 HEX 색상 선택기를 추가할 수 있는 가볍고 구현하기 쉬운 jQuery 플러그인입니다. 색상 입력에 초점이 맞춰지면 간결하고 깨끗한 색상 선택기 팝업이 표시되므로 사용자가 선택한 미리 정의된 색상 집합이 포함된 팔레트에서 색상을 선택할 수 있습니다. 사용방법은 아래와 같습니다.

월별, 주별, 일별 달력을 제공하며 드래그를 통한 이벤트 생성 및 편집이 가능한 TOAST UI Calendar 입니다. https://nhn.github.io/tui.calendar/latest/tutorial-00-calendar-app 페이지에서 다양한 샘플 데모를 확인이 가능 합니다. 사용방법은 한글로 된 메뉴얼이 제공되고 있습니다. https://github.com/nhn/tui.calendar/blob/main/docs/ko/README.md 최신버전의 소스 다운로드는 아래 github에서 할 수 있습니다. https://github.com/nhn/tui.calendar

이미지 편집을 웹브라우저에서 할 수 있는 편집툴인 TOAST UI Image Editor 입니다. https://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi 페이지에서 데모 페이지 확인이 가능 합니다. 소스의 다운로드는 https://github.com/nhn/tui.image-editor/releases 페이지를 통해서 버전별로 다운로드가 가능 합니다. 설치 방법은 https://github.com/nhn/tui.image-editor 페이지를 참고 하시면 되겠습니다. 소스를 다운로드 받는 경우, apps\image-editor\examples 경로에서 샘플 소스도 확인이 가능 하겠습니다. 샘플 소스를 활용해서 쉽게 구동을 해볼..

ipgrid는 Google 스프레드시트 및 MS Excel에서 영감을 받은 유연하고 기능이 풍부하며 사용자 정의가 가능한 jQuery 스프레드시트 플러그인입니다. 많은 구성 옵션과 API 메소드 및 이벤트가 함께 제공됩니다. 다운로드 받은 파일의 압축을 해제하고, demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 사용법은 아래와 같습니다.

PowerButtons(이전의 confirmbutton.js)는 확인 대화 상자 추가, 조건 확인 및 경고 메시지 표시와 같은 추가 기능으로 웹 버튼을 강화하는 JavaScript/Bootstrap 플러그인입니다. jQuery와의 원활한 통합을 제공하지만 반드시 필요한 것은 아닙니다. Bootstrap이 없으면 플러그인은 기본 JavaScript 팝업 기능으로 스마트하게 대체됩니다. 다운로드 받은 파일의 압축을 해제한 뒤 examples.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 버튼을 눌러보면 경고창이나, 확인창이 아래 그림 처럼 화면에 표시가 되는 예제들이 많습니다. 예제 파일에서 각 케이스별 사용법에 대한 예제 소스를 확인할 수 있습니다 사용방법은

PC 에서는 위와 같이 반응형으로 모바일 사이즈에서는 위와 같이 나타납니다. 사용법은 간단합니다. js 선언 후 탭 디자인은 위와 같은 형태로 한후 스크립트 옵션 조절하여 사용하시면 되겠습니다. https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion 위의 링크에서도 동일 내용 확인 가능하니 위의 링크도 같이 확인해 보세요~

https://indigounited.github.io/jquery.simplemarquee/test/demo.html 위의 데모 링크에 접근하셔서 한번 보시는게 이해가 가장 빠릅니다. 글자를 위로 아래로 왼쪽으로 오른쪽으로 스크롤 되게 할 수 있습니다. 사용법은 간단합니다. 두 js 를 선언하고 위와 같이 오른쪽으로 스크롤 하고 싶다면, 오른쪽으로 옵션을 주면 됩니다. 그 외에 옵션들은 참고하세요.