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

모바일웹에서 숫자를 입력받기 위해서 좌/우로 슬라이드를 이용한 숫자 입력폼입니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 좌,우로 스와이프를 이용해서 원하는 숫자를 선택할수 있고, 주변을 클릭하는 경우 원하는 숫자값을 직접 입력하는게 가능합니다. 사용하기 위한 방법은 위 설명을 참고해서 이용하는게 가능합니다. 숫자의 범위를 지정하거나, 어떤 단위로 증차감이 될런지를 지정하고, 사용자가 어떤 숫자를 선택했는지에 대한 콜백을 받아서 처리하는게 가능하네요.

모바일에서 시간을 선택하는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 메모장이나 텍스트 편집기로 열어보면 위 코드를 아래 처럼 변경을 해서 저장하면, 웹브라우저로 열어보면 확인이 가능합니다. NPM을 설치가 가능하면, https://github.com/loebi-ch/jquery-clock-timepicker 위 링크를 참고하면 되겠습니다. 예제 화면에는 위 그림 처럼 시간과, 분을 입력해둔 다양한 케이스의 입력폼을 볼수 있네요. 시간이 입력된 입력폼을 클릭해보면 위 그림 처럼 아날로그 시계모양이 화면에 표시가 되고 시계에 표시되는 시간을 클릭해서 입력폼에 입력된 시간을 조절할 수가 있네요. 웹페이지에 시계를 표시하기 위한 다양한 옵션들이 제공이 되며..

색상 선택을 구글 문서 스타일을 이용해서 할수 있도록 하는 jquery/bootstrap 플러그인 입니다. 다운로드 받은 파일의 압축을 해제후 index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 일반적인 컬러피커들과는 다르게, 많은 색상을 선택할 수는 없지만, 자주 사용이 될 만한 색상만 모아두고 조금 더 쉽게 사용할 색상을 선택하도록 하기에는 유리해보이네요.

Jquery 로 제작된 시계모양의 UI를 통해서 시간을 입력받기 위한 스크립트입니다. 첨부된 파일을 다운로드해서 압축을 풀어보면 index.html 파일을 웹브라우저를 이용해서 열어보면 확인이 됩니다. 열어 보면 입력박스만 있는데 입력박스를 마우스로 클릭해보면 아래 그림과 같이 시간을 선택하고 분을 선택하는 시계를 이용해서 입력박스에 시간을 입력할수 있습니다. 시계를 조절하는 몇가지 옵션이 있는데, 입력박스를 클릭했을때 시계를 이용해서 시간을 입력받도록 적용하는 방법은 https://www.jqueryscript.net/time-clock/Material-Time-Picker-Plugin-jQuery-MDTimePicker.html 위 페이지의 옵션의 이름, 설정된 값등이 나와 있습니다.