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

이렇게 생긴 selectbox 를 이렇게 예쁘게 만들 수 있습니다. 사용법도 해당 사이트에 안내가 잘 되어있습니다. 각 js 와 css 를 include 해주고 사용하시면 됩니다. 더 디테일한 커스텀도 가능합니다. 사용해 보시기 바랍니다.

범위를 선택하기 위한 슬라이더를 화면에 표시하는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다. 사용방법은 아래와 같습니다. 페이지에서 범위 값을 선택하도록 하기 위한 인터페이스를 만들때 사용하면 괜찮을 것 같네요.

우측하단 좌우 화살표 버튼을 클릭하시면 좌측 문구와 우측 이미지가 에니메이션 슬라이드 효과와 함께 변경됩니다. 끝까지 이동시 다시 처음부터 반복합니다. 웹사이트 메인페이지에서 유용하게 사용이 가능해 보입니다. 자바스크립트 소스입니다. 이미지 에니메이션 효과 뿐만 아이라 좌측 문구 영역도 별개의 에니메이션 소스로 작동됩니다. css 를 수정하시면 쉽게 변경이 가능합니다. 첨부파일을 다운로드하시거나 해당 사이트에서 소스를 확인할 수 있습니다.

이미지 맵은 이미지 내의 개별 영역을 고유한 대상에 연결하여 작동합니다. 정적 그래픽 또는 사진에 상호 작용을 추가하기 위한 완벽한 솔루션입니다. 이미지 맵의 단점은 브라우저 창의 크기를 변경할 때 픽셀 좌표도최신 상태로 유지해야한다는 것입니다. 이것이 바로 rwdImageMaps.js 플러그인이 들어오는 곳입니다. rwdImageMaps.js는 모든 장치 및 브라우저에서 완벽하게 반응하는 이미지 맵을 만들기위한 경량 jQuery 플러그인입니다. 원본 이미지 크기와 현재 브라우저 창의 크기를 기반으로 이미지 맵의 좌표를 자동으로 다시 계산하고 업데이트합니다. 이미지를 클릭한 위치에 따라서, 위 그림과 같이 다른 경고창이 뜨도록 이미지맵을 지정할수 있습니다. 사용방법은 아래와 같습니다. 반응형 이미지가 되..

다운로드 받은 파일의 압축을 해제한 뒤, example/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 화면에 보라색으로 표시되는 동그라미가 표시가 되고, 보라색 버튼을 클릭하면 위 그림 처럼 클릭했던 동그라미 주변에 방사형으로 메뉴가 펼쳐지게 됩니다. 펼쳐진 메뉴에 버튼을 선택해서 클릭시에는 위 그림 처럼 어떤 메뉴를 클릭했는지를 경고창이 뜨네요. 사용방법은 아래와 같습니다.

웹페이지를 키보드 화살표 키를 따라 가로 세로로 이동하게 만들어 주는 js 입니다. 해당 js 를 받아 선언하고 위와 같이 초기화 해주면 사용 끝입니다. 페이지 구성은 세로로는 section 태그를 가로로는 aside 태그를 사용하여 디자인 하면 됩니다. 위와 같은 옵션도 제공합니다. 이미지 전시와 같은 페이지를 구상한다면 참 좋은 js 입니다.

https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs 위의 링크에 들어가보시면 한글로 사용설명이 아주 쉽게 안내 되어있습니다. 들어가는 파일, 초기 셋팅 방법 등 친절하게 한글로 설명 되어있습니다. 한번 쭉 훌터보시는걸 추천 드립니다. 상업 라이선스도 판매하고 있습니다. 오픈소스로 사용하시엔 위의 내용을 참고하여 사용하시면 되겠습니다.

첨부된 파일의 압축을 해제한 뒤 웹브라우저로 demo/index.html 파일을 열어보면 데모 확인이 가능합니다. 아래와 같은 특징이 있습니다. - AJAX GET 요청을 사용하여 달력에 날짜 이벤트를 추가할 수 있습니다 . 응답은 지정된 형식으로 JSON 인코딩된 이벤트 배열을 반환해야 합니다. Bootstrap JS 모달 창 을 사용하십시오 . 정보는 이벤트 당일 클릭으로 표시됩니다. - 달력에 표시되는 날짜 이벤트의 스타일을 명확히 하기 위해 범례를 추가할 수 있습니다. - 달력은 여러 언어를 지원합니다. - 특정 날짜에 onclick 이벤트가 발생할 때 실행할 함수를 캘린더에 추가할 수 있습니다. - 여러 가지 방법으로 캘린더의 탐색 및 모양을 변경할 수 있습니다. 기본적인 달력은 위 그림과 같습..

ACL은 계층 적 JSON 데이터에서 접을 수있는 트리 구조를 생성하는 가볍고 사용하기 쉬운 jQuery 트리보기 플러그인입니다. 각 맨 위 트리 항목에는 아코디언처럼 확장 및 축소할 수 있는 하위 항목이 포함되어 있어 사용자에게 시각적 일관성을 제공하여 트리 구조의 수준 사이를 쉽게 탐색할 수 있습니다. 폴더 (디렉토리) 트리와 수직 아코디언 메뉴에 적합합니다. 다운로드 받은 파일의 압축을 해제한 뒤 src/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 위 그림과 같은 화면이 표시되고, 각각의 메뉴를 클릭을 하면 하위 메뉴가 펼쳐지는 아코디언 메뉴입니다. 사용법은 아래와 같습니다.

- 라이센스 MIT - 사용 방법 1. 정보 및 이미지 자르기 컨테이너를 만듭니다. 2. 자르기를 실행할 버튼을 추가합니다. 3. JQuery 라이브러리와 cropimage.js 파일을 불러옵니다. 4. 자르기 컨테이너에서 플러그인을 호출하고 자르기 원하는 이미지는 지정합니다. 5. 잘라낸 이미지를 페이지에 표시합니다. 6. 옵션을 변경할 수 있습니다. - 작동 예제