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

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

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

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 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 위 그림과 같은 화면이 표시되고, 각각의 메뉴를 클릭을 하면 하위 메뉴가 펼쳐지는 아코디언 메뉴입니다. 사용법은 아래와 같습니다.

탭메뉴는 올바르게 디자인된 경우 매우 편리하고 유용한 인터페이스 요소가 될 수 있습니다. 그러나 모바일 장치와 같은 작은 화면에서 작동하는 반응형 웹 사이트를 구축할 때 탭 기반 인터페이스는 특히 CSS를 통해 모양을 수정하기 어려울 때 큰 문제가 될 수 있습니다. 미디어 쿼리를 삽입하여 탭의 HTML 코드를 수정할 수 있습니다. 그러나 HTML을 수동으로 변경해야 하기 때문에 이것은 매우 어려운 작업입니다. 또는 해당 자료에서 제공할 jQuery 반응형 탭 스크립트를 사용하여 모바일 장치 와 같은 작은 화면에서 탭을 아코디언 인터페이스로 전환하여 모든 공간을 더 중요한 정보에 사용해 보세요. # 일반화면 # 모바일과 같은 가로 디바이스가 작은 화면 사용방법 안내 입니다. 1. 탭메뉴 CSS 호출 2. ..

peekABar는 많은 사용자 지정 옵션이 있는 고정 알림 표시줄을 만드는 데 도움이 되는 매우 가벼운 jQuery 알림 플러그인입니다. 압축 파일 해제하시면 index.html 파일이 있습니다. 참고하시면 좋습니다. peekABar 는 브라우저 상단에 메시지를 보여주는 기능입니다. Default 는 계속 보여주는 기능이며 Auto Hide 는 잠깐 보여주는 기능입니다. 설치 방법은 아래를 참고 해주세요. 1. 라이브러리 호출 2.컨테이너 생성 3. 이벤트 등록 라이센스는 MIT 입니다.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 creditCardNumberCheck.js 파일을 호출합니다. 2. 카드 번호 입력 폼을 생성합니다. 3. 입력된 카드 번호 입력 폼을 선택자로 하여 플러그인을 호출하면 true 또는 false 값을 얻을 수 있습니다. - 작동 예제

- 라이센스 MIT - 키보드 부가 기능 - 왼쪽/오른쪽 화살표 : 같은 영역의 입력 필드 사이에서 포커스를 이동합니다. - BackSpace : 모든 입력 필드에서 입력한 내용을 제거합니다. - Home/End : 첫번째/마지막 입력 필드도 포커스를 이동합니다. - 사용 방법 1. 카드 번호 입력폼을 생성합니다. 2. jQuery 라이브러리와 join_inputs 플러그인 파일을 호출합니다. 3. join_inputs 플러그인을 호출합니다. - 작동 예제

선택하고자 하는 여러개의 옵션을 셀렉트박스를 이용해서 선택할 수 있는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 뒤 example/index.html 파일을 웹브라우저로 열어보면 예제를 확인할 수 있습니다. 주요 기능은 아래와 같습니다. - 선택할 수 있는 최대 옵션 수를 지정할 수 있습니다. - 각 옵션에 대해 이미지를 할당할 수 있습니다. - 검색 상자를 기준으로 옵션을 필터링할 수 있습니다. - 선택한 옵션을 태그/토큰으로 표시합니다. 예제 파일을 웹브라우저로 열어보면, 아래의 그림과 같은 화면이 표시가 됩니다. Select 라는 부분을 클릭해보면, 선택 가능한 옵션들이 화면에 표시가 됩니다. 옵션의 제목들 앞에, 옵션에 해당하는 이미지를 표시하도록 할 수 있습니다. 몇몇개의 ..