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

영역을 드래그 할때 피드백을 제공합니다. 드래그 할때 실제 드래그는 되지 않고 커서와 함께 내용이 움직이게 하거나 반투명하게 내용을 움직이게 할 수 있습니다. 드래그시 자동으로 다른 드래그 영역보다 상위 zindex 가 되도록 할 수 있습니다. $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); 반투명하게 드래그 됩니다. 실제 드래그 되어 이동하지는 않고 커서를 놓으면 드래그된 영역은 사라집니다. $( "#draggable3" ).draggable({ cursor: "move", cursorAt: { top: -12, left: -20 }, helper: function( event ) { return $( "I'm a custom help..

드래그 영역dmf DOM 요소의 안쪽 또는 바깥쪽 경계에 스냅합니다. grid 옵션을 사용하여 드래그 격자 셀의 크기를 설정할 수 있습니다. $( "#draggable" ).draggable({ snap: true }); 다른 모든 드래그 가능한 요소에 드래그됩니다. $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); target 영역의 안쪽에서 선에 가까지 드래그 하면 자동으로 선에 맞춰서 드래그 됩니다. $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); target 영역의 바깥쪽에서 선에 가까지 드래그 하면 자동으로 선에 맞춰서 드래그 됩니다. $( "..

css 와 js 를 이용한 반응형 상단고정 슬라이드 메뉴입니다. 스크롤시 상단에 네이게이션이 고정됩니다. 네이게이션에 메뉴 클릭시 해당 내용이 슬라이딩으로 출력 스크롤만 하더라도 페이지 이동과 함께 네이게이션에 현재위치가 표시가 됩니다.

jquery 로 제작된 전화번호를 입력받기 위한 입력폼입니다. 각 국가의 국기 와 국가번호를 확인하고 선택한 후 전화번호를 입력받을수 있습니다. 첨부된 파일의 압축을 해제한후 demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 전화번호를 입력받기 위한 입력폼이며, 각 국가별로 국기와, 국가번호를 포함한 전화번호를 입력받아야 할 때 유용할거 같네요. 단순히 전화번호를 입력받는 입력폼으로 보면, 별거 아닌듯 합니다만, 대략 200개가 넘어가는 국기와, 국가명, 국제번호 를 수집하는 과정을 건너뛰고 쉽게 사용할수 있다는 장점이 있을거 같네요. demo.html 파일의 소스코드를 보면 몇줄 안되는 js 와, css를 적용하면 입력폼이 화면에 표시가 됩니다. 사용법 및 지원하는 기능은 https:/..

이미지를 접거나 펼수 있는 기능을 제공 * License - MIT License * 사용방법 - 첨부된 압축파일을 해제하여 원하는 곳에 업로드 합니다 기본적으로 제공되는 css , js 파일을 로드합니다 아래와 같은 코드로 이미지 및 텍스트를 호출하여 이미지를 접었다 폈다 할 수 있습니다 css 에 선언된 이미지 및 효과속성을 지정하여 작동되는 형태므로 디자인 작업자분께서 분석후 사용하시면 유용하실 듯 합니다 샘플 html, css, js 파일의 경우 첨부된 압축파일을 해제하면 확인하실 수 있습니다

Chosen은 길고 다루기 힘든 셀렉트 박스를 훨씬 더 사용자 친화적으로 만드는 jQuery 플러그인입니다. * License - MIT License * 사용방법 - 첨부된 압축파일을 다운로드 후 원하는 경로에 압축을 해제한후 제공되는 css , js 파일을 로드하여 디자인 요소에 활용하시면 됩니다 html 문서상단에 아래와 같이 css 파일 선언과 문서 하단에 js 파일선언후 기본 셀렉트 박스호출 및 아래와 같이 선택된 박스들에 대한 value 값을 지정하여 볼 수 있는 기능도 있습니다 해당 버전은 XSS 문제가 수정된 버전입니다

jQuery를 이용한 포토 슬라이드 구현 소스이며, 다양한 옵션 제공으로 손쉽게 사용이 가능합니다 비교적 간단한 소스 삽입만으로도 이용이 가능합니다. 하단의 작은 미리보기 이지미 기능과 메인 이미지 마우스 오버시 좌우 이동버튼도 활성화 됩니다. 화면 해상도에 따라서 자동으로 제어가 되며 반응형으로 제작되어 다양한 디바이스에 활용이 가능합니다.

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

안녕하세요 모달을 이용하여 Alert, Confirm 창을 많이들 사용하고 있으시죠? JQuery 를 이용하여 쉽게 Alert, Confirm, Window 창을 생성할 수 있는 자료를 소개해 드릴까 합니다. ^^; 압축파일을 다운로드 받으시면 test.html 파일을 만들어 두었습니다. ( 원자료의 사이트에서는 샘플 파일을 제공하지 않아서 만들어서 첨부했어요 ^^ ) 스타일을 호출해 주세요. 모달창의 크기 및 레이아웃 관련 스타일 입니다. 스크립트를 호출합니다. 본문을 구성 합니다. 버튼 생성이라 보시는게 맞을듯 합니다. 모달창을 셋팅 합니다. var dialogManager = new DialogsManager.Instance(); //Instance 생성합니다. 한페이지에 1개의 Instance 만..

HTML, CSS, JQuery 를 이용하여 브라우저 인터페이스의 탭메뉴를 만드는 소스를 소개 합니다. 신규 탭 생성 + 드래그 앤 드랍 기능이 탑재되어 있습니다. 기본 CSS 는 2개로 구성 되어 있습니다. 호출하는 Script 는 3개가 필요 합니다. 본문은 아래의 HTML 로 구성되어 있습니다. html 에서는 탭메뉴의 디자인과 파비콘들을 설정할 수 있습니다. 초기화 스크립트 및 탭메뉴 추가 스크립트는 아래처럼 구성되어 있습니다. 스크립트로는 탭메뉴의 크기, 신규 탭생성, 스킨 변경 등을 할 수 있습니다. 재미 있는 탭메뉴인데요. 바로 사용하기에는 부족한 감이 조금 있습니다. 조금 가공해서 사용하신다면 재미 있는 인터페이스를 구성할 수 있을듯 합니다. ^^