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

CSS3 및 jQuery를 이용하여 마우스 오버시 방향인식을 하여 내용을 출력하는 jQuery소스 단순할 수 있는 갤러리타입 페이지에 유용한 작은 효과로 생기를 줄 수 있습니다. 마우스 오버시 항목은 왼쪽을 기준으로 첫 로딩시 뜨고, 위치를 찾아갑니다.

라운드 형태의 스크롤 디자인부터 rail 형태의 스크롤바등 여러개의 모양으로 변경하여 이용할 수 있는 크로싱 스크롤 소스입니다. 사용조건은 아래와 같습니다. 소스내에 아래의 style 소스와 js 소스를 반드시 입력되어있어야 합니다. 또한 각 style 소스내에 id 값을 가진 css 소스도 삽입되어야 합니다. 위 조건을 만들어주셨다면 라는 각 class 명에 삽입될 scrollbar-dynamic 등으로 구분된 class 명칭을 작성하시면 해당 스크롤 바의 모양을 이용하여 적용할 수 있게됩니다.

* Colorbox License - MIT License * Colorbox 소개 - 사진, 그룹화, 슬라이드 쇼, 아약스, 인라인 및 아이프레임 콘텐츠를 지원합니다. - 경량 : 10KB의 JavaScript (gzipped 5KB 미만). - CSS를 통해 제어되므로 스타일을 다시 지정할 수 있습니다. - 소스 파일을 변경하지 않고 콜백 및 이벤트 훅으로 확장 할 수 있습니다. - JS에 설정되며 기존 HTML을 변경하지 않아도됩니다. - 이미지를 사진 그룹에 미리로드합니다. * Colorbox 사용방법 첨부된 압축파일을 해제하여 원하는 경로에 업로드합니다 jquery , colorbox js파일과 css 파일을 경로에 맞게 불러옵니다 라이트 박스 레이어 팝업 이미지를 보여주기 위한 스크립트를 호출..

웹페이지에 간단하게 툴팁을 추가할수 있는 스크립트 입니다. 다운로드 받은 파일의 압축을 해제한 후 example/GetTip Example #1.html 라는 HTML문서를 웹브라우저로 열어보면 확인이 가능합니다. 마우스 오버시 상하좌우 어느쪽에 툴팁을 표시할것인지 정할수 있고, 얼마나 오랫동안 오버를 해야 나오는지 툴팁이 나온후에 어느 정도 유지하는지 시간을 제어할수가 있습니다. 마우스를 오버하거나, 입력박스에 포커스를 주거나, 특정 버튼을 클릭하거나 했을때 화면에 툴팁을 추가할 수 있습니다. 특정 객체에 툴팁을 추가하는 방법이 생각보다는 쉽네요. HTML 태그를 이용해서, 1. jquery 를 사용할 수 있게 추가하고, 2. js/jquery.gettip.js 를 이용하도록 추가합니다. 3. 툴팁이 ..

드래그 영역이 뷰포트를 벗어나 이동하면 문서를 자동으로 스크롤 합니다. 아래 영역들을 설정에 따라 자동 스크롤 처리가 되게 할 수 도 있고 하지 않을 수도 있습니다. 단순 영영드래그 한것만으로 스크롤을 움직일 수 있습니다. 위 기능을 구현하기 위한 소스는 아래와 같으며 첨부파일로 소스 첨부해두었으니 참고하시면 됩니다. scroll 값이 true 일때만 자동스크롤 됩니다. crollSensitivity및 scrollSpeed 옵션을 사용하여 스크롤 될때 속도나 미세한 움직임 등을 제어할 수 있습니다.

지정된 영역을 드래그 가능하게 해주는 jquery 입니다. 빨간색 테두리 안에 있는 영역을 마우스로 드래그 하여 영영을 이동시킬 수 있습니다. 위 기능을 구현하기 위한 소스는 아래와 같으며 첨부파일로 소스 첨부해두었으니 참고하시면 됩니다.

다운로드 받은 파일의 압축을 해제해서 index.html 파일을 웹브라우저로 열어 보면 확인이 가능합니다. 처음 페이지 로딩시 아래 그림 처럼 이미지들이 한곳에 모여 있는 화면이 나옵니다. 마우스로 이미지를 클릭해서 드래그 한 다음에 이미지를 배치시키고자 하는 위치 근처에서 마우스를 놓으면 이미지가 위치를 찾아서 움직이는 효과를 확인해볼수 있습니다. 마우스를 움직인 속도에 따라서 이미지가 스르륵 움직여서 위치를 찾아가는게 약간 신기하네요. 이미지를 클릭해보면 이미지 설명을 추가할수도 있나 봅니다. index.html 파일의 소스코드를 텍스트 편집기로 열어서 보면 이미지를 화면에 배치하는 HTML태그와, jquery 를 이용해서 이미지를 클릭했을때 이벤트와, 이미지를 드래그했을때 작동하는 소스코드를 확인해..

* 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 소스입니다. 검색박스나, 신청서 같이 정보값을 선택해야 되는 곳에 밋밋하지 않은 스타일로 구성할 때 요긴하네요. 관련 소스는 해당 페이지내 "view source" 버튼을 클릭해서 나오는 소스를 긁어서 사용하시면 됩니다.

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