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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 auto-resize.js 파일 링크를 걸어줍니다. 2. TEXTAREA 폼을 추가하고, auto-resize 함수를 호출합니다. 3. 최소 줄수, 최대 줄수를 옵션으로 설정할 수 있습니다. minRows : 기본값 2 maxRows : 기본값 무한대 - 작동 예제

Notify는 닫기 버튼과 Font Awesome 아이콘이있는 Bootstrap 알림 표시 줄을 만드는 가벼운 jQuery 플러그인입니다. 플러그인을 사용하면 다른 jQuery / JavaScript 이벤트에서 여러 동적 알림을 트리거 할 수 있습니다. 가까운 오류, 성공, 정보 및 경고 알림 메시지를 사용자에게 쉽게 표시 할 수 있습니다. 또한 이러한 CSS3 스타일 알림 바는 최상의 사용자 경험을 제공합니다. 알림 메시지는 자동으로 사라지지만 수동으로 닫을 수도 있습니다. 라이센스는 MIT 라이센스 입니다. 1.라이브러리 및 CSS를 호출하세요. 2.버튼을 하나 만들어 보세요.클릭해주세요. 3.버튼에 각종 이벤트를 걸어 보세요. jQuery / JavaScript 이벤트 (click, mouseent..

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

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

jquery 버전 2.1.0 에서 최적화된 소스로 본 소스내에 라는 booklet 고유 jquery 소스를 적용하고, 핵심소스인 $(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with a class $('.mycustombooks').booklet(); }); 값을 이용한 다양한 option 을 적용하여 효과적인 UI 를 구현할 수 있습니다. https://builtbywill.com/booklet/#/documentation 위 링크를 통해 다양한 옵션설정을 확인할 수 있으며, https://builtbywill.c..

웹페이지에서 여러가지 정보를 입력받아야 할때 입력폼에 어떤 정보를 입력하면 될런지 힌트를 주기 위해서 사용이 가능하겠습니다. 다운로드 받은 파일의 압축을 해제한후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. HTML 소스코드를 보면 form 태그의 name 값을 지정해준후에, 각 입력폼을 클릭했을때 어떤 문구를 표시해줄지 위 그림과 같은 스크립트로 작성한후에 아래와 같이 지정된 폼에 적용하는 스크립트를 이용하면 가능하네요. 여러가지 정보를 입력받아야 하는 페이지에서 각각의 정보마다 도움말이나, 힌트를 표시하기 위해서 . 손쉽게 사용이 가능해보입니다.

* Grid to Fullscreen 사진을 확대, 애니메이션 격자형태로 변형하여 보여줄 수 있는 기능을 가진 jquery plugin * 사용방법 첨부된 압축파일을 다운로드 하여 사용할 웹루트 디렉터리에 업로드하고 압축을 해제합니다 그후 아래와 같은 핵심코드들이 삽입되어야 합니다 적용할 html 문서에 샘플로 제공되는 css , js 파일을 선언 이미지 및 설명문구가 들어갈 html 구문을 아래와 같이 작성 하단에 기본 제공되는 js 파일 및 스크립트 선언 애니메이션 효과 관련 스크립트 옵션은 아래와 같습니다 timing - duration : 애니메이션 지속시간 조절할 수 있습니다(숫자형, 초단위) activation : 사진의 애니메이션 움직임 위치를 선정할 수 있습니다(`closestCorner`..

"메뉴1" 에 해당하는 스크롤 영역의 위치를 보시면 최상단에 배치되어있습니다. 스크롤을 계속해서 내리게되면 아래와 같이 "메뉴2" 에 해당하는 스크롤에 위치하면 메뉴2 부분이 활성화 됩니다. 해당 소스는 메뉴의 갯수 제한없이 본문영역내에 id 값을 추가로 늘리고, 메뉴의 싱크만 맞춰주시면 무한대로 늘릴 수 있습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴1 본문영역 메뉴2 본문영역 메뉴3 본문영역 메뉴4 본문영역 메뉴3 본문영역 메뉴4 본문영역

* jQuery Gridly - Gridly는 jQuery 플러그인으로 드래그 앤 드롭과 그리드에서 크기 조절을 가능하게합니다. * 이용방법 - jquery js, gridly js, css 파일을 로드합니다 그리고 아래와 같이 드래그할 박스들을 출력할 div 태그영역들을 선언합니다 위와 같은 형태로 문서에 코드를 넣고 디자인을 마무리한후 URL을 호출하면 아래와 같은 박스영역들을 확인할 수 있으며 드래그이동, 추가, 삭제 기능도 제공하므로 디자인 작업자분께서 활용하시는데 도움이 되실것 같습니다 참고하실 샘플파일은 압축파일을 다운로드 하여 index.html 을 참고하시면 되겠습니다

* jquery.parallax.js - css3의 트랜스폼을 이용한 parallax 스크롤 형태의 원페이지 디자인페이지 입니다. 간단한 원페이지 형태의 회사소개 페이지나. 포트폴리오 용, 또는 이벤트형으로 사용하시면 좋은소스입니다. 라이센스는 MIT라이센스이며 파일안에서도 확인하실 수 있습니다. 마크업 및 사용방법은 위 데모사이트주소로 들어가시면 확인하실수 있으며 다운도 받으실 수 있습니다. * 이용방법 - 첨부된 압출파일을 압축해제하고 사용하려는 웹디렉터리에 업로드를 합니다 문서 상단에 샘플 css 파일과 jquery 파일호출 및 스크롤시 이미지가 보여줘야될 영역에 대한 높이값을 조정 하는 스크립트를 삽입합니다 그리고 스크롤 하면서 보여줘야될 문구와 이미지 설정은 아래와 같이 class 로 선언하여 ..