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

다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 화면이 나오는데, 공의 개수와 최대 숫자, 보너스 공의 개수, 보너스 번호 등등을 임의로 지정을 한 뒤, GENERATE NUMBERS 버튼을 누르면 버튼 아래의 흰 공간에 공들이 표시가 되고, 공의 중간에 표시되는 번호들이 뱅글뱅글 돌다가 무작위로 번호가 지정이 됩니다. 로또 복권 번호 랜덤 생성기 이긴 하지만, 공의 숫자가 뱅뱅 도는 효과와, 공들의 번호가 중복이 되지 않는것, 공의 개수 및 숫자의 범위 조절 등의 몇가지 옵션의 조절이 가능한 걸 이용을 하면, 로또 복권 번호 생성기 라고는 하지만, 비슷한 다른 용도로도 쓰일 수도 있을것 같네요.

첨부파일을 다운로드 받은후 압축을 해제한 뒤, Example/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 데모 사이트보다 몇몇가지 기능이 더 있네요. 데모용 화면을 열어보면, 위와 같은 버튼들이 표시가 됩니다. 각각의 버튼들을 클릭을 해보면 화면 좌측 상단에 아래의 그림과 같이 growl-style(으르렁거리는 스타일? 포효하는 스타일?) 의 경고창이 표시가 됩니다. 제작자는, 으르렁거리는 스타일이라고 표현을 했지만, 실제로 보면, 스리슬쩍 나타났다 아래로 스르륵 떨어지는 스타일로 보이네요. 시간이 지나면 경고창은 아래로 슬라이드되면서 떨어져서 없어집니다. 경고창이 표시되는 위치를 조절하는 옵션과, 경고창이 표시되는 시간을 초 단위로 조절하는 옵션이 있습니다. 그 외에는 경고창이 ..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 password-builder.jquery.js 파일을 로드합니다. 2. 비밀번호를 출력할 객체를 만들고 플러그인을 호출합니다. 3. 비밀번호에 포함될 문자를 지정할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 아이콘 디자인 파일을 로드합니다. 그리고 Jquery 라이브러리와 dRawr 라이브러리를 로드합니다. 2. HTML5 canvas 객체를 생성합니다. 3. dRawr 플러그인을 호출하고, 그리기 모드를 활성화합니다. 4. 사이즈 조절 및 각종 옵션과 기능들은 사이트 상세 내용을 참고하세요. - 작동 예제

* Thumbnails Preview Slider jquery 로 만든 썸네일 미리보기 이미지 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 마크업 구조는 아래와 같습니다 썸네일에 대한 항목을 보유할 기본 컨테이너 목록으로 구성됩니다 ts_thumbnails 클래스가 있으며 점 위로 마우스를 가져가면 축소판을 볼 수 있는 작은 보유하게 됩니다 tspreview_wrapper 클래스가 있는 div 내부에 있는 썸네일 목록은 다음과 같은 구조를 갖습니다 썸네일 주요 스크립트 호출은 아래와 같습니다 이외에 html 및 css , js 는 샘플파일의 index.html 파일을 참조하시면 도움이 되실겁니다 브라우저로 실행시 아래와 같은 화면을 확인할 수 있습니다

* juqery 3D Wall Gallery 3D 효과가 있는 jquery 갤러리 - 이미지를 가리키면 설명을 볼 수 있습니다 - 상단의 jQuery UI 슬라이더를 사용하여 이미지를 슬라이드합니다 - 마우스 휠을 사용하여 이미지를 스크롤 합니다 - 하단의 썸네일 미리보기를 사용하여 이미지 선택 - URL에 있는 이미지에 대한 해시 앵커를 사용하여 직접 가져올 수 있습니다 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 적용하고자 하는 웹문서에 css 파일을 호출합니다 아래와 같이 이미지 태그와 앵커를 각각 지정해줍니다 아래와 같이 각 앵커 이미지에 맞는 썸네일 이미지도 지정해줍니다 그리고 하단에 제공되는 js 파일 및 jquery 파일을 호출합니다 적용된 화면은 아래와 같습니다..

jQuery 를 이용한 메뉴 플러그인 입니다. 압축된 js 파일은 9KB로 매우 가볍습니다. IE11 에서도 구동 됩니다. 왼쪽 메뉴 또는 오른쪽 메뉴 형태로 설정하여 사용할 수 있습니다. HTML5를 사용 합니다. BEM 표기법을 사용합니다. 라이센스는 MIT License (MIT) 입니다. 아래는 실행화면 입니다. 사용법 안내 입니다. 1. 라이브러리를 호출 합니다. 2. 컨텐츠 및 메뉴를 선언 합니다. Menu Shop Products Collections Premium Common Exclusive First Secound Other Accesories Small Medium Large Cards Sets Example 1 Example 2 Example 3 Example 4 Example 5 ..

jQuery 를 이용하여 라이트 박스를 만들 수 있습니다. 사용자 정의가 가능합니다. 이미지, 비디오(YouTube, Vimeo, Wistia, Brightcove), Soundcloud 트랙, IFRAME 및 AJAX 콘텐츠를 지원하도록 제작되었습니다. 반응형 으로 제작 되었습니다. MIT 라이센스 입니다. 사용법은 간단 합니다. 1. 라이브러리 호출 2. 컨텐츠 선언 빨간색은 라이트박스에 보여질 썸네일 입니다. 파란색은 리스트에 보여질 썸네일 입니다. 3. 실행 var foo = $('#gallery'); foo.poptrox(); 실행화면 입니다.

날짜/시간 picker 입니다. 상황에 따라 날짜와 시간 모두 설정하거나 개별로 사용이 가능합니다. 해당 사이트 또는 아래 사이트에서 소스에 대한 설명을 확인할 수 있습니다. https://github.com/katemihalikova/ion-datetime-picker

드래그앤드롭, 리사이즈, 멀티터치 등의 기능을 제공하는 interactjs 입니다. https://interactjs.io/ 위 홈페이지에 접속시 하단에서 샘플 및 소스를 확인이 가능 합니다. 최신버전의 소스는 https://github.com/taye/interact.js 페이지를 통해 다운로드 할 수 있습니다. interact.js 소스 이용방법은 https://interactjs.io/docs/ 페이지에서 열람 하시고, 필요하신곳에 적용하여 이용 하시면 되겠습니다.