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

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.dynamicWidth.js 플러그인을 링크합니다. 2. 크기를 조정하려는 요소에 dynamicWidth() 메서드를 호출합니다. 3. 크기 조정 가능한 요소의 최소 너비를 설정할 수 있습니다. (기본값 : 0) 4. 크기 조정 가능한 요소의 오른쪽 패딩을 추가합니다. (기본값 : 3px) - 작동 예제

다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지에서 스크롤을 내리다 보면 위 그림 처럼 스크롤을 따라다니는 메뉴가 상단에 붙어서 현재 보고 있는 위치가 어디인지를 표시해주게 됩니다. 사용방법은 아래와 같습니다.

다운로드 받은 파일의 압축을 해제한 후 example.html 파일을 웹브라우저로 열어보면 pie 그래프의 데모 확인이 가능합니다. 화면에 pie 그래프가 표시가 됩니다. pie 그래프에 동그라미를 클릭해서 드래그 함으로써 그래프의 비율을 조절할 수 있습니다. 그래프 하단의 비율을 표시해주고, + 버트과, - 버튼을 클릭하면, 화면에 표시되는 pie 그래프에 반영이 되게 됩니다. 사용방법은 아래와 같습니다. 그래프가 표시되는 웹페이지를 이용해서 하루 일정 등을 표시하는 용도로도 사용할 수 있겠지만, 사이트 방문자가 원하는 바를 전달을 받기 위한 용도로도 사용할 수 있겠네요.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 emojiarea.js 플러그인을 링크합니다. 2. jQuery emoji-picker.js 관련 파일들을 링크합니다. 3. 입력 필드를 emoji-picker-container 컨테이너로 감싸줍니다. 4. 플러그인을 실행하여 입력 필드에 연결합니다. 5. 이미지 대신 유니코드 이모지를 삽입할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 draggable-msc 플러그인을 문서에 링크합니다. 2. 헤더 식별자를 사용하여 DIV 컨테이너를 만듭니다. 3. draggable-msg 플러그인을 호출하여 컨테이너를 드래그할 수 있도록 합니다. 4. 옵션으로 드래그할 수 있는 기본 식별자를 재정의할 수 있습니다. 5. 옵션으로 드래그 가능한 DIV의 초기 위치를 지정할 수 있습니다. - 작동 예제

버튼 클릭시 확인용 모달 팝업창이 출력됩니다. 자바스크립트 소스입니다. 클릭시 모달 팝업 영역에 클래스를 삽입합니다. css로 모달 팝업창을 보이게 디자인 합니다. 첨부파일 다운로드 또는 해당 사이트에서 전체 소스를 확인할 수 있습니다.

버튼 클릭시 진행중 완료 상태 해당 사이트에서 소스 전체를 확인할 수 있습니다.

다운로드 받은 파일의 압축을 해제한 뒤, examples.html examplesAnimation.html examplesAppl.html examplesContentPlugins.html testSetupProgresspie.html 위 파일들을 웹브라우저로 열어보면 많은 케이스의 데모 및 각각 케이스의 사용법에 대한 확인이 가능합니다. 진행상황을 파이 형태로 화면에 표시해주는 jquery 플러그인입니다. 진행상황을 실시간으로 표시해주는 애니메이션 효과를 주는것도 가능합니다. 상당히 많은 케이스의 샘플들이 있습니다. 파이를 구성하는 요소들의 크기를 위 그림 처럼 설명을 해주고 있습니다. 원 내에 이미지를 보여주는 것도 가능합니다. 위 그림 처럼 각각의 케이스들 마다 페이지에 표시하기 위해서 사용된 태그..

데모를 확인하기 위해서는 PHP가 구동되는 웹서버가 필요합니다. 웹서버에 다운로드 받은 파일을 업로드 하고, 압축을 해제한뒤에, 웹브라우저로 접속가능한 도메인(localhost 또는 IP주소등) 으로 접속한 뒤에 editor.html URL로 접속하면 됩니다. 웹브라우저를 이용해서, 웹페이지에 표시되는 요소(이미지,텍스트,레이어 등등) 를 편집할수 있는 기능을 제공해줍니다. 가령 앨범 페이지를 편집하려고 했을 때 샘플로 만들어둔 페이지(틀) 의 이미지 요소를 변경하기 위해서, 위 그림 처럼 화면에 표시하는 이미지를 선택한 뒤에 이미지 파일을 선택하거나 , 직접 보유하고 있는 이미지 파일을 업로드 하면 화면에 표시되는 이미지를 보여주고자 하는 이미지로 변경하실 수 있겠습니다. 이미지를 변경하는 것 이외에도..

해당 사이트에 데모 애니메이션과 설치 방법에 대한 안내가 잘 되어있습니다. 각 js 와 css 를 include 한 후 a 링크에 클래스와 각 애니메이션와 시간을 마크업 합니다. 그런뒤 JS 로 실행해주면 되겠습니다. 페이지 전환 애니메이션이 필요한 간단한 사이트에 활용하면 좋을것 같습니다.