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

ios 스타일의 가상 키보드 플러그인 입니다. 첨부파일을 다운로드 받은후 압축을 해제하면 생성되는 examples/default.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 영문 소문자, 영문 대문자, 숫자 키보드를 지원하네요. ckeyboard.js 라는 파일의 소스코드를 열어서 보면 위 코드와 같이 각각의 키에 해당하는 글자를 설정해둔 소스코드를 볼수 있습니다. 약간 변경을 하면 한글을 입력받는것도 가능은 하겠다 싶어서 약간 손을 봤더니, 화면에 한글의 자음과, 모음을 표시하고 눌렀을때 입력을 받는것도 가능하지만, ㄱ ㅏ ㄴ ㅏ ㄷ ㅏ ㄹ ㅏ 식으로 입력이 되어버려서 결과적으로 제대로 된 한글로는 조합이 되지는 않네요. 간단하게 영문, 숫자를 입력받는 용도로 사용하기에는 좋을것 같습니다.

jQuery 와 Bootstrap 을 이용한 목차를 만들 수 있습니다. 라이센스는 MIT Licence 입니다. selectors 를 이용하여 원하는 태그를 목차의 메뉴로 설정할 수 있습니다. 옵션은 다양하게 존재합니다.

jQuery 와 Bootstrap 을 이용한 Circle 차트 입니다. 코드는 심플하네요. 라이센스는 MIT License (MIT) 입니다. 기본 적으로 사용된 옵션들 외에 다양한 옵션들이 더 있습니다.

상단에 있는 카운터는 본 웹사이트를 마우스가 이동한 거리를 미터로 측정한 값입니다. 하단의 카운터는 본 웹사이트를 이용한 고객들의 누적된 마우스 이동 거리를 말합니다. (상당히 많은 인원이 보고있었네요..) 단순한 거리만 측정하고 특별한 효과는 없습니다. 허나 마우스 총 누적거리를 이용하여 홈페이지에 접속자가 얼마나 많은 거리를 마우스로 이동하였는지 알수 있어 홈페이지 제작이나 마케팅부분에 도움이 될것으로 예상됩니다.

체크박스 선택시 shift를 이용하여 다중으로 선택할 수 있는 기능입니다. 체크박스 선택 후 시프트 + 원하는곳에 클릭을 하면 다중으로 선택이 됩니다. https://stackoverflow.com/questions/659508/how-can-i-shift-select-multiple-checkboxes-like-gmail 에서 원본 소스를 확인하실 수 있으며 https://www.google.co.kr/search?newwindow=1&source=hp&ei=LuKRXKiyE8W18QXU75vABQ&q=checkbox+shift+select&oq=checkbox+shift&gs_l=psy-ab.1.0.0i203j0i30l3j0i5i30l5j0i8i30.1157.11223..13178...0.0..0.1..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 autoSized JS 파일 링크를 걸어줍니다. 2. TEXTAREA를 추가하고 플러그인을 호출합니다. 옵션으로 가로크기(width)와 최소 높이값(minHeight)을 지정할 수 있습니다. 3. TEXTAREA의 배경색이나 글자색을 옵션으로 지정할 수 있습니다. 4. 그 외에 CSS의 resize 옵션과 overflow 옵션을 추가할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 핀코드를 사용할 영역을 추가하고, 영역 안에 핀코드가 입력될 INPUT 박스들을 추가합니다. INPUT 박스의 타입(type)은 원하는대로 설정합니다. 2. IP 주소 입력 박스와 같이 1칸에 2자 이상의 핀코드를 입력해야 하는 경우에는 maxlength 값으로 조절합니다. 3. 상단에 PincodeAutotab 플러그인과 JQuery 라이브러리를 include 합니다. 4. 페이지 로딩이 완료된 후 플러그인이 실행되도록 합니다. 5. 지정된 색상을 제거할 수도 있습니다. - 작동 예제

조직의 조직도나, 구성원들의 구성도를 쉽게 웹페이지에 표시하는 용도로 사용하면 좋을것 같습니다. 첨부된 파일을 다운로드 받아서 압축을 해제한후 demo/index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러가지 유형의 예제들을 데모로 확인이 가능합니다. 구성원 위에 표시되는 좌우 아이콘을 이용해서 구성도를 접었다가 펼쳤다가 하는 예제입니다. 화면에서 구성도를 편집하는 것도 예제가 있습니다. 검색하고자 하는 단어로 필터링 해서 관계가 연결된 구성원만 보여주는 것도 가능하네요. 지도와 연결해서, 구성원을 클릭하면 해당 구성원이 있는 위치로 이동하는 예제도 있습니다. 각 구성원들의 정보를 클릭하면, 아이콘으로 추가로 표시해주는 것도 있습니다. 그 외에도 여러가지 예제들이 있으며, 어떤 조..

* Freezeframe.js Freezeframe.js는 애니메이션 .gif를 일시 중지하고 마우스 오버 / 마우스 클릭 / 터치 이벤트에서 애니메이션을 적용하거나 수동으로 트리거 할 수있게 해주는 라이브러리입니다 * License MIT License * 사용방법 첨부된 압축파일을 다운로드하여 적용할 디렉터리에 압축을 해제합니다 Freezeframe 을 적용할 html 파일을 열어 js파일을 호출합니다 적용할 gif 애니메이션 파일을 img 태그로 호출하고 class 명을 지정한후 아래와 같이 스크립트를 호출하여 적용할 수 있습니다 위와 같이 적용하였을때에 이미지 클릭을 통한 애니메이션 작동여부를 확인하실 수 있겠으며 코드의 적용 샘플을 확인하실 경우 첨부된 파일중 freezeframe.js-mast..

사용자가 커스터마이징이 가능한 대화창입니다. 브라우저 우측 하단의 알림혈 대화창 출력도 가능합니다.