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

위와 같은 패턴종류, 사이즈, 색상값을 설정하면 데모이미지가 변경되게 됩니다. 위 소스를 응용하여 이미지와 합성하여 위 이미지 샘플과 같은 용도로 응용이 가능합니다. 위와같은 다양한 종류의 패턴을 확인할 수 있습니다.

데모사이트 : http://www.htmldrive.net/items/demo/1816/-Vertical-navigation-filter-function-code-with-JQuery (메뉴보기 jQuery 소스 입니다.)

JQuery 를 이용하여 구성된 테이블 소팅 기능 입니다. Licence: Dual licensed under MIT or GPL licenses. 업로드 된 파일을 다운로드 후 압축해제 하시면 docs 폴더에 예제 파일들이 있습니다. 기능별 예제 파일이 분리되어 있으므로 체크 및 사용이 간편 합니다. 소팅 기능을 위해 Javascript 변수를 선언하고 복잡한 스크립트를 구성할 필요가 없어서 매우 좋네요 ^^ 디자인 작업 후 실행만 시켜 주시면 됩니다. 기본적으로 Jquery 는 호출되어야 하며 제공되는 스크립트 들도 호출 되어야 합니다. 테이블은 편하신 대로 구성을 하시되 클래스명을 매칭 시켜 주셔야 합니다. 선택하는 스크립는 테이블이 만들어지기 전에 선언되어야 하며 실행 되어야 합니다. 소팅 옵션 ..

jquery 를 이용해서 이미지를 슬라이드 시켜주는 스크립트 입니다. 다운로드 받은 파일의 압축을 풀어서 FeaturedContentSlider/index.html 파일을 웹브라우저로 열어 보면 어떻게 슬라이드가 되는지 확인이 가능합니다. HTML의 구조와, CSS를 어떻게 적용해야 하는지, 자바스크립트는 어떻게 코딩해야 할런지를 아래의 페이지를 통해서 가이드를 주고 있네요. http://www.htmldrive.net/items/show/149/Slick-Auto-Playing-Featured-Content-SliderjQuery- 샘플로 제작된 HTML 및 CSS역시 가이드와 비슷하네요. 사진 부분, 사진 아래 설명문구(까만색배경) 설명문구 아래 작은 사진 부분등을 이용해서 위 그림과 같은 이미지 슬..

Jquery 를 이용해서 구현된 이미지 슬라이드 프로그램입니다. 이미지가 바뀔때 효과가 작은 그림에서 큰 그림으로 바뀌면서 화면이 변경이 됩니다. 큰 사진과, 작은사진이 두가지가 있긴 있는데, 큰 사진도 화면에 보이는 크기만큼 크진 않는데도 괜찮은 효과를 보여주네요. HTML 및 JAVASCRIPT 구조도 복잡현 편은 아니어서 쉽게 적용을 해볼수 있을것 같네요. 출처는 http://www.htmldrive.net/items/show/1830/jQuery-one-large-product-per-slide-colorful-slider-for-showcasing 입니다.

JQuery 를 이용한 버튼 애니메이션 효과 입니다. 파일을 다운받으 시고 압축을 해제 하시면 폴더에 demo.html 파일이 있습니다. 해당 파일에 각 버튼의 애니메이션 효과별로 정리가 되어 있으니 원하시는 에니메이션 효과를 가져와서 사용하시면 좋겠네요 ^^ 저는 2D and 3D 가 가장 마음에 드네요 ^^

버튼 클릭 이벤트로 객체의 폰트Color, background Color를 바꿔주는 Color Animation JQuery 소스입니다. 폰트Color, Background Color는 물론 가로 사이즈, Border 스타일 등도 클릭이벤트로 변경이 가능합니다. 소스도 비교적 간단하여 다양한 부분에 활용이 가능합니다.

버튼 클릭 이벤트로 객체의 CSS를 바꿔주는 JQuery 소스입니다. 변경 이벤트를 버튼에 작성시 이용가능합니다. 버튼 클릭시 CSS 클래스를 변경할 수 있습니다. 기본 클래스와 클릭시 변경되는 클래스를 지정하고 설정하면 됩니다. 사용법도 간단하고, 여러가지로 사용할 수 있는 유용한 JQuery 소스입니다.

jquery 를 이용한 간단한 화면 키보드입니다 라이센스는 MIT 이며 첨부된 압축파일을 받아서 해제한후 웹루트 폴더에 올리시면 아래와 같은 샘플 데모화면을 보실 수 있습니다 웹페이지 적용방법은 index.html 을 참고하시면 되며 아래와 같은 구조로 되어있습니다 스크립트 선언부 키보드 뷰영역 스크립트 영역 하단부 해당 플러그인은 키보드 보안이 필요한 웹페이지에 적용하면 유용할 것으로 생각됩니다

Tooltipster 는 jquery로 만든 편리한 툴팁 프로그램 입니다 * License - MIT License * jquery 버전 - jQuery 1.10 이상 필요 * 설치방법 및 샘플코드 - 첨부된 압축파일을 받아 해제 하고 css, js 를 아래와같이 head 부분에 선언해 줍니다 이미지와 툴팁에 들어갈 메시지 셋팅 툴팁로딩 기본스타일 외에 Tooltipster 는 다섯가지 테마를 아래와 같이 제공합니다 툴팁내부에 html 을 아래와 같이 사용할 수 있습니다 그리고 위와 같이 두개의 툴팁이 있는 경우 contentCloning 값을 true 로 설정하여야 합니다 그외에 다양한 옵션이 제공되며 아래는 샘플입니다 더많은 옵션을 확인하시려면 아래의 링크로 클릭하여 확인해주시기 바랍니다 http:/..