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

JavaScript 다이어그램 작성 라이브러리 JointJS입니다. Diagram을 그리는 Javascript framework로 온라인 데모를 통해서도 간단하게 작업이 가능합니다. SVG 또는 PNG 파일로 내보내기가 가능하며, 간단한 다이어그램을 만들기엔 좋습니다. 전문적이고, 고급화된 프로세스 또는 시스템을 시각화하길 원하는 기업, 마케팅 및 광고 대행사, 컨설팅 업체, 학생, 기관이라면 유료를 이용하는 것도 좋습니다.

그룹/하위 항목을 지원하는 편리한 아코디언 메뉴입니다. CSS 기반으로 지원하는 다단계 아코디언 메뉴 Multi-Level Accordion Menu 아코디언 메뉴 시 즉각 반응한 기본효과인데, 다양한 애니메이션을 더욱 좋아할 경우 JavaScript 가 포함된 버전도 괜찮습니다.

다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 달력 아이콘을 클릭하면, 위 그림 처럼 날짜를 선택하는 달력이 화면에 표시가 됩니다. 달력의 년도-월 을 변경하거나, 시간을 선택하는 인터페이스는 아래와 같습니다. 달력을 사용하는 방법은 아래와 같습니다.

JavaScript 를 이용하여 단일 날짜 선택, 다중 날짜 선택을 지원하는 Datepicker 입니다. 특이사항은 여러가지 샘플을 제공해서 1개를 커스터마이징 하여 사용하기 보다는 자신에게 맞는 Picker 를 사용할 수 있습니다. 물론 자신에게 맞는 Picker 가 없다면 커스터마이징을 해야겠지요. 라이센스는 MIT 라이센스 입니다. 기본코드는 아래와 같은 형식으로 구성되어 있습니다. demo.js 를 제공하여 index.html 파일은 여러가지 Picker 를 한번에 볼 수 있습니다. Picker 샘플은 아래와 같이 있고 다 소개해 드리기 보다는 대표적인 것들만 소개해 드립니다. 기본 Picker 다중선택 6개월 기간 제한 Picker 단일 켈린더에 범위 선택 Picker 2개의 켈린더에 범위 선택..

Dynamic Calendar 는 추가 라이브러리를 필요로 하지 않습니다. data-lang 라고 하여 나라별 언어를 설정할 수 있습니다. 사용방법은 https://www.codehim.com/date-time/dynamic-calendar-in-javascript-with-example/ 에서 확인 가능합니다. 소스파일 보시면 data-lang 설정이 있으며 en, id, fr 3가지 설정가능 하며 한국어가 없어서 ko 항목을 추가 적용하여 소스를 제공했습니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 컨텐츠를 생성하고 플러그인을 호출합니다. 3. 어떤 작업을 시작한 후 로딩 표시를 출력합니다. 4. HTTP/AJAX 요청이 완료된 후 로딩 표시를 숨깁니다. 5. 로딩 표시와 숨김 애니메이션의 속도를 조절할 수 있습니다. 6. 플러그인을 비활성화 시킬 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 content-zoom-slider.min.js 파일을 링크합니다. 2. 플러그인에서 사용되는 Font Awesome Iconic Font 사용을 위해 css를 링크합니다. 3. 확대/축소 툴바를 만듭니다. 4. 텍스트 영역을 추가하고 플러그인을 호출합니다. 5. 확대/축소 범위를 설정할 수 있습니다. 6. 초기 출력 비율을 설정할 수 있습니다. 7. 확대/축소 단계를 설정할 수 있습니다. - 작동 예제

Powerful Calendar는 Jquery를 기반으로 구축된 가볍고 빠르며 다양한 이벤트를 제공하는 달력 입니다. 사용방법은 https://www.jqueryscript.net/time-clock/powerful-calendar.html 페이지에서 확인이 가능 합니다.

다운로드 받은 파일의 압축을 해제한 후, examples/index.html 파일을 웹브라우저로 열어보면 달력을 이용해서 날짜를 선택하는 데모를 확인해볼수 있습니다. 단순히 날짜만 선택하는 용도 외에, 총 17가지에 해당하는 사용자 커스터마이징이 가능합니다. 기본 달력 외에도, 부트스트랩의 스킨을 이용한 달력과, metallic 스킨을 이용한 달력을 이용할 수 있습니다. 날짜 외에도, 시간을 선택하거나, 날짜의 포맷을 조절이 가능한 케이스등등의 17가지 커스텀이 가능한 기능으로 인해서, 활용할 곳은 넓어질 것 같네요. 스크립트 외에, 입력박스의 속성을 이용해서 달력을 활성화 할수도 있습니다.

심플하고 가변운 슬라이딩 네비게이션 메뉴 sliiide 입니다. 왼쪽, 오른쪽, 상단, 하단 4가지 방향으로 구현 되어 있습니다. http://ahmedrad.github.io/sliiide/ 페이지 접속으로 4가지 방향의 네비게이션 메뉴 실행 구동 화면을 확인이 가능 합니다. 원하는 방향을 선택하고 왼쪽 상단 전체메뉴보기를 클릭하여 확인을 하실수가 있습니다. https://github.com/ahmedrad/sliiide 페이지에서 최신버전의 소스를 다운로드가 가능 합니다.