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

Jquery ui를 이용한 달력입니다. 데모사이트로 이동을하면 오른쪽 하단에 Export 버튼을 확인하실 수 있습니다. 클릭하여 자료를 받아보시면 html,css,js 파일로 구성이되어 있습니다. Export가 되지 않는다면 회원가입 후 진행하시면 됩니다^^

NiVO 슬라이더를 소개 합니다. 애니메이션 효과가 참 재미 있는 슬라이더 입니다. 사용방법 안내 드립니다. 1. 라이브러리를 호출하세요. 2. 컨텐츠를 구성하세요. 3. 플러그인을 호출 하세요. 4. 다양한 옵션과 이벤트를 걸고 싶다면 아래의 내용을 참고 하세요. 아래의 사용 가능한 effect 항목을 이용하여 다양한 방법으로 슬라이드를 표현할 수 있습니다. ( sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse )

* jquery fancyTable fancyTable은 html 테이블을 검색하고 정렬 할 수 있도록하는 jQuery 플러그인입니다. * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드 합니다 css 를 아래와 같이 호출합니다 테이블 html 태그를 구성합니다 (jquery 를 통해 tbody 태그에 테이블 내용이 삽입됩니다) 구성에 필요한 js 파일 및 코드를 삽입합니다 위와 같이 적용된 jquery 를 통해 아래와 같이 테이블 내용이 삽입되고 정렬됨을 확인할 수 있습니다 첨부된 압축파일에도 샘플 파일이 있으니 참고하시면 도움이 되실겁니다 ​ ​

jQuery 를 이용하여 물파장 이펙트를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. # 라이브러리 호출 합니다. # 컨테이너를 만듭니다. # 스크립트를 실행 합니다. $(".full-landing-image").ripples({ resolution: 200, perturbance: .004, }); 한가지 아쉬운점은 데모 사이트는 멋지게 작동하지만 샘플 코드는 너무 심플한것 같습니다. 라이센스는 별도 안내가 안되어 있지만 코드힘에서 확인했을 때 이미지에 MIT 라이센스로 명시가 되어 있네요.

Jquery stop()메서드는 현재 실행중인 애니메이션(모션)을 필요에 의해서 정지를 시킬때 사용하때 주로 사용이 됩니다. $(선택자 ).stop( stopAll, goToEnd ); 첫번째 인수는 대기열에 등록되어 있는 모든 모션을 중지할지를 선택하는 옵션입니다. 기본은 false이며 두번재 인수는 현재 실행되고 있는 모션을 중지할지를 여부를 선택합니다. 기본은 false입니다. 자세한 예제는 링크를 통해서 확인하실 수 있습니다. https://www.w3schools.com/jquery/jquery_stop.asp

각종 평가 점수를 별모양의 아이콘을 선택해서 입력받을수 있는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한후 index.html 파일을 크롬 웹브라우저로 열어 보면 별점선택을 하는 화면의 확인이 가능합니다. 별모양의 아이콘을 화면에 표시해주고, 클릭을 하면 점수를 화면에 표시를 해주네요. 별모양 아이콘 뿐만 아니라, 아이콘을 커스텀해서 다른 아이콘을 이용하는 것도 가능합니다. 사용하는 방법도 복잡해보이지는 않네요 위 4가지가 기본이며, 클릭 이벤트를 걸거나, 별의 개수를 10개로 늘려서 0~10점 사이의 점수를 받는다거나, 별 반개만 선택해서 .5 점을 이용하거나, 별 아이콘의 색상을 조절을 하거나, 별 아이콘 대신 다른 아이콘으로 커스텀하는 예제는 위 소스코드와 같습니다. 그 외에도..

CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등등 ... 많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin 입니다. ​ ​ 사용법은 생각보다 쉽습니다. 1. 기본적으로 jQuery Plugin 이므로 jQuery 를 호출해 주셔야 합니다. 2. Script 호출 해 주세요. 3. HTML 요소는 아래처럼 하시면 됩니다. Your content here... Your content here... Your content here... 4. CSS 를 선언하여 변경할 일이 있다면 플러그인 호출전에 미리 선언하시거나 jarallax CSS 파일에 넣어두셔도 됩니다. .jarallax { position..

Interactive Image는 이미지, 텍스트, 오디오, 소셜 링크, SoundCloud 트랙, HTML5 / Youtube / Vimeo 비디오 를 이미지의 대화 형 메모 / 마커 / 댓글 로 사용할 수있는 간단하고 유연한 jQuery 플러그인입니다 . ​ ​다운로드 받은 파일의 압축을 해제한후 examples/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지의 이미지가 표시되고, 이미지 위의 마우스를 올려보면, 아래의 그림과 같이 포인트를 표시해줍니다. ​ ​ 각 포인트에 마우스를 올려보면 일반적인 텍스트(HTML)로 설명문구를 표시하거나, 사진을 추가로 보여주거나, 오디오파일을 재생시킨다거나, 동영상을 재생시킨다거나, SNS사이트로 공유를 한다거나 하는게 가능합니다. ..

크로스 브라우저 Syntax Highlighter JQuery 플러그인입니다. Syntax Highlighting 이란 구문 강조를 의미하는데, 프로그램 소스 코드 등을 노출하여 설명할때 주로 사용됩니다. ​ ​- 라이센스 MIT - Syntax Highlighting 이란? Syntax Highlighting 이란 구문 강조를 의미하는데, 프로그램 소스 코드 등을 노출하여 설명할때 주로 사용됩니다. 소스 코드 줄을 구분하고 각 프로그램 언어에 맞게 변수, 함수 등의 색상을 달리하여 소스 코드를 보기 쉽게 노출해 줍니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 Syntax JS 파일을 링크합니다. 2. syntax 함수를 호출합니다. theme 값을 통해 테마도 변경이 가능합니다. (b..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 카운트 다운 타이머 JS 파일을 링크합니다. 2. 카운트 다운 타이머를 출력할 객체를 추가합니다. 3. countdown 함수를 호출하고 카운트 다운 시간을 설정합니다. $element: 카운트 다운 출력할 객체 ID $daysAdd: 일 $hoursAdd: 시 $minutesAdd: 분 $secondsAdd: 초 4. CSS 스타일로 카운트 다운 타이머와 로딩 바의 스타일을 설정할 수 있습니다. 5. JavaScript 로도 카운트 다운 타이머와 로딩 바의 스타일을 설정할 수 있습니다. 6. 카운트 다운 타이머가 종료되면 출력할 문구도 설정할 수 있습니다. - 작동 예제