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

이벤트 발생시 Animate를 이용하여 특정 객체에 크기 변화, 애니메이션 효과,색상 변경 등을 동시에 적용할 수는 있는 소스코드입니다. - 이벤트 발생 전 - 이벤트 발생 후 - 소스코드

* jquery Zebra_Dialog 소개 - jquery Zebra_Dialog 은 사용자가 응용 프로그램을 계속 사용하기 전에 알림창을 보여줄 수 있도록 하는 기능을 제공합니다 * 사용조건 - jQuery 1.7.0 이상에서 사용이 가능합니다 * 특징 - 테마상자 알림창 상자 2개 제공 - 5가지 대화상자 : 확인,정보,경고,오류,질문 - css 파일을 편집하여 쉽게 사용자 정의 가능 - 맞춤검색 버튼 쉽게 추가 - 추가 사용자 정의를 위해 콜백함수 제공 - 주요 브라우저 Firefox, Opera, Safari, Chrome, Internet Explorer 6 이상 에서 작동 * 사용법 1. 다운로드 받은 압축파일을 해제하고 dist폴더에 있는 zebra_dialog.min 파일을 원하는 웹서버..

쿠키를 사용하기 위해서는 아래와 같은 쿠키 객체를 이용해야 합니다 jquery cookie plugin 을 이용하면 이를 좀 더 쉽고 간결하게 처리할 수 있으므로 활용 방법에 대해 알아보도록 하겠습니다 첨부된 파일을 다운로드 받아서 압축을 해제하고 원하는 웹서버 경로에 jquery.cookie.js 파일을 업로드 합니다 또는 https://plugins.jquery.com/cookie/ 에 접속하여 직접 다운로드 하여도 됩니다 원하는 페이지에 js 파일을 호출합니다 위와 같이 호출한후 쿠키를 생성,읽기,삭제 에 대해 좀 더 편하고 간결하게 처리할 수 있습니다 * 쿠키 생성예제 * 쿠키 읽기예제 * 쿠키 삭제예제

라디오버튼, 체크박스 선택시 밋밋한 스타일을 버튼형의 활성화 스타일로 설정할 수 있는 jquery 소스입니다. 검색박스나, 신청서 같이 정보값을 선택해야 되는 곳에 밋밋하지 않은 스타일로 구성할 때 요긴하네요. 관련 소스는 해당 페이지내 "view source" 버튼을 클릭해서 나오는 소스를 긁어서 사용하시면 됩니다.

Widget Factory를 이용하여 위젯의 배경색, 크기, 폰트크기등을 제어할 수 있는 jquery 소스입니다. 각 위젯별로 속성을 달리 설정할 수 도 있고, 한번의 액션으로 일괄 중지할 수 도 있으며, 한번에 같은 속성으로의 변경도 가능합니다. 관련 소스는 해당 페이지내 "view source" 버튼을 클릭해서 나오는 소스를 긁어서 사용하시면 됩니다.

페이지의 모든 텍스트를 점진적으로 강조 표시하는 JavaScript 라이브러리입니다. * LuminJS - 사용자가 중요한 텍스트에 집중할 수있게 해줄 때 유용합니다. 작업 진행 상황을 표시하는 데 사용할 수도 있습니다. * License - MIT License * 사용방법 - luminjs 스크립트 호출을 하고 하이라이트 줄 부분에 대한 선언을 아래와 같이 합니다 그리고 class 선언으로 container 영역을 생성하고 하이라이트 효과를 줄 텍스트 문구들을 아래와 같이 삽입하고 상단 스크립트에 선언한 버튼클릭시 하이라이트가 작동되도록 버튼을 넣어줍니다 제공되는 메서드는 아래와 같습니다 luminator.clear(); //강조표시가 진행중인 경우 표시를 중지합니다 luminator.start(50..

모션 관련 css 를 jquery 을 사용하여 효과를 바로 확인하여 소스를 확인할 수 있어한번에 원하는 효과를 관찰하고 적용하기가 수월합니다. 본 사이트로 접속하면 위 이미지를 이용하여 다양한 Motion CSS 의 구현 소스 및 방식 효과등을 바로 확인할 수 있습니다. http://pavlyukpetr.com/awesome/documentation.html 위 소스에 대한 구동방식은 위 링크를 통해 확인할 수 있으며, html5 용 css3 기반의 소스들로 ie11 이하의 하위버전에선 작동하지 않을 수 있습니다.

javascript 를 이용해서 캔버스를 사용하여 시각화 및 애니메이션을보다 간단하게 만듭니다. 애니메이션 지원, 레이어, 이벤트 캡처, 멀티 터치 및 많은 예제가 있습니다. 다운로드 받은 압축파일을 해제하고, index.html 파일을 웹브라우져에서 열어서 보면 여러가지 예제들을 확인하는게 가능합니다. 첫번째 예제가 화면에 Hello World 라는 글자를 출력하는 예제입니다. 이 예제를 위해서 사용된 소스코드는 hello-world.html 파일을 확인해보면 됩니다. hello world 라는 글자와 함께 20,20 이란 숫자가 무엇인가 싶어서 조절해봤더니 화면에 출력되는 글자의 위치(가로,세로)가 조절이 되네요. 그 외에도 여러가지 예제들이 있으며, 각종 예제들을 위한 소스코드를 확인해볼수 있습니다..

theta 360 카메라를 웹에서 바로 3D로 보여주는 자바스크립트입니다. 다운 받은 파일을 업로드 한 뒤 웹에서 열어 보시면 360 카메라를 웹에서 바로 3D 로 보여주는 자바스크립트 입니다. 아래는 샘플이미지 입니다. 일반 이미지도 3D 형태로 보여줍니다. 위 이미지 한장을 가지고 실행하면 아래 이미지 처럼 3D 형태로 볼 수 있습니다. 아래 이미지는 위 프로그램을 실행시겼을때 출력되는 이미지 입니다. 속도 조절이 가능하고 자동 회전 여부를 지정할 수 있습니다. index.html 파일 에서 이미지, 속도, 자동회전 여부 등을 수정할 수 있습니다.

jquery를 이용한 탭메뉴와 요소레이어 연결 Tabs 소스 탭메뉴를 클릭시 분리된 레이어 요소 콘텐츠가 서로 바뀌어서 출력됩니다. jquery UI를 연결하고 손쉽게 레이어 추가하여 탭개수를 늘릴 수 있습니다. 탭메뉴는 다양한 페이지에 사용되는 기본 소스인데, 손쉽게 사용이 가능하네요. 관련 소스는 해당 페이지내 "view source" 버튼을 클릭해서 나오는 소스를 긁어서 사용하시면 됩니다.